背景

谷歌公众号今天介绍了 XD to Flutter 2.0, 可以将设计图直接转换成 Flutter 代码, 详细请看 XD to Flutter 2.0 现已发布！

设计图转代码早已经不是新鲜的事情, 国内美团阿里等也对设计图转代码做了一些研究:

今天我就试一下 gskinner 团队的 XD to Flutter

准备工作

下载 XD: www.adobe.com/cn/products… (XD 是收费软件, 可以暂时下载试用)
安装好 XD 后, 打开软件, 在 菜单栏 - 插件 中搜索: Flutter 然后下载安装 XD to Flutter, (注意直接搜索 XD to Flutter 是搜索不了的, 这点开篇的公众号文中已经说明)
准备好 XD 文件, XD 文件大家可以找设计师要一个, 或者通过 xdfile.com/ 下载一个
flutter 项目安装插件:

dependencies:
  adobe_xd: ^1.0.0

空安全使用 2.0.0, 详见: github.com/AdobeXD/xd-…

开始生成

点击菜单 插件 - XD to Flutter, 可以打开插件:

点击左下角的 Exprot All Widgets , 就会自动将所有的设计稿转换成 dart 文件:

这里还有其他的选项, 比如可以指定项目的位置, 生成代码的目录, 以及是否空安全等等.

到了这一步代码已经完全生成了, 我们看怎么使用代码.

使用

项目中看生成之后的文件, 其中 XD 开头都是生成之后:

随便打开一个文件:

发现widget 文件都是通过一个叫 Pinned 来进行布局的, 这个类就是我们在准备工作中添加的 adobe_xd 里的.

图片

关于设计图中要用到的图片, 发现 XD to Flutter 并没有自动导出图片的功能, 默认的 Image 都是空的, 但是有提示你需要添加什么图片资源, 这点很不方面:

//其中一个图片
Pinned.fromPins(
  Pin(size: 216.0, start: 0.0),
  Pin(size: 123.0, end: 24.0),
  child:
      // Adobe XD layer: 'imgbin_vegetarian-c…' (shape)
      Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: const AssetImage(''),
        fit: BoxFit.fill,
      ),
    ),
  ),
),

也有可能是我的使用姿势不对, 不知道有没有同学知道应该怎么自动关联图片, 我们手动补全了几个图片引用.

到了这一步已经完毕了, 运行一下看一下效果

效果

设计图

Android 小米 10 青春版

iOS iPhone 12Pro Max 模拟器

Web Chrome

可以看到整体的样式还原度都挺高的, 在各个端上目前表现还是不错的.

总结

看了一下其代码, 主要是通过 Pinned 和 Pin 来布局进行定位和描述大小, 再通过 Flutter 自带的控件描述其他. 整体的体验不错, 还原度也很高.

不过直接生成的代码还不能使用, 需要手动修改图片, 这点, github 中也提到了, 为了优化导出, 所以不支持直接导出图片:

In order to optimize export, images are not exported with widgets. Only images with a name assigned in the plugin panel can be exported. Select an image and click "Export Image", or use the "Export All Images" button to export all images with a name to the Image Path.