rlstyles

Description:

rlstyles

rlStyle #
可以使用类似 rn 的写法类写 flutter 减少 flutter 的地狱嵌套
demo 演示视频 #
https://www.bilibili.com/video/av71131117

tailwindcss 语法
https://www.bilibili.com/video/BV1U34y187As/
注意事项 #
1.不要再 root 级 使用 flex:1 这样会导致报错 debug 模式正常 但是 profile release 都会无法正常显示
使用 #
添加 rlStyle 到您的 pubspec.yaml
dependencies:
rlstyles: 2.0.1
copied to clipboard
示例 #
示例代码 请直接运行本地 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'
)
};
copied to clipboard
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