Flutter动态创建UI(flutter_dynamic)最佳实践
flutter_dynamic
flutter_dynamic 是一个能动态创建Flutter应用的引擎。flutter_dynamic不但支持写UI,还支持写代码逻辑。
EN: The flutter_dynamic is an engine that create flutter application dynamically. flutter_dynamic not only supports writing UI, but also writing code logic.
中文文档
English Document
Github地址
153768151@qq.com - feel free to contact me
Best Practice (最佳实践)
此文档我们将一步步按展示如何使用flutter_dynamic完成动态创建页面的过程。如果想看真实的效果,请运行example工程里的Best Practice。
ezgif-1-fbcbc15ebc8f.gif
Step 1
先创建具有两个输入框和一个按扭的描述UI的数据;
TextFieldA
var _textFieldA = { "xKey": "_TextFieldA", "widgetName": "TextField", "props": { "style": { "color": "0xff000000", "fontWeight": "bold" }, "keyboardType": "number", "value": "Input", "decoration" : { "hint": "I am TextFieldA", "border": { "color": "0xffffff00", "width": "2" } } } };
TextFieldB
var _textFieldB = { "xKey": "_TextFieldB", "widgetName": "TextField", "props": { "style": { "color": "0xff000000", "fontWeight": "bold" }, "value": "Input", "decoration" : { "hint": "I am TextFieldB", "border": { "color": "0xffffff00", "width": "2" } } } };
button
var _button = { "xKey": "_RawMaterialButton", "widgetName": "RawMaterialButton", "props": { "fillColor": "0xfff2f2f2", "padding": "[10,0,10,0]", "child": { "type": "sysWidget", "widgetName": "Text", "props": { "data": "'RawMaterialButton'. Click", "color": "0xff123456", "backgroundColor": "0xff00ff00", "fontSize": "16", "fontWeight": "bold", "lineHeight": "1.2" } } }};
Step 2
为了更好地演示效果,我们需要将Step 1的json数据放在Scaffold类型的Material widget里,并通过单独的页面来展示它:
var _dslRootWidget = { "xKey": "", "widgetName": "Scaffold", "props": { "appBar": { "xKey": "", "widgetName": "AppBar", "props": { "title": { "widgetName": "Text", "props": {"data": "Navigator"} } } }, "body": { "xKey": "", "widgetName": "SafeArea", "props": { "child": { "xKey": "", "widgetName": "Column", "props": { "children": [ _textFieldA, _textFieldB, _button ] } } } } } };
Step 3
通过Step 1和Step 2,我们就可以创建一个完整的UI了。具体效果见example/lib/main.dart里的Best Practice演示效果:
Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext contex){ return YZDynamic.buildWidget(context, bestPraticeDsl, preConfig: null);}));
Step 4
如果点击button的时候需要获取TextFieldA和TextFieldB的值,我们该如何实现呢?很简单,在button json里加入如下定义就可以了:
event
"xEvents": [ { "eventType": "onClick", "code": ''' <c:valueA>=<w:_TextFieldA>; action:yzToast(tip:<c:valueA>) ''' } ]
and button json will show as:
var _button = { "xKey": "_RawMaterialButton", "widgetName": "RawMaterialButton", "props": { "fillColor": "0xfff2f2f2", "padding": "[10,0,10,0]", "child": { "type": "sysWidget", "widgetName": "Text", "props": { "data": "Button", "color": "0xff123456", "backgroundColor": "0xff00ff00", "fontSize": "16", "fontWeight": "bold", "lineHeight": "1.2" } } }, "xEvents": [ { "eventType": "onClick", "code": ''' <c:valueA>=<w:_TextFieldA>; action:yzToast(tip:<c:valueA>) ''' } ]};
Step 5
Building more wonderful application, Please read Document
作者:twj小鱼儿
链接:https://www.jianshu.com/p/59d39c82cb6f
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。