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/