
OpenHarmony应用开发-尺寸与位置设置/布局约束/Flex布局
版本:v3.2 Release
尺寸设置
用于设置组件的宽高、边距。
说明:
从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
属性
名称 | 参数说明 | 描述 |
width | Length | 设置组件自身的宽度,缺省时使用元素自身内容需要的宽度。若子组件的宽大于父组件的宽,则会画出父组件的范围。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
height | Length | 设置组件自身的高度,缺省时使用元素自身内容需要的高度。若子组件的高大于父组件的高,则会画出父组件的范围。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
size | { width?: Length, height?: Length} | 设置高宽尺寸。 |
padding | 设置内边距属性。 参数为Length类型时,四个方向内边距同时生效。 默认值:0 padding设置百分比时,上下左右内边距均以父容器的width作为基础值。 从API version 9开始,该接口支持在ArkTS卡片中使用。 | |
margin | 设置外边距属性。 参数为Length类型时,四个方向外边距同时生效。 默认值:0 margin设置百分比时,上下左右外边距均以父容器的width作为基础值。 从API version 9开始,该接口支持在ArkTS卡片中使用。 | |
constraintSize | { minWidth?: Length, maxWidth?: Length, minHeight?: Length, maxHeight?: Length} | 设置约束尺寸,组件布局时,进行尺寸范围限制。constraintSize的优先级高于Width和Height。若设置的minWidth大于maxWidth,则minWidth生效,minHeight与maxHeight同理。 默认值: { minWidth: 0, maxWidth: Infinity, minHeight: 0, maxHeight: Infinity } |
layoutWeight | number | string | 父容器尺寸确定时,设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配,忽略元素本身尺寸设置,表示自适应占满剩余空间。 默认值:0 从API version 9开始,该接口支持在ArkTS卡片中使用。 说明: 仅在Row/Column/Flex布局中生效。 可选值为大于等于0的数字,或者可以转换为数字的字符串。 |
示例
位置设置
设置组件的对齐方式、布局方向和显示位置。
说明:
从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
属性
名称 | 参数类型 | 描述 |
align | 设置元素内容在元素绘制区域内的对齐方式。 默认值:Alignment.Center 从API version 9开始,该接口支持在ArkTS卡片中使用。 | |
direction | 设置元素水平方向的布局。 默认值:Direction.Auto 从API version 9开始,该接口支持在ArkTS卡片中使用。 | |
position | 绝对定位,设置元素左上角相对于父容器左上角偏移位置。在布局容器中,设置该属性不影响父容器布局,仅在绘制时进行位置调整。 适用于置顶显示、悬浮按钮等组件在父容器中位置固定的场景。 | |
markAnchor | 设置元素在位置定位时的锚点,以元素左上角作为基准点进行偏移。通常配合position和offset属性使用,单独使用时,效果类似offset 默认值: { x: 0, y: 0 } 从API version 9开始,该接口支持在ArkTS卡片中使用。 | |
offset | 相对定位,设置元素相对于自身的偏移量。设置该属性,不影响父容器布局,仅在绘制时进行位置调整。 默认值: { x: 0, y: 0 } | |
alignRules9+ | { left?: { anchor: string, align: HorizontalAlign }; right?: { anchor: string, align: HorizontalAlign }; middle?: { anchor: string, align: HorizontalAlign }; top?: { anchor: string, align: VerticalAlign }; bottom?: { anchor: string, align: VerticalAlign }; center?: { anchor: string, align: VerticalAlign } } | 指定相对容器的对齐规则。 - left:设置左对齐参数。 - right:设置右对齐参数。 - middle:设置中间对齐的参数。 - top:设置顶部对齐的参数。 - bottom:设置底部对齐的参数。 - center:设置中心对齐的参数。 该接口支持在ArkTS卡片中使用。 说明: - anchor:设置作为锚点的组件的id值。 - align:设置相对于锚点组件的对齐方式。 |
示例
示例1
示例2
布局约束
通过组件的宽高比和显示优先级约束组件显示效果。
说明:
从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
属性
名称 | 参数说明 | 描述 |
aspectRatio | number | 指定当前组件的宽高比,aspectRatio = width/height。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
displayPriority | number | 设置当前组件在布局容器中显示的优先级,当父容器空间不足时,低优先级的组件会被隐藏。 小数点后的数字不作优先级区分,即区间为[x, x + 1)内的数字视为相同优先级。例如:1.0与1.9为同一优先级。 从API version 9开始,该接口支持在ArkTS卡片中使用。 说明: 仅在Row/Column/Flex(单行)容器组件中生效。 |
示例
图1 竖屏显示
图2 横屏显示
Flex布局
说明:
- 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
- 仅当父组件是 Flex、Column、Row 时生效。
属性
名称 | 参数说明 | 描述 |
flexBasis | number | string | 设置组件在父容器主轴方向上的基准尺寸。 默认值:‘auto’(表示组件在主轴方向上的基准尺寸为组件原本的大小)。 不支持百分比设置。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
flexGrow | number | 设置父容器的剩余空间分配给此属性所在组件的比例。 默认值:0 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
flexShrink | number | 设置父容器压缩尺寸分配给此属性所在组件的比例。 父容器为Row、Column时,默认值:0 父容器为flex时,默认值:1 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
alignSelf | 子组件在父容器交叉轴的对齐格式,会覆盖Flex布局容器中的alignItems设置。 默认值:ItemAlign.Auto 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
示例
