鸿蒙开发自适应布局

最新推荐文章于 2024-10-10 10:49:27 发布

周星0927

最新推荐文章于 2024-10-10 10:49:27 发布

阅读量1.1k

点赞数 36

文章标签： harmonyos 华为

本文链接：https://blog.csdn.net/m0_57271017/article/details/142107833

版权

自适应布局的能力有 7 种,主要解决的是：窗口尺寸在【一定范围内】变化时，页面能够正常显示

自适应布局能力	使用场景	实现方式
拉伸能力	容器组件尺寸发生变化时，增加或减小的空间全部分配给容器组件内指定区域。	Flex布局的flexGrow和flexShrink属性
均分能力	容器组件尺寸发生变化时，增加或减小的空间均匀分配给容器组件内所有空白区域。	Row组件、Column组件或Flex组件的justifyContent属性设置为FlexAlign.SpaceEvenly
占比能力	子组件的宽或高按照预设的比例，随容器组件发生变化。	基于通用属性的两种实现方式： - 将子组件的宽高设置为父组件宽高的百分比 - layoutWeight属性
缩放能力	子组件的宽高按照预设的比例，随容器组件发生变化，且变化过程中子组件的宽高比不变。	布局约束的aspectRatio属性
延伸能力	容器组件内的子组件，按照其在列表中的先后顺序，随容器组件尺寸变化显示或隐藏。	基于容器组件的两种实现方式： - 通过List组件实现 - 通过Scroll组件配合Row组件或Column组件实现
隐藏能力	容器组件内的子组件，按照其预设的显示优先级，随容器组件尺寸变化显示或隐藏。相同显示优先级的子组件同时显示或隐藏。	布局约束的displayPriority属性
折行能力	容器组件尺寸发生变化时，如果布局方向尺寸不足以显示完整内容，自动换行。	Flex组件的wrap属性设置为FlexWrap.Wrap

拉伸能力指的是容器尺寸发生变化时：将变化的空间，分配给容器内的【指定区域】。利用的是 2 个属性:

属性名	类型	必填	说明
flexGrow	number	是	设置父容器在主轴方向上的剩余空间分配给此属性所在组件的比例。默认值：0
flexShrink	number	是	设置父容器压缩尺寸分配给此属性所在组件的比例。父容器为Column、Row时，默认值：0 父容器为Flex时，默认值：1

均分能力指的是容器尺寸发生变化时：将变化的空间，【均匀分配】给容器组件内【空白区域】。利用的是一个属性justifyContent，只能用在容器：Flex、Column、Row 上，将他设置为 SpaceEvenly即可

枚举名称	描述
Start	元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。
Center	元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
End	元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。
SpaceBetween	Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。
SpaceAround	Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
SpaceEvenly	Flex主轴方向均匀分配弹性元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

占比能力是指子组件的【宽高】按照【预设的比例】，随父容器组件发生变化。实现的方式有 2 种：

属性名	类型	必填	说明
width	Length	是	要设置的组件宽度。单位：vp
height	Length	是	要设置的组件高度。单位：vp
layoutWeight	number \| string	是	父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，表示自适应占满剩余空间。默认值：0 说明：仅在Row/Column/Flex布局中生效。可选值为大于等于0的数字，或者可以转换为数字的字符串。

缩放能力是指子组件的【宽高】按照预设的比例，随容器组件发生变化，变化过程中子组件的【宽高比不变】。使用的属性是 aspectRatio

属性名	类型	必填	说明
aspectRatio	number	是	指定当前组件的宽高比，aspectRatio = width/height。 API version 9及以前，默认值为：1.0。 API version 10：无默认值。说明：该属性在不设置值或者设置非法值时不生效。例如，Row只设置宽度且没有子组件，aspectRatio不设置值或者设置成负数时，此时Row高度为0。

延伸能力是指容器组件内的子组件，按照其在列表中的先后顺序，随容器组件尺寸变化【显示或隐藏】，隐藏时可以通过滑动切换显示。实现的方式是通过 List 组件或 Scroll 组件

隐藏能力指的是：按其【显示优先级】，随容器组件尺寸变化显示或隐藏。通过displayPriority属性来实现

属性名	类型	必填	说明
displayPriority	number	是	设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏。小数点后的数字不作优先级区分，即区间为[x, x + 1)内的数字视为相同优先级。例如：1.0与1.9为同一优先级。说明：仅在Row/Column/Flex(单行)容器组件中生效。

折行能力是指容器组件尺寸发生变化，当布局方向尺寸不足以显示完整内容时自动换行。折行能力通过使用 Flex折行布局 （将wrap属性设置为FlexWrap.Wrap）实现。