最详细版本|UI2Code智能生成Flutter代码——机器生成代码

背景

  在《UI2CODE--整体设计》篇中，我们提到UI2Code工程的整体流程。前步图片分析之后，我们可以得到对应的DSL布局描述。利用DSL的资讯，结合IntelliJ Plugin介面工具，面向使用者提供生成对应Flutter代码。

  本篇主要介绍我们如何处理DSL的资讯，想法上即是Flutter的翻译机。总体概念如下：

DSL是什么？

  DSL做为一种描述语言，抽象表示为了解决某一类任务而专门设计的计算机语言。在此我们的DSL代表图像识别和布局识别侧的输出，为一JSON格式。

  这些资讯主要描述了这个图层（Layer）的范围（Frame）、是什么样子的类型（Type）、是什么样子的样式（Styles）、含有哪些数据（Value）等等。图层集(Layers)栏位则代表了这张视觉稿的所有图层。

核心思路

  本节的目标是将DSL翻译成目标的Flutter代码。我们首先需要理解的是分散的图层间的关系，可能会有交叠、可能是并列排版。知道了关系之后，需想办法转化成Flutter widget的视图，根据此视图来生产对应代码。

  架构上我们把DSL tree和Flutter tree的建立，分拆为两个独立的分界。这样比较容易定义问题，并且保持弹性。如果今天的目标语言换成Weex或是iOS UI，我们就只需要更动代码翻译的模组。

第一把刀：DSL tree建立

  上图的左侧代表了来源DSL的layers资料，代表者一个一个的图层。右侧是目标的DSL Tree，这棵树的结构上明确叙述了图层之间的包裹、交叠等关系。并且包含了某些特殊关系的节点聚合。

  作法上利用每个Layer的Frame，以及所属的类别(文字、图像、容器)，利用下面的规则组合树的关系：

1.图层之间的包裹关系，例如某些图层为容器，代表下面是可以挂其他节点的（这边带有背景属性的容器，我们定义称之为Shape）

2.区块式组件（Block, 如ListView/GridView）。可以将图层组成View item的关系

3.闲鱼定义的组件资讯（如CI以及BI），这部份非闲鱼工程可以忽略