文章目录
一、概述
布局是指对页面组件进行排列和定位的过程,其目的是有效地组织和展示页面内容,会涉及到组件的大小、位置以及它们之间的相互关系等等。
二、盒子模型
在鸿蒙应用中,页面上的每个组件都可以看做是一个矩形的盒子,这个盒子包含了内容区域(content)、边框(border)、内边距(padding)和外边距(margin),各部分内容如下图所示
三、线性布局(Column/Row)
线性布局(LinearLayout)是开发中最常用的布局,可通过容器组件Column和Row构建,其子组件会在垂直或者水平方向上进行线性排列,具体效果如下图所示
1、space属性
Column和Row容器的参数类型为{space?: string | number},开发者可通过space属性调整子元素在主轴方向上的间距,效果如下
2、justifyContent属性
子元素沿主轴方向的排列方式可以通过justifyContent()方法进行设置,其参数类型为枚举类型FlexAlign,可选的枚举值有
3、alignItems属性
子元素沿交叉轴方向的对齐方式可以通过alignItems()方法进行设置,其参数类型,对于Column容器来讲是HorizontalAlign,对于Row容器来讲是VerticalAlign,两者都是枚举类型,可选择枚举值也都相同,具体内容如下
四、实用技巧
1、Blank组件的使用
Blank可作为Column和Row容器的子组件,该组件不显示任何内容,并且会始终充满容器主轴方向上的剩余空间,效果如下:
2、layoutWeight属性的使用
layoutWeight属性可用于Column和Row容器的子组件,其作用是配置子组件在主轴方向上的尺寸权重。配置该属性后,子组件沿主轴方向的尺寸设置(width或height)将失效,具体尺寸根据权重进行计算,计算规则如下图所示: