rlStyle
可以使用类似rn的写法类写flutter 减少flutter的地狱嵌套
demo演示视频
https://www.bilibili.com/video/av71131117
注意事项
1.不要再root级 使用flex:1 这样会导致报错 debug模式正常 但是profile release都会无法正常显示
使用
添加rlStyle到您的pubspec.yaml
dependencies:
rlstyles: 2.0 .1
示例
示例代码 请直接运行本地example项目 内涵9个小demo 增加grid案例
demo
import 'package:flutter/material.dart' ;
import 'package:rlstyles/Router.dart' ;
import 'package:rlstyles/Styles.dart' ;
import 'package:rlstyles/View.dart' ;
import 'package:flutter_screenutil/flutter_screenutil.dart' ;
class Demo1 extends StatelessWidget {
const Demo1 ( { this . navigation} ) ;
final NavigationOption navigation ;
renderView ( ) {
List < dynamic > colorArr = [ 'blue' , 'red' , '#f55fff' , 'rgba(255,12,13,1)' , 'rgb(12,5,78)' , Colors . red , Colors . black . withOpacity ( 0.5 ) , 'linear-gradient(blue,red)' ] ;
return View (
styles : styles [ 'wrap' ] ,
children : colorArr . map ( ( f ) {
return View (
styles : Styles (
width : 300 ,
height : 300 ,
marginTop : 50 ,
marginLeft : 50 ,
marginRight : 10 ,
backgroundColor : f
) ,
) ;
} ) . toList ( ) ,
) ;
}
@override
Widget build ( BuildContext context ) {
// 在整个项目初始化的地方 只需要初始化一次 填入设计稿尺寸即可
ScreenUtil . instance = ScreenUtil ( width : 750 , height : 1330 ) ;
return View (
styles : styles [ 'main' ] ,
children : < Widget > [
renderView ( )
] ,
) ;
}
}
const Map < String , Styles > styles = {
'main' :Styles (
flexDirection : 'column' ,
backgroundColor : 'white' ,
overflow : 'scroll' ,
width : double . infinity ,
height : double . infinity ,
paddingBottom : 100
) ,
'wrap' :Styles (
flexWrap : 'wrap' ,
position : 'rel'
)
} ;
flex
名称
类型
参数写法
display
String
flex,none
color
dynamic
Colors.white,Color(0xFFFFFF),rgba(255,255,255,1),rgb(255,255,255),white
flexDirection
String
row,column
justifyContent
String
flex-start,center,flex-end,space-between,space-arround,space-evenly
alignItems
String
flex-start,center,flex-end,space-between,space-arround,space-evenly
flex
int
flex:1
box-size
名称
类型
参数写法
width
dynamic
String,int,double,'16px'
height
dynamic
String,int,double,'16px'
maxWidth
double
maxWidth:100
maxHeight
double
maxHeight:100
minHeight
double
minHeight:100
minWidth
double
minWidth:100
margin
double
margin:100
marginLeft
double
marginLeft:100
marginTop
double
marginTop:100
marginRight
double
marginRight:100
marginBottom
double
marginBottom:100
padding
double
padding:100
paddingLeft
double
paddingLeft:100
paddingTop
double
paddingTop:100
paddingRight
double
paddingRight:100
paddingBottom
double
paddingBottom:100
box
名称
类型
参数写法
opacity
double
opacity:1.0
border
名称
类型
参数写法
borderRadius
double
borderRadius:10
borderWidth
double
borderWidth:1
borderStyle
String
solid
borderColor
dynamic
Colors.white,Color(0xFFFFFF),rgba(255,255,255,1),rgb(255,255,255),white
boxShadow
dynamic
[BoxShadow(offset:Offset(0,1))],BoxShadow(offset:Offset(0,1))
elevation
double
elevation:10
borderBottomLeftRadius
double
borderBottomLeftRadius:10
borderBottomRightRadius
double
borderBottomRightRadius:10
borderTopLeftRadius
double
borderTopLeftRadius:10
borderTopRightRadius
double
borderTopRightRadius:10
borderLeftStyle
String
solid
borderLeftColor
dynamic
Colors.white,Color(0xFFFFFF),rgba(255,255,255,1),rgb(255,255,255),white
borderLeftWidth
double
borderLeftWidth:10
borderRightStyle
String
solid
borderRightColor
String
solid
borderRightWidth
double
borderRightWidth:1.0
borderTopStyle
String
solid
borderTopColor
dynamic
Colors.white,Color(0xFFFFFF),rgba(255,255,255,1),rgb(255,255,255),white
borderTopWidth
double
borderTopWidth:1.0
borderBottomWidth
double
borderBottomWidth:1.0
borderBottomColor
dynamic
Colors.white,Color(0xFFFFFF),rgba(255,255,255,1),rgb(255,255,255),white
borderBottomStyle
String
solid
postion
名称
类型
参数写法
left
double
left:10
right
double
right:10
top
double
top:10
bottom
double
bottom:10
position
String
rel,relative,abs,absolute,(rel = relative abs = absolute),grid
background
名称
类型
参数写法
backgroundImage
string
linear-gradient(rgba,rgb,white)
backgroundColor
dynamic
linear-gradient(rgba,rgb,white),Colors.white,Color(0xFFFFFF),rgba(255,255,
255,1),rgb(255,255,255),white
font
名称
类型
参数写法
fontWeight
dynamic
100,200,300,400,500,600,700,800,900,bold
fontFamily
String
fontFamily:'微软雅黑'
fontSize
double
fontSize:10
textDecoration
String
none overline line-through underline
textOverflow
String
clip ellipsis string
textAlign
String
start left center right justify
scroll
名称
类型
参数写法
overflow
String
scroll 纵向滑动
overflowY
String
scroll 纵向滑动
overflowX
String
scroll 横向滑动
grid
名称
类型
参数写法
gridCount
int
一行子元素数量
gridMainAxisSpacing
double
主轴上下间距
gridCrossAxisSpacing
double
副轴上下间距
gridChildAspectRatio
double
子元素比例
暂不支持属性
boxSizing
lineHeight
whiteSpace
lines
letterSpacing