HarmonyOS 开发基础（八）Row和Column
一、Column 容器
1、容器说明：
- 纵向容器
- 主轴方向：从上到下纵向
- 交叉轴方向：从左到右横向
2、容器属性：
- justifyContent：设置子元素在主轴方向的对齐格式，参数 FlexAlign 枚举
- alignItems：设置子元素在交叉轴方向的对齐格式，参数 HorizontalAlign 枚举
3、参数说明：
- space：内元素之间的间隔，对象值，如：{space: 20}，元素之间的间隔为20
二、Row 容器
1、容器说明：
- 横向容器
- 主轴方向：从左到右横向
- 交叉轴方向：从上到下纵向
2、容器属性：
- justifyContent：设置子元素在主轴方向的对齐格式，参数 FlexAlign 枚举
- alignItems：设置子元素在交叉轴方向的对齐格式，参数 VerticalAlign 枚举
3、参数说明：
- space：内元素之间的间隔，对象值，如：{space: 20}，元素之间的间隔为20
三、Column 和 Row 的 justifyContent 属性说明
1、Column：justifyContent 属性说明
- FlexAlign.Start：默认参数，主轴方向，从上依次排序往下
- FlexAlign.Center：主轴方向，居中依次排序往下
- FlexAlign.End：主轴方向，从下边位置排序保持不变
- FlexAlign.SpaceBetween：主轴方向，平均分配，上下顶格
- FlexAlign.SpaceAround：主轴方向，平均分配，距离上下平均分配的一半
- FlexAlign.SpaceEvenly：主轴方向，平均分配，距离上下平均分配
2、Row：justifyContent 属性说明
- FlexAlign.Start：默认参数，主轴方向，从左位置依次排序往右
- FlexAlign.Center：主轴方向，居中依次排序往右
- FlexAlign.End：主轴方向，从右边位置排序保持不变
- FlexAlign.SpaceBetween：主轴方向，平均分配，左右顶格
- FlexAlign.SpaceAround：主轴方向，平均分配，距离左右平均分配的一半
- FlexAlign.SpaceEvenly：主轴方向，平均分配，距离左右平均分配
四、Column 和 Row 的 alignItems 属性说明
1、Column：alignItems 属性说明
- HorizontalAlign.Start：默认参数，交叉轴方向，左边顶格
- HorizontalAlign.Center：交叉轴方向，居中
- HorizontalAlign.End：交叉轴方向，右边顶格
2、Row：alignItems 属性说明
- HorizontalAlign.Start：默认参数，交叉轴方向，上边顶格
- HorizontalAlign.Center：交叉轴方向，居中
- HorizontalAlign.End：交叉轴方向，下边顶格
五、基础使用
typescript
@Entry
@Component
struct Index {
build() {
Column() {
// Column：纵向
// space 参数：内元素之间的间距
Column({space: 20}) {
// Column 里面的第一行内容
Row() {
// Text：单行文本组件
Text('第一行')
.fontColor('#ffffff')
}
// width：属性方法，设置 Row 宽度
.width('90%')
// height：属性方法，设置 Row 高度
.height(40)
// justifyContent：属性方法，设置子元素在主轴的对齐方式，FlexAlign.Center：居中对齐
.justifyContent(FlexAlign.Center)
// backgroundColor：属性方法，设置 Row 的背景颜色
.backgroundColor('#63c3ff')
// Column 里面的第二行内容
Row() {
Text('第二行')
.fontColor('#ffffff')
}
// width：属性方法，设置 Row 宽度
.width('90%')
// height：属性方法，设置 Row 高度
.height(40)
// justifyContent：属性方法，设置子元素在主轴的对齐方式，FlexAlign.Center：居中对齐
.justifyContent(FlexAlign.Center)
// backgroundColor：属性方法，设置 Row 的背景颜色
.backgroundColor('#63c3ff')
// Column 里面的第三行内容
Row() {
Text('第三行')
.fontColor('#ffffff')
}
// width：属性方法，设置 Row 宽度
.width('90%')
// height：属性方法，设置 Row 高度
.height(40)
// justifyContent：属性方法，设置子元素在主轴的对齐方式，FlexAlign.Center：居中对齐
.justifyContent(FlexAlign.Center)
// backgroundColor：属性方法，设置 Row 的背景颜色
.backgroundColor('#63c3ff')
// Column 里面的第四行内容
Row() {
Text('第四行')
.fontColor('#ffffff')
}
// width：属性方法，设置 Row 宽度
.width('90%')
// height：属性方法，设置 Row 高度
.height(40)
// justifyContent：属性方法，设置子元素在主轴的对齐方式，FlexAlign.Center：居中对齐
.justifyContent(FlexAlign.Center)
// backgroundColor：属性方法，设置 Row 的背景颜色
.backgroundColor('#63c3ff')
}
// width：属性方法，设置 Column 宽度
.width('100%')
// margin：属性方法，设置 Column 外边距
.margin({top: 20})
// alignItems：属性方法，设置子元素在交叉轴的对齐方式，HorizontalAlign.Center：居中对齐
.alignItems(HorizontalAlign.Center)
// Row容器：横向
Row() {
// Row 对面的第一列内容
Column() {
Text('第一列')
.fontColor('#ffffff')
}
// height：属性方法，设置 Column 高度
.height(180)
// justifyContent：设置子元素在主轴的对齐方式，FlexAlign.Center：居中对齐
.justifyContent(FlexAlign.Center)
// backgroundColor：属性方法，设置 Column 的背景颜色
.backgroundColor('#63c3ff')
// Row 对面的第二列内容
Column() {
Text('第二列')
.fontColor('#ffffff')
}
// height：属性方法，设置 Column 高度
.height(180)
// justifyContent：设置子元素在主轴的对齐方式，FlexAlign.Center：居中对齐
.justifyContent(FlexAlign.Center)
// backgroundColor：属性方法，设置 Column 的背景颜色
.backgroundColor('#63c3ff')
// Row 对面的第三列内容
Column() {
Text('第三列')
.fontColor('#ffffff')
}
// height：属性方法，设置 Column 高度
.height(180)
// justifyContent：设置子元素在主轴的对齐方式，FlexAlign.Center：居中对齐
.justifyContent(FlexAlign.Center)
// backgroundColor：属性方法，设置 Column 的背景颜色
.backgroundColor('#63c3ff')
// Row 对面的第四列内容
Column() {
Text('第四列')
.fontColor('#ffffff')
}
// height：属性方法，设置 Column 高度
.height(180)
// justifyContent：设置子元素在主轴的对齐方式，FlexAlign.Center：居中对齐
.justifyContent(FlexAlign.Center)
// backgroundColor：属性方法，设置 Column 的背景颜色
.backgroundColor('#63c3ff')
}
// width：属性方法，设置 Column 宽度
.width('90%')
// margin：属性方法，设置 Column 外边距
.margin({top: 80})
// alignItems：属性方法，设置子元素在交叉轴的对齐方式，VerticalAlign.Center：居中对齐
.alignItems(VerticalAlign.Center)
// justifyContent：属性方法，设置子元素在主轴的对齐方式，FlexAlign.SpaceBetween：平均分配
.justifyContent(FlexAlign.SpaceBetween)
}
}
}六、高级使用
typescript
@Entry
@Component
struct Index {
build() {
Column() {
// 名片管理
Column() {
// 第一行
Row() {
Row() {
Image($r('app.media.icon1'))
.width(20)
.height(20)
.margin({right: 5})
Text('我的名片数据')
.fontSize(14)
}
Row() {
Text('我的访客')
.fontSize(14)
Image($r('app.media.icon2'))
.width(9)
.height(10)
.margin({left: 3})
}
}
.width('100%')
.margin({bottom: 20})
.justifyContent(FlexAlign.SpaceBetween)
// 第二行
Row() {
Column() {
Text('0')
.fontWeight(600)
Text('被访问(次)')
.fontSize(10)
}
.alignItems(HorizontalAlign.Center)
Column() {
Text('0')
.fontWeight(600)
Text('今日被访问(次)')
.fontSize(10)
}
.alignItems(HorizontalAlign.Center)
Column() {
Text('0')
.fontWeight(600)
Text('提交名片数(次)')
.fontSize(10)
}
.alignItems(HorizontalAlign.Center)
Column() {
Text('0')
.fontWeight(600)
Text('收名片数(次)')
.fontSize(10)
}
.alignItems(HorizontalAlign.Center)
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
// 第三行
Row() {
Column() {
Image($r('app.media.icon3'))
.width(28)
.height(28)
Text('分享名片')
.fontSize(11)
}
Column() {
Image($r('app.media.icon4'))
.width(28)
.height(28)
Text('编辑名片')
.fontSize(11)
}
Column() {
Image($r('app.media.icon5'))
.width(28)
.height(28)
Text('下载名片')
.fontSize(11)
}
Column() {
Image($r('app.media.icon6'))
.width(28)
.height(28)
Text('名片夹')
.fontSize(11)
}
}
.width('100%')
.margin({top: 20})
.justifyContent(FlexAlign.SpaceBetween)
}
.width('90%')
.margin({top: 20})
.padding(20)
.borderRadius(8)
.backgroundColor('#dddddd')
}
.width('100%')
.height('100%')
.backgroundColor('#f2f3f4')
}
}
.width('100%')
.margin({top: 20})
.justifyContent(FlexAlign.SpaceBetween)
}
.width('90%')
.margin({top: 20})
.padding(20)
.borderRadius(8)
.backgroundColor('#dddddd')
}
.width('100%')
.height('100%')
.backgroundColor('#f2f3f4')
}
}