rlstyles 1.0.2

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

使用 #

翻墙原因 上传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
boxShadowdynamic[BoxShadow(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

0
likes
55
pub points
0%
popularity

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

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

fangkyi02@live.cn

License

BSD (LICENSE)

Dependencies

cupertino_icons, flutter, flutter_screenutil

More

Packages that depend on rlstyles