小程序UI设计-布局分解-左-上下结构

Posted 2020-08-23 MR_CHW

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

 
左边结构树中WViewRow下面有两个WViewColumn。WViewRow是横向排列，WViewColumn是纵向排列。第一个WViewColumn中放一个图片，第二个放两张图片。如下图展开的结构树。
 
下面针对第二个WViewColumn中有两个图片的FlexBox进行分解讲解。
 
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属性暂不多解释，在下个帖子中详细解释一下。此例子中不影响布局。