本人在某电商公司搬砖，一般来说电商APP的首页都需要非常动态灵活的展现方式，例如：某天产品突发奇想为后天的xx大促活动设计了一个酷炫的UI展现方式，跟技术说如果按照我的这种展示交互来做的话，这个转化率肯定能提升100%。问我们什么时候能搞定，我们一评估发现这个需要发版才能搞定。后天的xx大促肯定是来不及了。产品会觉得我们技术太差，我们也在产品面前抬不起头。
电商app
对于这种问题，APP有React Native、Weex这种解决方案，但是我们调研RN后发现，RN有很多问题，而且性能方面也不是太好。好像现在越来越多的公司也已经抛弃RN了。所以我们就决定自己定义了一套UI组件协议，在Android、iOS，JS设置小程序端分别实现。这种方案前期工作量确实很大，但是当你的UI组件协议越来越丰富时，带来的好处也是极大的。APP中的很多页面我们都能做到随时更新。甚至是能做到随时新增一些页面。避免APP一旦修改都需要发版的问题。极大的提升了产品迭代速度。带来极大的收益。
Flutter
其实早在17年的时候，我们就已经有关注Flutter了，那时候还是叫Sky。我们在团队内分享后觉得还是处于非常早期的阶段，后面也没有再持续关注了，没想到Flutter在18年12月份放出了1.0正式版。Flutter天然的跨平台，支持Android，iOS。Web和桌面也在支持的计划中。可以说几乎跨了所有的平台。而且是基于同一份代码，注意这里跟RN还是有区别的，RN是Learn once, write everywhere.
在学习Flutter的过程中发现写Flutter的Widget跟我们公司定义的那套UI协议是非常相似的。我们定义的UI协议是基于json语法，而Flutter的Widget代码跟json几乎一致。
sample
这里可以把Widget的类型对应到json string的type属性。其他的属性基本保持一致，这里color的属性在json中使用#aarrggbb就行。看到这里心中就涌现一个想法，如果我用Flutter来实现一个DynamicWidget，这个Widget可以通过json来创建的话，这样我只要用Flutter实现一遍就能天然的跨多端。而且Flutter的Widget就是天然的UI协议呀，我只要把Flutter官方的Widget转成json然后实现一遍就行了。这样用户只要会了解了Flutter的Widget基本上就能写出对应的json了。用户不需要再理解一套特殊的UI协议。我们公司的UI协议，为了兼容Android、iOS各端走的是一套特殊的UI协议，需要使用者去学习。
Flutter Dynamic Widget
说干就干，先定义一个WidgetParser接口。
/// extends this class to make a Flutter widget parser.
abstract class WidgetParser{
/// parse the json map into a flutter widget.
Widget parse(Map<String, dynamic> map);
/// check the matched widget type. for example:
/// {"type" : "Text", "data" : "Denny"}
/// if you want to make a flutter Text widget, you should implement this
/// method as "Text" == widgetName, for more details, please see
/// @TextWidgetParser
bool forWidget(String widgetName);
}
parse方法解析json得到Flutter的Widget，forWidget方法表示这个Parser是对应json中对应的type属性。我们来实现一个Container widget的Parser， 如下：
class ContainerWidgetParser extends WidgetParser{
@override
bool forWidget(String widgetName) {
return "Container" == widgetName;
}
@override
Widget parse(Map<String, dynamic> map) {
Alignment alignment = parseAlignment(map['alignment']);
Color color = parseHexColor(map['color']);
BoxConstraints constraints = parseBoxConstraints(map['constraints']);
//TODO: decoration, foregroundDecoration and transform properties to be implemented.
EdgeInsetsGeometry margin = parseEdgeInsetsGeometry(map['margin']);
EdgeInsetsGeometry padding = parseEdgeInsetsGeometry(map['padding']);
Map<String, dynamic> childMap = map['child'];
Widget child;
for(var parser in DynamicWidgetBuilder.parsers){
if (parser.forWidget(childMap['type'])){
child = parser.parse(childMap);
break;
}
}
return Container(
alignment: alignment,
padding: padding,
color: color,
margin: margin,
width: map['width'],
height: map['height'],
constraints: constraints,
child: child,
);
}
}
你需要做的就是解析json的各个属性，然后最后拼装一个Container对象。很简单把。基于以上的想法，我把实现放在github上，大家可以在这里查看源码和各个实现的Widget的demo。同时也发布到dart pub上了。
github：https://github.com/dengyin2000/dynamic_widget
dart pub：https://pub.dartlang.org/packages/dynamic_widget
目前只是实现了几个Flutter Widget，计划是把Flutter官方的widget都实现一遍。大家如果有问题的话，欢迎随时联系我。
demo1.gif
网友评论