fair 的 Ui布局中的逻辑处理是无法转换的例如 if map 等 ,如果单独抽离创建js 文件感觉很不值,如果逻辑判断最终的产物是widget 方法内部大部分都是布局相关,属于逻辑的只需要处理一个判断。是不是可以放到Dart侧 构建Widget Tree的时,做一下条件判断处理也可以呢?
方案1:
需要完整提供JS和Dart Widget的映射和JS侧的构建Widget的能力,这就变成了类似MXFlutter和Kraken的方案,区别只是他们需要开发者自己手写,Fair可以工具生成。
方案2:
需要告知布局解析引擎,构建时使用哪个分支。固定格式的判断、循环等,也都可以在Dart侧处理,相关的逻辑呈现就需要在DSL文件内。
经过思考,我们决定采用第2种方案,来解决布局和逻辑混编的场景问题,以及在Dart侧完成布局子方法的调用拼接。
列举部分常用语法糖
if 语句
Sugar.ifEqualBool(false,
trueValue: "挣钱",
falseValue: "花钱");Sugar.ifEqual("实际值", "预期值",
trueValue: "挣钱",
falseValue: "花钱");
Sugar.ifRange("3", ["3","4","5"],
trueValue: "包含",
falseValue: "不包含");
map 遍历语句
void setPageName(String name) {
print("\(name),执行操作");
}// 不带索引 index
Sugar.map(["1","2","3"],
builder: setPageName);
// 带索引 index
Sugar.mapEach(["1","2","3"],
(index, item) => {
});
switch 语句
Sugar.switchCase(3,
[SugarSwitchCaseObj(sugarCase: 12, reValue: "吃饭"),
SugarSwitchCaseObj(sugarCase: 3, reValue: "睡觉"),],
"返回默认值");
其他包装
Sugar.popMenuButton(
itemBuilder: (content){
return [ PopupMenuItem( value: '语文', child: Text("语文")) ];
});
// ListView
Sugar.listBuilder(
itemBuilder: (index, item){
return Container();
}
// Duration
Sugar.isDuration();// ButtonStyle
Sugar.isButtonStyle(
);
工具方法糖
Sugar.colorsShade(color, i);
Sugar.colorsWithOpacity(c, o);
Sugar.convertToString(orginalValue: orginalValue);Sugar.height(context);
Sugar.width(context);
Sugar.paddingTop(context);
Sugar.paddingBottom(context);
Sugar.requestFocus(context);Sugar.sliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 10);Sugar.isNestedScrollViewHeaderSliversBuilder(
context: context,
innerBoxIsScrolled: true,
headerSliverBuilder: <Widget>[
Container(),
Container(),],
);