界面与布局

本节将讲解如何编写界面布局、内容排版；主要以弹性布局 flex 为核心知识点。

弹性布局

在父布局指定并应用；支持下方属性。

• 布局方向

  • 设置布局中子元素及组件的排列方向；可以横着排、竖着排。

• 换行模式

  • 设置布局中子元素及组件的换行模式；可以不换行、自动换行、反着换行。

• 主轴对齐

  • 设置布局中的子元素及组件在指定的布局方向上的对齐方式；例如：指定布局方向为水平、那么则指定子元素在水平方向的对齐方式。

• 侧轴对齐

  • 设置布局中的子元素及组件在指定的布局方向垂直轴的对齐方式；例如：指定布局方向为水平、那么则指定子元素在垂直方向的对齐方式。

• 多轴对齐

  • 设置布局中的元素或内容当存在多行或多列的时候的对齐方式。

子元素

父布局为弹性布局时、子元素支持单独设置自己的布局属性。

• 自身对齐

  • 设置当父布局为弹性布局时、指定渲染的元素自身相对于父布局的对齐方式。

• 弹性权重

  • 设置当元素父布局为弹性布局显示时、该属性指定剩余空间所占的权重值；值越大、占比越大。

• 弹性压缩

  • 设置当元素父布局为弹性布局显示时、且父布局空间不足时；该属性指定是否压缩本元素；0不压缩、1压缩；默认为1 。

• 弹性占比

  • 设置当元素父布局为弹性布局显示时、该属性定义了在分配多余空间之前，项目占据的主轴空间大小；可设置固定尺寸值；即默认占多少空间。