组件内容（绿色方块）：组件内容本身占用的大小，比如文本内容占用的大小。组件内容和组件内容区不一定匹配，比如设置了固定的width和height，此时组件内容的大小就是设置的width和height减去padding和border值，但文本内容则是通过文本布局引擎测算后得到的大小，可能出现文本真实大小小于设置的组件内容区大小。当组件内容和组件内容区大小不一致时，align属性生效，定义组件内容在组件内容区的对齐方式，如居中对齐。

组件布局边界（虚线部分）：组件通过margin属性设置外边距时，组件布局边界就是组件区域加上margin的大小。

做过UI开发的同学应该对这几个属性margin border padding应该非常好理解，考虑到开发的通用性，以及便于技术栈转型，这里UI布局相关的属性都是CSS布局中保持一致的，对于没有前端开发经验的同学，把组件占用的区域，使用盒子模型能更好理解。

3.布局分类

声明式UI提供了以下8种常见布局

4.布局位置

布局容器相对于自身或其他组件的位置，通过position、offset等属性控制

定位能力	使用场景	实现方式
绝对定位	对于不同尺寸的设备，使用绝对定位的适应性会比较差，在屏幕的适配上有缺陷。	使用position实现绝对定位，设置元素左上角相对于父容器左上角偏移位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。
相对定位	相对定位不脱离文档流，即原位置依然保留，不影响元素本身的特性，仅相对于原位置进行偏移。	使用offset可以实现相对定位，设置元素相对于自身的偏移量。设置该属性，不影响父容器布局，仅在绘制时进行位置调整。

绝对定位案例：

注：根据组件定义的顺序，使用position定位的组件会覆盖在其前面定义的组件，但是对其后定义的组件没有影响。

相对定位案例：

5.布局子元素的约束

对子元素的约束能力	使用场景	实现方式
拉伸	容器组件尺寸发生变化时，增加或减小的空间全部分配给容器组件内指定区域。	flexGrow和flexShrink属性： flexGrow基于父容器的剩余空间分配来控制组件拉伸。 flexShrink设置父容器的压缩尺寸来控制组件压缩。
缩放	子组件的宽高按照预设的比例，随容器组件发生变化，且变化过程中子组件的宽高比不变。	aspectRatio属性指定当前组件的宽高比来控制缩放，公式为：aspectRatio=width/height。
占比	占比能力是指子组件的宽高按照预设的比例，随父容器组件发生变化。	基于通用属性的两种实现方式： 1. 将子组件的宽高设置为父组件宽高的百分比。 2. layoutWeight属性，使得子元素自适应占满剩余空间。
隐藏	隐藏能力是指容器组件内的子组件，按照其预设的显示优先级，随容器组件尺寸变化显示或隐藏，其中相同显示优先级的子组件同时显示或隐藏。	通过displayPriority属性来控制页面的显示和隐藏。

总结

本文学习了鸿蒙开发UI布局相关的知识，鸿蒙开发的UI布局技术栈基本与目前前端开发主流技术栈是一致的，这样可以易化前端开发的技术转型。本文简单了解了鸿蒙开发中使用频率最高的布局分类，后面会详细学习每种布局容器的使用。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/225229

鸿蒙开发-UI-布局_鸿蒙 自定义布局

文章目录

前言

一、布局概述

1.布局结构

2.布局元素组成

3.布局分类

4.布局位置

5.布局子元素的约束

总结

鸿蒙开发-UI-布局_鸿蒙自定义布局