用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

2016-12-1 09:38:01 comeonliuqd原创达人 layout可视化工具 楼主 11366
本帖最后由 comeonliuqd 于 2016-12-1 09:38 编辑
工具简介:小程序layout设计工具,可视化方式进行小程序UI设计。通过鼠标拖拽组件方式进行UI布局。工具提供符合微信视觉统一的模板,并且按照FlexBox方式可视化布局。自动生成wxml和wxss,复制到微信开发者工具中即可同步显示。视频介绍请移步优酷http://v.youku.com/v_show/id_XMTgyNTQ4NDcyMA==.html

FlexBox布局中的变幻方式很多,我们继续了解一个左-上下结构的布局分解

2016-12-01_09-20-10.png
左边结构树中WViewRow下面有两个WViewColumn。WViewRow是横向排列,WViewColumn是纵向排列。第一个WViewColumn中放一个图片,第二个放两张图片。如下图展开的结构树。
2016-12-01_09-22-22.png
下面针对第二个WViewColumn中有两个图片的FlexBox进行分解讲解。
2016-12-01_09-23-57.png
flex-direction=column说明内部组件主轴x是从上而下。
flex-wrap在本工具中对于column类型的不起作用。此处请注意,由于使用中column这种方式是旋转了坐标系,所以实际设计时也容易小迷糊。建议大家尽量避免使用column。
justify-content=space-between决定了两个图片间隔和在WViewColumn中的位置。这个属性决定第一个元素对齐顶端,最后一个元素对齐底部,中间有间隔。如果有5个图片的话,第一个和第五个会紧靠上下。每个图片的间隔是view的高度减去5个图片高度和再除以4。数学不好的同学可以实际操作一下,在一个WViewColumn中拖入多个图片,然后变幻justify-content属性看看效果。
align-items=flex-start决定了在副轴y的排列方式是从原点出发。由于此view是column旋转了坐标系,此处可能理解有点小迷糊,我在这里语言也不好描述。大家可以实际拖入组件,变幻属性看看实际效果。
align-content属性暂不多解释,在下个帖子中详细解释一下。此例子中不影响布局。

2016-12-01_09-10-41.png

评分

参与人数 1原创 +1 浮云 +20 收起 理由
天下雪 + 1 + 20 赞一个!

查看全部评分

作者真是勤快,开发程序+研究+分享
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
发新帖
您需要登录后才可以回帖 登录 | 立即注册