开启鸿蒙开发之旅：核心组件及其各项属性介绍——布局容器组件

写在前面

---

组件的结构

rkTS通过装饰器 @Component 和 @Entry 装饰 struct 关键字声明的数据结构，构成一个自定义组件。 自定义组件中提供了一个 build 函数，开发者需在该函数内以链式调用的方式进行基本的 UI 描述

今天我们要学习的就是写在build 函数里的系统组件。

常用的系统组件

---

布局容器组件——Column列组件

Column组件用于垂直排列子组件，它常用属性有：

1. alignItems：定义子组件在交叉轴（即Column的垂直方向）上的对齐方式。可选值有：

   • stretch（默认值）：拉伸子组件以填充交叉轴。
   • start：子组件在交叉轴的起始位置对齐。
   • center：子组件在交叉轴上居中对齐。
   • end：子组件在交叉轴的结束位置对齐。

2. justifyContent：定义子组件在主轴（即Column的水平方向）上的对齐方式。可选值有：

   • start：子组件在主轴的起始位置对齐。
   • center：子组件在主轴上居中对齐。
   • end：子组件在主轴的结束位置对齐。
   • space-between：子组件在主轴上均匀分布，第一个子组件在起始位置，最后一个子组件在结束位置。
   • space-around：子组件在主轴上均匀分布，每个子组件周围分配相同的空间。
   • space-evenly：子组件在主轴上均匀分布，包括起始和结束位置。

3. spacing：设置子组件之间的间隔。

4. wrap：定义子组件是否可以在必要时换行。默认值为nowrap，即不换行。如果设置为wrap，则子组件可以在必要时换行。

5. height：设置Column组件的高度。

6. width：设置Column组件的宽度。

7. margin：设置Column组件的外边距。

8. padding：设置Column组件的内边距。

9. backgroundImage：设置Column组件的背景图片。

10. backgroundColor：设置Column组件的背景颜色。

11. borderRadius：设置Column组件的边框圆角。

12. borderWidth：设置Column组件的边框宽度。

13. borderColor：设置Column组件的边框颜色。

使用示例：

build() {Column({ // 创建Column组件实例，并设置属性space: 20 // 设置子组件之间的间隔}) {// 可以添加更多的子组件}.width('100%').height(500).justifyContent(FlexAlign.SpaceBetween)
}

布局容器组件——Row行组件

Row组件是一个用于水平排列子组件的布局容器。Row组件的属性和Column组件的属性几乎相同，只是列子组件的方向不同，使用示例：

build() {Row({ // 创建Row组件实例，并设置属性space: 10, // 设置子组件之间的间隔alignItems: Alignment.Center, // 设置子组件在交叉轴上居中对齐justifyContent: FlexAlign.SpaceBetween // 设置子组件在主轴上均匀分布}) {Text('左边的子组件').fontSize(16).width('50%').textAlign(TextAlign.Start);Text('右边的子组件').fontSize(16).width('50%').textAlign(TextAlign.End);}
}