rlStyle

可以使用类似rn的写法类写flutter 减少flutter的地狱嵌套

demo演示视频

https://www.bilibili.com/video/av71131117

使用

翻墙原因 上传pub有问题 可以使用git方式 添加rlStyle到您的pubspec.yaml

dependencies:
  flutter_screenutil: ^0.5.3
  rlstyles:
    git:
      url: git://github.com/fangkyi03/rlstyle.git

示例

示例代码 请直接运行本地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

名称类型参数写法
displayStringflex,none
colordynamicColors.white,Color(0xFFFFFF),rgba(255,255,255,1),rgb(255,255,255),white
flexDirectionStringrow,column
justifyContentStringflex-start,center,flex-end,space-between,space-arround,space-evenly
alignItemsStringflex-start,center,flex-end,space-between,space-arround,space-evenly
flexintflex:1

box-size

名称类型参数写法
widthdynamicString,int,double,'16px'
heightdynamicString,int,double,'16px'
maxWidthdoublemaxWidth:100
maxHeightdoublemaxHeight:100
minHeightdoubleminHeight:100
minWidthdoubleminWidth:100
margindoublemargin:100
marginLeftdoublemarginLeft:100
marginTopdoublemarginTop:100
marginRightdoublemarginRight:100
marginBottomdoublemarginBottom:100
paddingdoublepadding:100
paddingLeftdoublepaddingLeft:100
paddingTopdoublepaddingTop:100
paddingRightdoublepaddingRight:100
paddingBottomdoublepaddingBottom:100

box

名称类型参数写法
opacitydoubleopacity:1.0

border

名称类型参数写法
borderRadiusdoubleborderRadius:10
borderWidthdoubleborderWidth:1
borderStyleStringsolid
borderColordynamicColors.white,Color(0xFFFFFF),rgba(255,255,255,1),rgb(255,255,255),white
boxShadowdynamicBoxShadow(offset:Offset(0,1)),BoxShadow(offset:Offset(0,1))
elevationdoubleelevation:10
borderBottomLeftRadiusdoubleborderBottomLeftRadius:10
borderBottomRightRadiusdoubleborderBottomRightRadius:10
borderTopLeftRadiusdoubleborderTopLeftRadius:10
borderTopRightRadiusdoubleborderTopRightRadius:10
borderLeftStyleStringsolid
borderLeftColordynamicColors.white,Color(0xFFFFFF),rgba(255,255,255,1),rgb(255,255,255),white
borderLeftWidthdoubleborderLeftWidth:10
borderRightStyleStringsolid
borderRightColorStringsolid
borderRightWidthdoubleborderRightWidth:1.0
borderTopStyleStringsolid
borderTopColordynamicColors.white,Color(0xFFFFFF),rgba(255,255,255,1),rgb(255,255,255),white
borderTopWidthdoubleborderTopWidth:1.0
borderBottomWidthdoubleborderBottomWidth:1.0
borderBottomColordynamicColors.white,Color(0xFFFFFF),rgba(255,255,255,1),rgb(255,255,255),white
borderBottomStyleStringsolid

postion

名称类型参数写法
leftdoubleleft:10
rightdoubleright:10
topdoubletop:10
bottomdoublebottom:10
positionStringrel,relative,abs,absolute,(rel = relative abs = absolute),grid

background

名称类型参数写法
backgroundImagestringlinear-gradient(rgba,rgb,white)
backgroundColordynamiclinear-gradient(rgba,rgb,white),Colors.white,Color(0xFFFFFF),rgba(255,255,
255,1),rgb(255,255,255),white

font

名称类型参数写法
fontWeightdynamic100,200,300,400,500,600,700,800,900,bold
fontFamilyStringfontFamily:'微软雅黑'
fontSizedoublefontSize:10
textDecorationStringnone overline line-through underline
textOverflowStringclip ellipsis string
textAlignStringstart left center right justify

scroll

名称类型参数写法
overflowStringscroll 纵向滑动
overflowYStringscroll 纵向滑动
overflowXStringscroll 横向滑动

grid

名称类型参数写法
gridCountint一行子元素数量
gridMainAxisSpacingdouble主轴上下间距
gridCrossAxisSpacingdouble副轴上下间距
gridChildAspectRatiodouble子元素比例

暂不支持属性

boxSizing lineHeight whiteSpace lines letterSpacing

Libraries

ContainerView
HexColor
ImageView
ScrollView
StackRouter
Styles
TextView
Tool
View
base
main