借Adobe XD之力,自动生成Flutter代码
概述
今天,我们来聊聊一个专门为“懒人程序员”准备的工具——Adobe XD。使用它可以快速将原型设计图转换为可执行的Flutter代码, 而由于Flutter自身跨平台的特性,因此这些自动生成的代码即可以用在Android、iOS这样的移动设备上,也可以用在Web页中。
认识Adobe XD
首先我们来看看Adobe XD是什么,以下内容摘自百度百科:
Adobe XD是一站式UX/UI设计平台,在这款产品上面用户可以进行移动应用和网页设计与原型制作。同时它也是一款结合设计与建立原型功能,并同时提供工业级性能的跨平台设计产品。设计师使用Adobe XD可以高效准确的完成静态编译或者框架图到交互原型的转变。
简而言之,这个软件实际上就是一个原型图设计工具。而又由于其背靠Adobe这座大山,因此它还可以与PhotoShop、Sketch、Illustrator……等工具兼容使用,非常方便。再加上今天我们介绍的重磅功能——自动生成源代码,这或许就是其在Axure、Sketch等软件广泛使用的今天依然能够存活的原因之一。此外,它本身还是免费的,只要登录Adobe Creative Cloud账户即可免费安装并使用它。
Adobe XD软件本身可以运行在MacOS以及Windows平台上,顺便说一句:本篇文章的内容我也以免费视频课的形式发布在B站上,喜欢看视频的小伙伴不妨点击链接跳转到B站。
下面我们来看看Adobe XD的系统配置要求(摘自Adobe XD官方网站):
Adobe XD还支持在移动设备上运行,其配置要求不再详述,感兴趣的朋友可以到其官方网站上了解详情。
安装Adobe XD,配置Flutter开发环境
这两个步骤的详细过程,不是本文讨论的重点,这里不再赘述。我们的目标是这两个要在电脑中正常运作,其判断依据如下:
运行正常的Adobe XD:
在开始菜单中点击Adobe XD,首次运行可能会出现登录界面。按照提示登录,成功后出现如下图所示的界面,即表示其运行正常:
接着,使用XDPacks安装和管理插件。下载地址:https://xd.94xy.com/xdpacks.html。
安装后启动XDPacks,按照提示登录,安装XD to Flutter插件。
配置正确的Flutter开发环境:
启动命令行,输入
flutter doctor
出现如下图类似的结果,即表示配置准确无误。
注意,虽然我们这里有感叹号的警告信息,也有红叉,但仔细看过后可以得知,这些都是无关紧要的。
开始绘制原型
下面我们就可以开始用XD绘制原型图了,笔者这里画一些极其简单且没有实际意义的图形,目的仅作演示之用:
创建Flutter项目,自动生成UI源码
下面我们创建一个新的Flutter工程,命令为:
flutter create xxxx
其中,“xxxx”为项目名,在本例中为xd_to_flutter,因此,完整的命令为:
flutter create xd_to_flutter
稍等片刻,即可出现创建成功的结果。
使用Android Studio或VS Code打开项目中的pubspec.xml,添加adobe_xd插件。
dependencies:
adobe_xd: ^0.1.4
下面,打开刚才使用过的XD软件,配置项目路径,并输出代码。
如上图所示,分别配置项目目录、组件命名前缀以及输出内容。最后,点击最下方的"Export All Widgets",即可生成源码。
使用生成的源码运行App
回到Android Studio或VS Code,可以看到已经生成的dart源码文件,我们在main()方法中使用它。
启动模拟器或连接真机,运行后的效果如下图所示:
可以看到,运行结果与原型设计图保持高度一致。
借Adobe XD之力,自动生成Flutter代码的更多相关文章
- UI2Code智能生成Flutter代码--整体设计篇
摘要: UI2CODE项目是闲鱼技术团队研发的一款通过机器视觉理解+AI人工智能将UI视觉图片转化为端侧代码的工具. 背景: 随着移动互联网时代的到来,人类的科学技术突飞猛进.然而软件工程师们依旧需要 ...
- [Dynamic Language] 用Sphinx自动生成python代码注释文档
用Sphinx自动生成python代码注释文档 pip install -U sphinx 安装好了之后,对Python代码的文档,一般使用sphinx-apidoc来自动生成:查看帮助mac-abe ...
- wsdl自动生成Java代码,根据wsdl生成Java代码
wsdl自动生成Java代码,根据wsdl生成Java代码 >>>>>>>>>>>>>>>>>&g ...
- 使用xorm工具,根据数据库自动生成 go 代码
使用xorm工具,根据数据库自动生成 go 代码 引入 使用 golang 操作数据库的同学都会遇到一个问题 -- 根据数据表结构创建对应的 struct 模型.因为 golang 的使用首字母控制可 ...
- mybatis自动生成java代码
SSM框架没有DB+Record模式,写起来特别费劲,只能用下面的方法勉强凑合. 上图中,*.jar为下载的,src为新建的空白目录,.xml配置如下. <?xml version=" ...
- 使用mybatis-generator工具自动生成mybatis代码
使用mybatis-generator工具自动生成mybatis代码 步骤如下: 1.引入maven 依赖,在项目pom.xml文件中添加 <plugin> <groupId> ...
- vs code自动生成html代码
在dreamveawer中新建一个htm自动会生成一个标准的html代码,那在vscode得一行一行写吗?太烦了吧,各种关键词搜,哎妈 终于找到了办法,现在这里记录下: 第一步:在空文档中输入! 第二 ...
- ionic + asp.net core webapi + keycloak实现前后端用户认证和自动生成客户端代码
概述 本文使用ionic/angular开发网页前台,asp.net core webapi开发restful service,使用keycloak保护前台页面和后台服务,并且利用open api自动 ...
- 【转】Intellij IDEA 14中使用MyBatis-generator 自动生成MyBatis代码
Intellij IDEA 14 作为Java IDE 神器,接触后发现,非常好用,对它爱不释手,打算离开eclipse和myeclipse,投入Intellij IDEA的怀抱. 然而在使用的过程中 ...
随机推荐
- android Viewpager禁用/开启滑动切换功能
要实现viewpager的滑动以及禁止滑动切换功能只需要继承viewpager,在onTouchEvent进行逻辑判断即可(网上搜到的,确实可行,原创地址不明),下面自己实现一个 import and ...
- springmvc 校验---spring校验
springmvc提供了灵活的可拓展的校验方式,根据不同的项目可选择适合的校验方式,首先介绍下springmvc中内置的校验实现方式! 1.实现 org.springframework.validat ...
- 【Django组件】KindEditor富文本编辑器上传文件,html样式文本,VUE异步提交数据(易懂版)
1:下载与配置 适合版本: python3 下载:http://kindeditor.net/down.php 文档:http://kindeditor.net/doc.php 将文件包放入stati ...
- 萌新带你开车上p站(终极番外)
本文由“合天智汇”公众号首发,作者:萌新 0x01前言 这关其实和pwn关系不大,主要考察的都是linux下一些函数的操作,考察linux的基本功.涉及到的知识点包括一些经典的函数原型.IO重定向.文 ...
- nginx配置之状态模块和压力测试功能
状态模块功能 nginx.conf中的http{}中的server{}中: location /status { #开启nginx状态功能 stub_status on; } 直接在网页中请求stat ...
- mysql新
.数据库服务器:运行数据库管理软件的计算机 .数据库管理软件:MySQL,oracle,db2,sqlserver .库:文件夹 .表:文件 .记录:事物的一系列典型特征:name,age,schoo ...
- PIC单片机编译器自带的延时程序
https://wenku.baidu.com/view/3c94e2934028915f814dc205.html
- [Android应用开发] 03.网络编程
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- Java IO(十六)InputStreamReader 和 InputStreamWriter
Java IO(十六)InputStreamReader 和 InputStreamWriter 一.介绍 InputStreamReader 和 OutputStreamWriter 是字节流通向字 ...
- php动态安装扩展
下面以安装phpredis扩展为例 下载扩展源码,解压 [root@localhost ~]# wget phpredis-5.1.1.tar.gz [root@localhost ~]# tar - ...