小程序UI设计(6)-布局分解-九宫格
今天我们来个庖丁解牛。对于一个完整的组合组件,看看通过工具是如何轻松完成的。
首先看看九宫格完整的样子。
结构树是这样的。在结构树中,我们可以看到WViewColumn下面有九个WViewRow。WViewColumn之上的我们可以不用管,这些是画布上的内容,为了辅助设计用的。9个WViewRow是九宫格中的实际元素item。
每个item中图片和文字上下排列,九个item换行排列。那么这些是怎么做到的呢,当然是FlexBox的作用。下面详细介绍FlexBox属性对布局的影响。
首先来介绍item的FlexBox属性。
其中display肯定是flex。flex-direction=row表示主轴X是横向,也就是我们习惯的xy坐标系的原点在view的左上角,x轴向右,y轴向下。如果flex-direction=column则是x轴向下,y轴向右。我们实际应用中只要使用row这种方式应该都能完成大部分布局要求。
flex-wrap=wrap表示换行。这个属性决定了内部组件图片和文字排列为两行。
justify-content=space-around。这个属性表示在每行中元素的间隔方式。由于此例中第一行是图片,第二行是文字,所以此属性不起作用。后面课程中会介绍。
align-items=center决定了在y轴上的排列,是垂直居中。结合justify-content=center的话,内部元素会水平、垂直居中。
align-content=space-around表示图片和文字之间的行间距方式。顶端和底部都有留白,图片和文字之间有留白。顶部和底部的留白是图片和文字之间留白的一半大小。
以上属性的设置,决定了内部元素在主轴x和副轴y的排列和间隔。我们在开始使用工具时,可以多改变一下每个属性的值,看看布局效果。然后将自动生成的wxml和wxss粘贴到微信开发者工具中预览。
然后我们看看最外一侧view的flexbox属性设置
display、flex-direction、flex-wrap这三个属性告诉浏览器我要用flex布局,并且横向排列和换行。
justify-content、align-items和align-content都是flex-start,决定了内部组件在x轴是从原点向右紧挨着排列,在y轴上从原点向下紧挨着排列。这样就决定了9个item是从左上角向x和轴排列。当然我们也可以将这三个属性设置为center,表示从view的中心向四面排列,也可以做出9宫格。
flexbox属性的组合很多,实际开发时结合此工具的使用可以做到事半功倍的效果。通过工具中属性的更改,便可所见即所得。
工欲善其事必先利其器,熟练掌握一个工具的使用,势必提高我们的开发效率。大家刚开始使用此工具时,更多的变幻一下flexbox的属性,看看布局效果。当完全掌握后,会起到意想不到的效果。
小程序UI设计(6)-布局分解-九宫格的更多相关文章
- 小程序UI设计(1)-布局
工欲善其事必先利其器.下面为大家介绍一款工具软件,如何做到轻松布局. 工具简介:小程序layout设计工具,可视化方式进行小程序UI设计.通过鼠标拖拽组件方式进行UI布局.工具提供符合微信视觉统一的模 ...
- 小程序UI设计(4)-符合视觉规范-表单输入视觉规范
下图是微信官方的要求 按照小程序UI设计(3)-符合视觉规范-列表视觉规范同样的方式,我们可以设计一样符合规范的输入项目.规范中没有说明padding-left的大小,我们暂定是15px.这样最外层v ...
- 小程序UI设计(3)-符合视觉规范-列表视觉规范
上一篇我们介绍了字体规范,此贴介绍一下在列表中如何组合使用.下图是微信官方的要求 在工具中通过拖拽组件可以制作出一样的效果拖拽一个WViewRow.这个组件是小程序的view,flex-direc ...
- 小程序UI设计(7)-布局分解-左-上下结构
FlexBox布局中的变幻方式很多,我们继续了解一个左-上下结构的布局分解 左边结构树中WViewRow下面有两个WViewColumn.WViewRow是横向排列,WViewColumn是纵向排列 ...
- 小程序UI设计(9)-文字排版
小程序中一般很少大段落的文字,基本是4.5个字的主题.一行标题.一行摘要.两行描述.显示时超出部分用省略号代替.下面结合工具使用介绍一下文字排版的方法.先看效果图. 工具中属性设置如下图:两行文字属 ...
- 小程序UI设计(10)-巧用模板,事半功倍
工具中为小程序员们准备了符合微信开发规范的模板.之前帖子中介绍的规范都在模板中已经设计好了,可以直接复制粘贴使用.下图中的样式是从模板直接复制过来的.实际使用时只要更换为自己的图片和文字即可.自动生成 ...
- 小程序UI设计(2)-符合视觉规范-字体规范
下图是微信小程序官方要求字体规范 根据此要求小程序设计工具定制了符合规范的组件.如下图 工具使用时,将左侧组件拖拽到设计区域即可.字体大小和颜色都是按照规范设置的.在使用时根据微信要求在不同位置摆放即 ...
- 小程序UI设计之-介绍篇
工具截图 此工具通过可视化操作进行布局,依据iphone6尺寸设置画布,可以自动生成rpx和百分比的wxss.后续还会增加js代码自动生成.工具中组件按照微信小程序开发规范进行了缺省设置,margin ...
- 小程序UI设计(8)-布局分解-FlexBox的align-content应用
FlexBox的align-content到底是什么鬼,我也搞了好半天才开发出来,目前工具中WViewRow组件使用了此属性,WViewColumn中此属性不起作用.下图是justify-conten ...
随机推荐
- 内存或磁盘空间不足,word无法显示所请求的字体
从百度哪里获得了解决方法,应该是字体没有添加到C盘的fonts目录下面,记录一下解决办法. 在电脑上打开Windows PowerShell ,以管理员身份运行.(可能有的同志不知道怎么以管理员的方式 ...
- Jmeter测试结果分析(上)
Jmeter测试结果分析这一篇,我打算分成上下两部分.上篇,主要讲述如何使用jmeter中Assertion对结果进行简单的分类:下篇,主要讲述的是当我们拿到测试结果后,我们应该如何去看待这些测试结果 ...
- Hibernate对象的状态分类
对象的状态: 临时状态Transient: 与数据库没有对应,跟Session没有关联 一般是新new出的对象 持久化状态Persistent: 对象在Session的管理之中,最终会有对应的数据库记 ...
- 积累-T
emmm,各种知识点都有吧,主要方便自己记 随机修改网页图标 <script> var image=new Array(3); image.length=3; image[1]=" ...
- spring @valid 注解
用于验证注解是否符合要求,直接加在变量之前,在变量中添加验证信息的要求,当不符合要求时就会在方法中返回message 的错误提示信息. @PostMapping public User create ...
- C++学习笔记-多态
多态作为面向对象的重要概念,在如何一门面向对象编程语言中都有着举足轻重的作用,学习多态,有助于更好地理多态的行为 多态性(Polymorphism)是指一个名字,多种语义:或界面相同,多种实现. 重载 ...
- ASP.NET Core WebApi使用Swagger
先在项目中引用Nuget包 Install-Package Swashbuckle.AspNetCore 安装之后需要在Startup.cs文件加入如下代码 public void Configure ...
- HTML笔记(三) 表格和列表
本篇记录表格 (table) 和有序列表 (ordered list) \ 无序列表 (unordered list) 的部分用法 1.表格table 表格标签 使用 <table> 定义 ...
- WIN32_FIND_DATA
基本信息 编辑 关于文件的全部属性信息.总计有以下以下9种:文件的标题名.文件的属性(只读.存档,隐藏等).文件的创建时间.文件的最后访问时间.文件的最后修改时间.文件大小的高位双字.文件大小的低位双 ...
- Visual Basic 中读取逗号分隔的文本文件
TextFieldParser 对象提供一种可以轻松而高效地分析结构化文本文件(如日志)的方法. TextFieldType 属性用于定义文件是带分隔符的文件还是具有固定宽度文本字段的文件. Dim ...