harmony-align

鸿蒙 next 中 align 相关用法

justifyContent(value: FlexAlign)

属性名 描述
Start 元素在主轴方向首端对齐,第一个元素与行首对齐,同时后续的元素与前一个对齐。
Center 元素在主轴方向中心对齐,第一个元素与行首的距离与最后一个元素与行尾距离相同。
End 元素在主轴方向尾部对齐,最后一个元素与行尾对齐,其他元素与后一个对齐。
SpaceBetween Flex 主轴方向均匀分配弹性元素,相邻元素之间距离相同。第一个元素与行首对齐,最后一个元素与行尾对齐。
SpaceAround Flex 主轴方向均匀分配弹性元素,相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
SpaceEvenly Flex 主轴方向均匀分配弹性元素,相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
容器 描述 默认值
Flex 所有子组件在 Flex 容器主轴上的对齐格式。 FlexAlign.Start
Column (所有)子组件(整体)在垂直方向上的对齐格式。 FlexAlign.Start
Row (所有)子组件(整体)在水平方向上的对齐格式。 FlexAlign.Start

alignItems

容器 描述 默认值
Flex (ItemAlign) 所有子组件在 Flex 容器交叉轴上的对齐格式。 ItemAlign.Start
Column (HorizontalAlign) 子组件在水平方向上的对齐格式。 HorizontalAlign.Center
Row (VerticalAlign) 子组件在垂直方向上的对齐格式。 VerticalAlign.Center

alignContent

容器 描述 默认值
Flex({ alignContent: FlexAlign}) 交叉轴中有额外的空间时,多行内容的对齐方式。仅在 wrap 为 Wrap 或 WrapReverse 下生效。 FlexAlign.Start
Stack({ alignContent: Alignment }) 设置子组件在容器内的对齐方式。 Alignment.Center

align(value: Alignment)

设置容器元素绘制区域内的子元素的对齐方式。

只在 Stack、Button、Marquee、StepperItem、text、TextArea、TextInput、FolderStack 中生效,其中和文本相关的组件 Marquee、text、TextArea、TextInput 的 align 结果参考 textAlign

不支持 textAlign 属性的组件则无法设置水平方向的文字对齐。
默认值:Alignment.Center

说明:
Stack 中该属性与 alignContent 效果一致,只能设置子组件在容器内的对齐方式。

alignSelf(value: ItemAlign)

子组件在父容器交叉轴的对齐格式。

会覆盖 Flex、Column、Row、GridRow 布局容器中的 alignItems 设置。

GridCol 可以绑定 alignsSelf 属性来改变它自身在交叉轴方向上的布局。

默认值:ItemAlign.Auto

textAlign(value: TextAlign)

设置文本段落在水平方向的对齐方式。


harmony-align
https://blog.201912.xyz/2024/09/07/harmony-align/
作者
jin123d
发布于
2024年9月7日
许可协议