rlStyle

可以使用類似rn的寫法類寫flutter 減少flutter的地獄嵌套

備注

flutter pub 因?yàn)榉瓑﹃P(guān)系 導(dǎo)致一直無法上傳成功 所以只能改用git方式集成

項(xiàng)目地址

https://github.com/fangkyi03/rlstyle.git

demo演示視頻

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

使用

添加rlStyle到您的pubspec.yaml

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

示例

示例代碼 請(qǐng)直接運(yùn)行本地example項(xiàng)目 內(nèi)涵9個(gè)小demo

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) {
    // 在整個(gè)項(xiàng)目初始化的地方 只需要初始化一次 填入設(shè)計(jì)稿尺寸即可
    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

box-size

box

border

postion

background

255,1),rgb(255,255,255),white

font

scroll

暫不支持屬性

boxSizing
lineHeight
whiteSpace
lines
letterSpacing