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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

闲鱼技术 2019-04-02 15:13:39 浏览11364
展开阅读全文

作者: 闲鱼技术-上叶,余晏

背景

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

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

11.png

输入的DSL是什么?

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

222.png

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

网友评论

登录后评论
0/500
评论
闲鱼技术
+ 关注