rlstyles 2.0.3

Using the writing method of RN to develop fluent to reduce the nesting of hell

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