HarmonyOS 开发基础（八）Row和Column

HarmonyOS 开发基础（八）Row和Column

一、Column 容器

1、容器说明：

• 纵向容器
• 主轴方向：从上到下纵向
• 交叉轴方向：从左到右横向

2、容器属性：

1. justifyContent：设置子元素在主轴方向的对齐格式，参数 FlexAlign 枚举
2. alignItems：设置子元素在交叉轴方向的对齐格式，参数 HorizontalAlign 枚举

3、参数说明：

• space：内元素之间的间隔，对象值，如：{space: 20}，元素之间的间隔为20

二、Row 容器

1、容器说明：

• 横向容器
• 主轴方向：从左到右横向
• 交叉轴方向：从上到下纵向

2、容器属性：

1. justifyContent：设置子元素在主轴方向的对齐格式，参数 FlexAlign 枚举
2. alignItems：设置子元素在交叉轴方向的对齐格式，参数 VerticalAlign 枚举

3、参数说明：

• space：内元素之间的间隔，对象值，如：{space: 20}，元素之间的间隔为20

三、Column 和 Row 的 justifyContent 属性说明

1、Column：justifyContent 属性说明

1. FlexAlign.Start：默认参数，主轴方向，从上依次排序往下
2. FlexAlign.Center：主轴方向，居中依次排序往下
3. FlexAlign.End：主轴方向，从下边位置排序保持不变
4. FlexAlign.SpaceBetween：主轴方向，平均分配，上下顶格
5. FlexAlign.SpaceAround：主轴方向，平均分配，距离上下平均分配的一半
6. FlexAlign.SpaceEvenly：主轴方向，平均分配，距离上下平均分配

2、Row：justifyContent 属性说明

1. FlexAlign.Start：默认参数，主轴方向，从左位置依次排序往右
2. FlexAlign.Center：主轴方向，居中依次排序往右
3. FlexAlign.End：主轴方向，从右边位置排序保持不变
4. FlexAlign.SpaceBetween：主轴方向，平均分配，左右顶格
5. FlexAlign.SpaceAround：主轴方向，平均分配，距离左右平均分配的一半
6. FlexAlign.SpaceEvenly：主轴方向，平均分配，距离左右平均分配

四、Column 和 Row 的 alignItems 属性说明

1、Column：alignItems 属性说明

1. HorizontalAlign.Start：默认参数，交叉轴方向，左边顶格
2. HorizontalAlign.Center：交叉轴方向，居中
3. HorizontalAlign.End：交叉轴方向，右边顶格

2、Row：alignItems 属性说明

1. HorizontalAlign.Start：默认参数，交叉轴方向，上边顶格
2. HorizontalAlign.Center：交叉轴方向，居中
3. HorizontalAlign.End：交叉轴方向，下边顶格

五、基础使用

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

六、高级使用

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