作者： 闲鱼技术-上叶，余晏

背景

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

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

输入的DSL是什么？

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

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