{"id":20205378,"url":"https://github.com/fangkyi03/flutter-rlstyle","last_synced_at":"2025-04-10T12:13:40.840Z","repository":{"id":56838300,"uuid":"214192544","full_name":"fangkyi03/flutter-rlstyle","owner":"fangkyi03","description":"在flutter 里面使用react语法写样式","archived":false,"fork":false,"pushed_at":"2023-05-28T21:09:30.000Z","size":3922,"stargazers_count":32,"open_issues_count":0,"forks_count":2,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-24T11:07:29.594Z","etag":null,"topics":["css","flutter","react","react-native","ui"],"latest_commit_sha":null,"homepage":null,"language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fangkyi03.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-10T13:38:48.000Z","updated_at":"2024-11-28T09:51:58.000Z","dependencies_parsed_at":"2022-09-12T11:51:41.395Z","dependency_job_id":null,"html_url":"https://github.com/fangkyi03/flutter-rlstyle","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fangkyi03%2Fflutter-rlstyle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fangkyi03%2Fflutter-rlstyle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fangkyi03%2Fflutter-rlstyle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fangkyi03%2Fflutter-rlstyle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fangkyi03","download_url":"https://codeload.github.com/fangkyi03/flutter-rlstyle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248217081,"owners_count":21066633,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","flutter","react","react-native","ui"],"created_at":"2024-11-14T05:17:14.993Z","updated_at":"2025-04-10T12:13:40.821Z","avatar_url":"https://github.com/fangkyi03.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# rlStyle \n可以使用类似rn的写法类写flutter 减少flutter的地狱嵌套\n\n# demo演示视频\n[https://www.bilibili.com/video/av71131117](https://www.bilibili.com/video/av71131117)\n\n# 注意事项\n1.不要再root级 使用flex:1 这样会导致报错 debug模式正常 但是profile release都会无法正常显示\n# 使用\n添加rlStyle到您的pubspec.yaml\n```javaScript\ndependencies:\n  rlstyles: 2.0.1\n```\n\n# 示例\n示例代码 请直接运行本地example项目 内涵9个小demo 增加grid案例\n\n# demo\n```javaScript\nimport 'package:flutter/material.dart';\nimport 'package:rlstyles/Router.dart';\nimport 'package:rlstyles/Styles.dart';\nimport 'package:rlstyles/View.dart';\nimport 'package:flutter_screenutil/flutter_screenutil.dart';\nclass Demo1 extends StatelessWidget {\n\n  const Demo1({this.navigation});\n  final NavigationOption navigation;\n\n  renderView () {\n    List\u003cdynamic\u003e colorArr = ['blue','red','#f55fff','rgba(255,12,13,1)','rgb(12,5,78)',Colors.red,Colors.black.withOpacity(0.5),'linear-gradient(blue,red)'];\n    return View(\n      styles: styles['wrap'],\n      children: colorArr.map((f){\n        return View(\n          styles: Styles(\n            width: 300,\n            height: 300,\n            marginTop: 50,\n            marginLeft: 50,\n            marginRight: 10,\n            backgroundColor: f\n          ),\n        );\n      }).toList(),\n    );\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    // 在整个项目初始化的地方 只需要初始化一次 填入设计稿尺寸即可\n    ScreenUtil.instance = ScreenUtil(width: 750, height: 1330);\n    return View(\n      styles: styles['main'],\n      children: \u003cWidget\u003e[\n        renderView()\n      ],\n    );\n  }\n}\n\nconst Map\u003cString,Styles\u003e styles = {\n  'main':Styles(\n    flexDirection: 'column',\n    backgroundColor: 'white',\n    overflow: 'scroll',\n    width: double.infinity,\n    height: double.infinity,\n    paddingBottom: 100\n  ),\n  'wrap':Styles(\n    flexWrap: 'wrap',\n    position: 'rel'\n  )\n};\n```\n\n# flex\n\n名称 | 类型 | 参数写法\n-|-|-\ndisplay | String | flex,none \ncolor | dynamic | Colors.white,Color(0xFFFFFF),rgba(255,255,255,1),rgb(255,255,255),white\nflexDirection | String | row,column\njustifyContent | String | flex-start,center,flex-end,space-between,space-arround,space-evenly\nalignItems | String | flex-start,center,flex-end,space-between,space-arround,space-evenly\nflex | int | flex:1\n\n# box-size \n名称 | 类型 | 参数写法\n-|-|-\nwidth | dynamic | String,int,double,'16px'\nheight | dynamic | String,int,double,'16px'\nmaxWidth | double | maxWidth:100\nmaxHeight | double | maxHeight:100\nminHeight | double | minHeight:100\nminWidth | double | minWidth:100\nmargin | double | margin:100\nmarginLeft | double | marginLeft:100\nmarginTop | double | marginTop:100\nmarginRight | double | marginRight:100\nmarginBottom | double | marginBottom:100\npadding | double | padding:100\npaddingLeft | double | paddingLeft:100\npaddingTop | double | paddingTop:100\npaddingRight | double | paddingRight:100\npaddingBottom | double | paddingBottom:100\n\n# box \n名称 | 类型 | 参数写法\n-|-|-\nopacity | double | opacity:1.0\n\n# border\n名称 | 类型 | 参数写法\n-|-|-\nborderRadius | double | borderRadius:10\nborderWidth | double | borderWidth:1\nborderStyle | String | solid \nborderColor | dynamic | Colors.white,Color(0xFFFFFF),rgba(255,255,255,1),rgb(255,255,255),white\nboxShadow | dynamic | [BoxShadow(offset:Offset(0,1))],BoxShadow(offset:Offset(0,1))\nelevation | double | elevation:10\nborderBottomLeftRadius | double | borderBottomLeftRadius:10\nborderBottomRightRadius | double | borderBottomRightRadius:10\nborderTopLeftRadius | double | borderTopLeftRadius:10\nborderTopRightRadius | double | borderTopRightRadius:10\nborderLeftStyle | String | solid\nborderLeftColor | dynamic | Colors.white,Color(0xFFFFFF),rgba(255,255,255,1),rgb(255,255,255),white\nborderLeftWidth | double | borderLeftWidth:10\nborderRightStyle | String | solid\nborderRightColor | String | solid\nborderRightWidth | double | borderRightWidth:1.0\nborderTopStyle | String | solid\nborderTopColor | dynamic | Colors.white,Color(0xFFFFFF),rgba(255,255,255,1),rgb(255,255,255),white\nborderTopWidth | double | borderTopWidth:1.0\nborderBottomWidth | double | borderBottomWidth:1.0\nborderBottomColor | dynamic | Colors.white,Color(0xFFFFFF),rgba(255,255,255,1),rgb(255,255,255),white\nborderBottomStyle | String | solid\n\n# postion \n名称 | 类型 | 参数写法\n-|-|-\nleft | double | left:10\nright | double | right:10\ntop | double | top:10\nbottom | double | bottom:10\nposition | String | rel,relative,abs,absolute,(rel = relative abs = absolute),grid\n\n# background\n名称 | 类型 | 参数写法\n-|-|-\nbackgroundImage | string | linear-gradient(rgba,rgb,white)\nbackgroundColor | dynamic | linear-gradient(rgba,rgb,white),Colors.white,Color(0xFFFFFF),rgba(255,255,\n255,1),rgb(255,255,255),white\n\n# font\n名称 | 类型 | 参数写法\n-|-|-\nfontWeight | dynamic | 100,200,300,400,500,600,700,800,900,bold\nfontFamily | String | fontFamily:'微软雅黑'\nfontSize | double | fontSize:10\ntextDecoration | String | none overline line-through underline\ntextOverflow | String | clip ellipsis string\ntextAlign | String | start left center right justify\n\n# scroll\n名称 | 类型 | 参数写法\n-|-|-\noverflow | String | scroll 纵向滑动\noverflowY | String | scroll 纵向滑动\noverflowX | String | scroll 横向滑动\n\n# grid\n名称 | 类型 | 参数写法\n-|-|-\ngridCount | int | 一行子元素数量\ngridMainAxisSpacing | double | 主轴上下间距\ngridCrossAxisSpacing | double | 副轴上下间距\ngridChildAspectRatio | double | 子元素比例\n\n\n# 暂不支持属性\nboxSizing\nlineHeight\nwhiteSpace\nlines\nletterSpacing\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffangkyi03%2Fflutter-rlstyle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffangkyi03%2Fflutter-rlstyle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffangkyi03%2Fflutter-rlstyle/lists"}