鸿蒙(HarmonyOS)应用开发——容器组件（Row组件和Column组件）
前面一篇文章中，已经说了基础组件。那么接下来就是容器组件fill:#333;color:#333;color:#333;fill:none;根据功能分类基础组件容器组件媒体组件绘制组件画布组件ColumnRowListTabsGridSwiper。
·
前言
前面一篇文章中，已经说了基础组件。那么接下来就是容器组件
布局容器基础知识
容器组件是一种比较特殊的组件，它可以包含其他的组件，而且按照一定的规律布局，帮助生成精美的页面。
在静态布局中，总体来说，组件是从上到下的布局模式。我们就可以将页面布局看作一个二维平面，分别叫做主轴和交叉轴，两个轴始终是相互垂直的。
Column & Row
看到这个的时候，如何你使用过flex 布局,那么就完全可以理解了。如果没有使用过，你可以把它想象成一行或一列的表格。
语法
Column(value?: {space?: string|number}
Row(value?: {space?: string|number}
可选参数
space: 子组件在主轴方向上的间距
属性
Column和Row 在主轴和交叉轴可以使用 justifyContent 和alignItems
| 属性名称 | 描述 |
|---|---|
| justifyContent | 设置子组件在主轴方向上的对齐格式。 |
| alignItems | 设置子组件在交叉轴方向上的对齐格式。 |
主轴的对齐（justifyContent）
子组件在主轴方向上的对齐使用justifyContent属性来设置，其参数类型是FlexAlign
| FlexAlign属性 | 描述 |
|---|---|
| Start | 元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐 |
| Center | 元素在主轴方向中心对齐，第一个元素与行首的距离以及最后一个元素与行尾距离相同。 |
| End | 元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。 |
| SpaceBetween | 元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。 |
| SpaceAround | 元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。 |
| SpaceEvenly | 元素在主轴方向等间距布局，无论是相邻元素还是边界元素到容器的间距都一样。 |
交叉轴的对齐（alignItems）
子组件在交叉轴方向上的对齐方式使用alignItems属性来设置。
- HorizontalAlign
HorizontalAlign 是 Column容器 来设置 交叉轴对齐方式
| HorizontalAlign属性 | 描述 |
|---|---|
| Start | 设置子组件在水平方向上按照起始端对齐 |
| Center | （默认值），设置子组件在水平方向上居中对齐。 |
| End | 设置子组件在水平方向上按照末端对齐。 |
- VerticalAlign
VerticalAlign 是 Row容器 来设置 交叉轴对齐方式
| VerticalAlign属性 | 描述 |
|---|---|
| Start | 设置子组件在垂直方向上居顶部对齐 |
| Center | （默认值），设置子组件在竖直方向上居中对齐。 |
| End | 设置子组件在竖直方向上居底部对齐。 |
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
2
0- 0
已为社区贡献15条内容
所有评论(0)