在开发一个app时，我们首先要了解的就是，这个app的整体页面布局，先搭架子，之后根据这个架子来进行一系列的内部操作（业务流程）。
今天抽时间来系统的整理一下，自己所掌握的鸿蒙布局。
- 页面结构
在鸿蒙系统中，组件按照布局的要求依次排列，构成应用的页面。在声明式UI中，所有的页面都是由自定义组件构成的，可以根据自己的需求，选择合适的组件来进行页面开发
在进行页面开发时，首先要分析这个页面的布局结构。一个常见的布局结构如下
在这个结构中，Page表示页面的根节点，Column/Row等元素为系统组件。通过不同的系统来组建整个界面。
- 组件的边距设置，下边用一张图来说明
- 组件区域（蓝区方块）：组件区域表示组件的大小，width、height属性用于设置组件区域的大小。
- 组件内容区（黄色方块）：组件内容区大小为组件区域大小减去组件的border值，组件内容区大小会作为组件内容（或者子组件）进行大小测算时的布局测算限制。
- 组件内容（绿色方块）：组件内容本身占用的大小，比如文本内容占用的大小。组件内容和组件内容区不一定匹配，比如设置了固定的width和height，此时组件内容的大小就是设置的width和height减去padding和border值，但文本内容则是通过文本布局引擎测算后得到的大小，可能出现文本真实大小小于设置的组件内容区大小。当组件内容和组件内容区大小不一致时，align属性生效，定义组件内容在组件内容区的对齐方式，如居中对齐。
- 组件布局边界（虚线部分）：组件通过margin属性设置外边距时，组件布局边界就是组件区域加上margin的大小。
- 布局选择
在声明式UI中提供了下边9种常见的布局，可以根据自己的需要，来选择合适的布局进行页面开发
- 线性布局（Row、Column）： 如果布局内子元素超过1个时，且能够以某种方式线性排列时优先考虑此布局。
- 层叠布局（Stack）： 组件需要有堆叠效果时优先考虑此布局。层叠布局的堆叠效果不会占用或影响其他同容器内子组件的布局空间。例如Panel作为子组件弹出时将其他组件覆盖更为合理，则优先考虑在外层使用堆叠布局。
- 弹性布局（Flex）： 弹性布局是与线性布局类似的布局方式。区别在于弹性布局默认能够使子组件压缩或拉伸。在子组件需要计算拉伸或压缩比例时优先使用此布局，可使得多个容器内子组件能有更好的视觉上的填充效果。
- 相对布局（RelativeContainer）： 相对布局是在二维空间中的布局方式，不需要遵循线性布局的规则，布局方式更为自由。通过在子组件上设置锚点规则（AlignRules）使子组件能够将自己在横轴、纵轴中的位置与容器或容器内其他子组件的位置对齐。设置的锚点规则可以天然支持子元素压缩、拉伸、堆叠或形成多行效果。在页面元素分布复杂或通过线性布局会使容器嵌套层数过深时推荐使用。
- 栅格布局（GridRow、GridCol）： 栅格是多设备场景下通用的辅助定位工具，可将空间分割为有规律的栅格。栅格不同于网格布局固定的空间划分，可以实现不同设备下不同的布局，空间划分更随心所欲，从而显著降低适配不同屏幕尺寸的设计及开发成本，使得整体设计和开发流程更有秩序和节奏感，同时也保证多设备上应用显示的协调性和一致性，提升用户体验。推荐内容相同但布局不同时使用。
- 媒体查询（@ohos.mediaquery）： 媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。例如根据设备和应用的不同属性信息设计不同的布局，以及屏幕发生动态改变时更新应用的页面布局。
- 列表（List）： 使用列表可以高效地显示结构化、可滚动的信息。在ArkUI中，列表具有垂直和水平布局能力和自适应交叉轴方向上排列个数的布局能力，超出屏幕时可以滚动。列表适合用于呈现同类数据类型或数据类型集，例如图片和文本。
- 网格（Grid）： 网格布局具有较强的页面均分能力、子元素占比控制能力。网格布局可以控制元素所占的网格数量、设置子元素横跨几行或者几列，当网格容器尺寸发生变化时，所有子元素以及间距等比例调整。推荐在需要按照固定比例或者均匀分配空间的布局场景下使用，例如计算器、相册、日历等。
- 轮播（Swiper）： 轮播组件通常用于实现广告轮播、图片预览等。
- 布局位置（position & offset）
- 绝对定位：对于不同尺寸的设备，使用绝对定位的适应性会比较差，在屏幕的适配上有缺陷。使用position实现绝对定位，设置元素左上角相对于父容器左上角偏移位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。
- 相对定位：相对定位不脱离文档流，即原位置依然保留，不影响元素本身的特性，仅相对于原位置进行偏移。使用offset可以实现相对定位，设置元素相对于自身的偏移量。设置该属性，不影响父容器布局，仅在绘制时进行位置调整。
- 对子元素的约束
- 拉伸：容器组件尺寸发生变化时，增加或减小的空间全部分配给容器组件内指定区域。
常用属性flexGrow和flexShrink)属性：
1. flexGrow基于父容器的剩余空间分配来控制组件拉伸。
2. flexShrink设置父容器的压缩尺寸来控制组件压缩。 - 缩放：子组件的宽高按照预设的比例，随容器组件发生变化，且变化过程中子组件的宽高比不变。常用属性aspectRatio属性指定当前组件的宽高比来控制缩放，公式为：aspectRatio=width/height。
- 占比：指子组件的宽高按照预设的比例，随父容器组件发生变化。
基于通用属性的两种实现方式：
1. 将子组件的宽高设置为父组件宽高的百分比。
2. layoutWeight属性，使得子元素自适应占满剩余空间。 - 隐藏：指容器组件内的子组件，按照其预设的显示优先级，随容器组件尺寸变化显示或隐藏，其中相同显示优先级的子组件同时显示或隐藏。通过displayPriority属性来控制组件的显示和隐藏。
- 常用的系统组件
① 按钮（Button）
② 单选框（Radio）
③ 切换按钮 (Toggle)
④ 进度条 (Progress)
⑤ 文本显示 (Text/Span)
⑥ 文本输入 (TextInput/TextArea)
⑦ 显示图片 (Image)
⑧ 自定义弹窗 (CustomDialog)
⑨ 视频播放 (Video)
⑩ 自定义绘制 (XComponent) XComponent组件作为一种绘制组件，通常用于满足开发者较为复杂的自定义绘制需求，例如相机预览流的显示和游戏画面的绘制。
⑪ Native XComponent： Native XComponent是XComponent组件提供在Native层的实例，可作为JS层和Native层XComponent绑定的桥梁。XComponent所提供的的NDK接口都依赖于该实例。接口能力包括获取Native Window实例、获取XComponent的布局/事件信息、注册XComponent的生命周期回调、注册XComponent的触摸、鼠标、按键等事件回调。针对Native XComponent，主要的开发场景如下：
- 利用Native XComponent提供的接口注册XComponent的生命周期和事件回调。
- 在这些回调中进行初始化环境、获取当前状态、响应各类事件的开发。
- 利用Native Window和EGL接口开发自定义绘制内容以及申请和提交Buffer到图形队列。
⑫ 气泡提示 (Popup)
⑬ 菜单（Menu） Menu是菜单接口，一般用于鼠标右键弹窗、点击弹窗等
目前的系统组件大概就是这些，配置自定义的组件，基本上就能覆盖咱们的日常开发需求。
通过分析页面的结构，挑选合适的组件来组合拼接我们所需要的页面，从而高效快速完成我们的需求。
