flutter fair框架逻辑转换语法糖

204 阅读1分钟

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(),],   
 );