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')
  }
}