写在前面
组件的结构
rkTS通过装饰器
@Component和@Entry装饰struct关键字声明的数据结构，构成一个自定义组件。 自定义组件中提供了一个build函数，开发者需在该函数内以链式调用的方式进行基本的 UI 描述
今天我们要学习的就是写在build 函数里的系统组件。
常用的系统组件
布局容器组件——Column列组件
Column组件用于垂直排列子组件，它常用属性有：
-
alignItems：定义子组件在交叉轴（即Column的垂直方向）上的对齐方式。可选值有：
stretch（默认值）：拉伸子组件以填充交叉轴。start：子组件在交叉轴的起始位置对齐。center：子组件在交叉轴上居中对齐。end：子组件在交叉轴的结束位置对齐。
-
justifyContent：定义子组件在主轴（即Column的水平方向）上的对齐方式。可选值有：
start：子组件在主轴的起始位置对齐。center：子组件在主轴上居中对齐。end：子组件在主轴的结束位置对齐。space-between：子组件在主轴上均匀分布，第一个子组件在起始位置，最后一个子组件在结束位置。space-around：子组件在主轴上均匀分布，每个子组件周围分配相同的空间。space-evenly：子组件在主轴上均匀分布，包括起始和结束位置。
-
spacing：设置子组件之间的间隔。
-
wrap：定义子组件是否可以在必要时换行。默认值为
nowrap，即不换行。如果设置为wrap，则子组件可以在必要时换行。 -
height：设置Column组件的高度。
-
width：设置Column组件的宽度。
-
margin：设置Column组件的外边距。
-
padding：设置Column组件的内边距。
-
backgroundImage：设置Column组件的背景图片。
-
backgroundColor：设置Column组件的背景颜色。
-
borderRadius：设置Column组件的边框圆角。
-
borderWidth：设置Column组件的边框宽度。
-
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);}
}
