话不多说上来就干！

工具

DevEco Studio工具是HarmonyOS应用开发的推荐IDE工具。
下载地址

布局结构

布局通常为分层结构，一个常见的页面结构如下所示：

图1 常见页面结构图

布局元素的组成

布局相关的容器组件可形成对应的布局效果。

图2 布局元素组成图

布局位置

position、offset等属性影响了布局容器相对于自身或其他组件的位置。

绝对定位

使用position实现绝对定位，设置元素左上角相对于父容器左上角偏移位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。

相对定位

使用offset可以实现相对定位，设置元素相对于自身的偏移量。设置该属性，不影响父容器布局，仅在绘制时进行位置调整。

对子元素的约束

拉伸

容器组件尺寸发生变化时，增加或减小的空间全部分配给容器组件内指定区域。
flexGrow和flexShrink属性：
flexGrow基于父容器的剩余空间分配来控制组件拉伸。
flexShrink设置父容器的压缩尺寸来控制组件压缩。

缩放

子组件的宽高按照预设的比例，随容器组件发生变化，且变化过程中子组件的宽高比不变。
aspectRatio属性指定当前组件的宽高比来控制缩放，公式为：aspectRatio=width/height。

占比

子组件的宽高按照预设的比例，随祖先容器组件发生变化。
基于通用属性的两种实现方式：
1.子组件的宽高设置为百分比。
2.layoutWeight属性，使得子元素自适应占满剩余空间。

隐藏

隐藏能力是指容器组件内的子组件，按照其预设的显示优先级，随容器组件尺寸变化显示或隐藏，其中相同显示优先级的子组件同时显示或隐藏。
通过displayPriority属性来控制组件的显示和隐藏。