1. Row

容器组件，行组件

表示一个横向的一个布局，再此容器内的所有组件，均有横向排列，不支持换行

使用方法，直接再build函数内使用，或者再容器组件内使用

该组件大括号里面可以放置其他组件，并进行显示

如何设置Row组件中的方向朝向

我们可以给Row租价设置有一个属性叫做.direction()，它里面可以传入一个Direction的枚举，可以控制元素的朝向

使用示例

@Entry
@Component
struct RowCase {
  @State message: string = 'Hello World';

  build() {
    Row({space:10}){  //设置子元素之间的间隔
      Text("内容1")
      Text("内容2")
      Text("内容3")
      Text("内容4")
    }
    .justifyContent(FlexAlign.Center) //设置它的对齐方式
    .height('100%')
    .width('100%')
  }
}

效果

2. Column

容器组件，列组件

与行组件类似，排列方向为纵向排列，同样，不支持换行

使用方法，与Row()组件相同，它们用的属性也可能有所不同，注意，它里面的布局方式是和Row是有一定的区别当的

使用示例如下

@Entry
@Component
struct RowCase {
  @State message: string = 'Hello World';

  build() {
    Column({space:10}){  //设置子元素之间的间隔
      Text("内容1")
      Text("内容2")
      Text("内容3")
      Text("内容4")
    }
    .justifyContent(FlexAlign.Center) //设置它的对齐方式
    .height('100%')
    .width('100%')
  }
}

效果

效果

3. Flex

一般较少使用

除非有些东西需要换行的时候用

弹性布局组件

既可以设置为横向也可以设置为纵向，以弹性方式布局子组件的容器组件（存在二次布局）

如何设置布局方向

需要传入一些参数，以对象的形式传进去

关于方向的键值对是

• 键：direction
• 值:FlexDirection的枚举（里面有要设置的枚举）

注意，Flex布局中，改变布局的对齐方式的方法，并不是通过属性的方法改变，而是通过构造参数的方法传进去，

同样还是用 justifyContent() 和 alignItems()这两个来改变对齐方向，只不过它们现在换成键值对的键了，值还是之前要传进去的参数

如何换行

Flex布局中传入构造参数wrap（作为键值对的键）

然后它的值是FlexWrap的枚举

@Entry
@Component
struct FlexCase {
  @State message: string = 'Hello World';

  build() {
    //使用Flex布局
    Flex({direction:FlexDirection.Column,//设置它的布局方式为纵向
      justifyContent:FlexAlign.Center,//主轴对齐方式为居中对齐
    }){
      Text("内容1")
      Text("内容2")
      Text("内容3")
      Text("内容4")
      Text("内容5")
      Text("内容6")
    }
    .backgroundColor(Color.Pink)  //设置背景颜色
    .height('100%')
    .width('100%')
  }
}

效果

欢迎大家进行鸿蒙学习

想要继续学习的请加入班级

张恩瑞班级链接：https://developer.huawei.com/consumer/cn/training/classDetail/2a307254409e4823bdc1cc38a7470f55?type=1?ha_source=hmosclass&ha_sourceId=89000248