Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fangkyi03/flutter-rlstyle
在flutter 里面使用react语法写样式
https://github.com/fangkyi03/flutter-rlstyle
css flutter react react-native ui
Last synced: about 23 hours ago
JSON representation
在flutter 里面使用react语法写样式
- Host: GitHub
- URL: https://github.com/fangkyi03/flutter-rlstyle
- Owner: fangkyi03
- License: bsd-2-clause
- Created: 2019-10-10T13:38:48.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-05-28T21:09:30.000Z (over 1 year ago)
- Last Synced: 2023-08-20T23:00:58.591Z (about 1 year ago)
- Topics: css, flutter, react, react-native, ui
- Language: Dart
- Size: 3.74 MB
- Stars: 31
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# rlStyle
可以使用类似rn的写法类写flutter 减少flutter的地狱嵌套
# demo演示视频
[https://www.bilibili.com/video/av71131117](https://www.bilibili.com/video/av71131117)
# 注意事项
1.不要再root级 使用flex:1 这样会导致报错 debug模式正常 但是profile release都会无法正常显示
# 使用
添加rlStyle到您的pubspec.yaml
```javaScript
dependencies:
rlstyles: 2.0.1
```
# 示例
示例代码 请直接运行本地example项目 内涵9个小demo 增加grid案例
# demo
```javaScript
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 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: [
renderView()
],
);
}
}
const Map 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