【HarmonyOS4.0】第七篇-ArkUI容器布局组件(一)

容器组件指的是它可以包含一个或多个子组件的组件，除了前边介绍过的公共属性外。

一、线性布局容器（Row、Column）

线性容器类表示按照水平方向或者竖直方向排列子组件的容器，ArkUI开发框架通过 Row 和 Colum 来实现线性布局。

1.1.主轴和纵轴概念

什么是主轴和纵轴？

对于线性容器来说，有主轴和纵轴之分：

• 如果布局是沿水平方向，那么主轴就指水平方向，而纵轴就是垂直方向；
• 如果布局是沿垂直方向，那么主轴就是指垂直方向，而纵轴就是水平方向。

如下图所示：

容器属性说明：

属性方法名	说明	参数
justifyContent	设置子元素在主轴方向的对齐格式	FlexAlign枚举
alignItems	设置子元素在交叉轴方向的对齐格式	Row容器使用VerticalAlign枚举Column容器使用HorizontalAlign 枚举

1.2.Column

Column 按照垂直方向布局子组件，主轴为垂直方向，纵轴为水平方向。

1.2.1.Column定义

沿垂直方向布局的容器。接口如下：

Column(value?: {space?: string | number})

value：可选参数， space 表示设置 Column 的子组件在垂直方向上的间距，参数：

参数名	参数类型	必填	参数描述
space	string | number	否	纵向布局元素垂直方向间距。从API version 9开始，space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。默认值：0说明：可选值为大于等于0的数字，或者可以转换为数字的字符串。

1.2.2.Column属性介绍

alignItems：设置子组件在水平方向上的布局方式， HorizontalAlign 定义了以下三种对其方式：

• Start：设置子组件在水平方向上按照语言方向起始端对齐。
• Center（默认值）：设置子组件在水平方向上居中对齐。
• End：设置子组件在水平方向上按照语言方向末端对齐。

案例如下：

@Entry
@Component
struct ColumnExample {
  build() {
    //只能有一个根容器
    Column(){

      Column(){
        Text("Start")
          .fontSize(20)
          .backgroundColor("#A9A9A9")
      }
      .alignItems(HorizontalAlign.Start) //子容器：设置子组件在水平方向上按照语言方向起始端对齐。
      .size({width:"100%",height:60})    //容器的宽和高
      .borderWidth(2)                    //框线的宽度
      .borderColor("#000000")            //框线的颜色
      .margin({top:20, bottom:20})       //外上、下边距

      Column(){
        Text("Center")
          .fontSize(20)
          .backgroundColor("#A9A9A9")
      }
      .alignItems(HorizontalAlign.Center)//子容器：设置子组件在水平方向上居左对齐。
      .size({width:"100%",height:60})    //容器的宽和高
      .borderWidth(2)                    //框线的宽度
      .borderColor("#0000CD")            //框线的颜色
      .margin({top:20, bottom:20})       //外上、下边距

      Column(){
        Text("End")
          .fontSize(20)
          .backgroundColor("#A9A9A9")
      }
      .alignItems(HorizontalAlign.End)  //子容器：设置子组件在水平方向上按照语言方向末端对齐。
      .size({width:"100%",height:60})   //容器的宽和高
      .borderWidth(2)                   //框线的宽度
      .borderColor("#FF1493")           //框线的颜色
      .margin({top:20, bottom:20})      //外上、下边距
    }
  }
}

预览效果如下：

justifyContent：设置子组件在垂直方向上的对齐方式， FlexAlign枚举 定义了一下几种类型：

• Start：元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。
• Center：元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
• End：元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。
• SpaceBetween：主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。
• SpaceAround：主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。
• SpaceEvenly：主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

如下图所示：

案例代码如下：

@Entry
@Component
struct ColumnExample {
  build() {

    Column({space:5}){  // 设置子元素垂直方向间距为5

      Column(){
        Text("黄河之水天上来").size({width:160, height:25}).backgroundColor("#808080")
        Text("奔流到海不复回").size({width:160, height:25}).backgroundColor("#BC8F8F")
        Text("人生得意须尽欢").size({width:160, height:25}).backgroundColor("#DCDCDC")
      }
        .alignItems(HorizontalAlign.Center) //设置水平方向子容器居中
        .justifyContent(FlexAlign.Start) //元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐
        .size({width:"100%", height:120}) //容器大小
        .borderWidth(2)
        .borderColor("#D2B48C")

      Column(){
        Text("黄河之水天上来").size({width:160, height:25}).backgroundColor("#808080")
        Text("奔流到海不复回").size({width:160, height:25}).backgroundColor("#BC8F8F")
        Text("人生得意须尽欢").size({width:160, height:25}).backgroundColor("#DCDCDC")
      }
      .alignItems(HorizontalAlign.Center) //设置水平方向子容器居中
      .justifyContent(FlexAlign.Center) //元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
      .size({width:"100%", height:120}) //容器大小
      .borderWidth(2)
      .borderColor("#8A2BE2")

      Column(){
        Text("黄河之水天上来").size({width:160, height:25}).backgroundColor("#808080")
        Text("奔流到海不复回").size({width:160, height:25}).backgroundColor("#BC8F8F")
        Text("人生得意须尽欢").size({width:160, height:25}).backgroundColor("#DCDCDC")
      }
      .alignItems(HorizontalAlign.Center) //设置水平方向子容器居中
      .justifyContent(FlexAlign.End) //元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。
      .size({width:"100%", height:120}) //容器大小
      .borderWidth(2)
      .borderColor("#FF69B4")

      Column(){
        Text("黄河之水天上来").size({width:160, height:25}).backgroundColor("#808080")
        Text("奔流到海不复回").size({width:160, height:25}).backgroundColor("#BC8F8F")
        Text("人生得意须尽欢").size({width:160, height:25}).backgroundColor("#DCDCDC")
      }
      .alignItems(HorizontalAlign.Center) //设置水平方向子容器居中
      .justifyContent(FlexAlign.SpaceBetween) //元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。Q
      .size({width:"100%", height:120}) //容器大小
      .borderWidth(2)
      .borderColor("#DDA0DD")

      Column(){
        Text("黄河之水天上来").size({width:160, height:25}).backgroundColor("#808080")
        Text("奔流到海不复回").size({width:160, height:25}).backgroundColor("#BC8F8F")
        Text("人生得意须尽欢").size({width:160, height:25}).backgroundColor("#DCDCDC")
      }
      .alignItems(HorizontalAlign.Center) //设置水平方向子容器居中
      .justifyContent(FlexAlign.SpaceAround) //元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。
      .size({width:"100%", height:120}) //容器大小
      .borderWidth(2)
      .borderColor("#E6E6FA")


      Column(){
        Text("黄河之水天上来").size({width:160, height:25}).backgroundColor("#808080")
        Text("奔流到海不复回").size({width:160, height:25}).backgroundColor("#BC8F8F")
        Text("人生得意须尽欢").size({width:160, height:25}).backgroundColor("#DCDCDC")
      }
      .alignItems(HorizontalAlign.Center) //设置水平方向子容器居中
      .justifyContent(FlexAlign.SpaceEvenly) //元素在主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
      .size({width:"100%", height:120}) //容器大小
      .borderWidth(2)
      .borderColor("#FFB6C1")

    }
    .width("100%")
    .margin({top:20})
    
  }
}

预览效果如下：

1.3.Row

Row 按照水平方向布局子组件，主轴为水平方向，纵轴为竖直方向。

1.3.1.Row定义介绍

沿水平方向布局容器。接口如下：

Row(value?:{space?: number | string })

value：可选参数， space 表示设置 Row 的子组件在水平方向上的间距，案例如下：

@Entry
@Component
struct RowExample01 {
  build() {
    Column({space:20}){
      Row(){
        Text().width(90).height("100%").backgroundColor("#FFB6C1")

        Text().width(20).height("100%") //模拟元素直接间隔

        /**
         * 父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，表示自适应占满剩余空间。
         默认值：0
         说明：
         仅在Row/Column/Flex布局中生效。
         可选值为大于等于0的数字，或者可以转换为数字的字符串。
         */
        Text().width(20).height("100%").layoutWeight(1).backgroundColor(Color.Blue)
      }
      .width("100%")
      .height(60)

      Row({space:20}){ //Row容器的间隔
        Text().width(90).height("100%").backgroundColor("#FFB6C1")

        /**
         * 父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，表示自适应占满剩余空间。
         默认值：0
         说明：
         仅在Row/Column/Flex布局中生效。
         可选值为大于等于0的数字，或者可以转换为数字的字符串。
         */
        Text().width(20).height("100%").layoutWeight(1).backgroundColor(Color.Blue)
      }
      .width("100%")
      .height(60)
    }
    .width("100%")
    .padding(10)
  }
}

注意：

layoutWeight：父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，表示自适应占满剩余空间。默认值：0说明：

• 仅在Row/Column/Flex布局中生效。
• 可选值为大于等于0的数字，或者可以转换为数字的字符串。

预览效果如下：

1.3.2.Row属性介绍

alignItems：参数类型为 VerticalAlign ，表示子组件在垂直方向上的布局方式， VerticalAlign 定义了以下三种对其方式：

• Top：设置子组件在竖直方向上居顶部对齐。
• Center（默认值）：设置子组件在竖直方向上居中对其。
• Bottom：设置子组件在竖直方向上居底部对齐。

案例代码如下：

@Entry
@Component
struct RowExample01 {
  build() {
    Column({space:20}){
      Row(){
        //这里为了看到消息，不要设置子元素的宽和高
        Text("Top").fontSize(20).backgroundColor("#FFB6C1")
      }
      .width("100%")
      .height(60)
      .alignItems(VerticalAlign.Top)  //设置子组件在垂直方法顶部对象
      .borderWidth(2)                 //设置框线宽度
      .borderColor(Color.Orange)      //框线颜色


      Row({space:20}){ //Row容器的间隔
        Text("Center").fontSize(20).backgroundColor("#FFB6C1")
      }
      .width("100%")
      .height(60)
      .alignItems(VerticalAlign.Center)  //设置子组件在垂直方法居中对齐
      .borderWidth(2)                 //设置框线宽度
      .borderColor(Color.Green)       //框线颜色

      Row({space:20}){ //Row容器的间隔
        Text("Bottom").fontSize(20).backgroundColor("#FFB6C1")
      }
      .width("100%")
      .height(60)
      .alignItems(VerticalAlign.Bottom)  //设置子组件在垂直方法居中对齐
      .borderWidth(2)                    //设置框线宽度
      .borderColor(Color.Red)            //框线颜色

    }
    .width("100%")
    .padding(10)
  }
}

预览效果如下：

justifyContent：设置子组件在水平方向上的对齐方式， FlexAlign 定义了一下几种类型：

• Start：元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。
• Center：元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
• End：元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。
• SpaceBetween：主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。
• SpaceAround：主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。
• SpaceEvenly：主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

示意图如下：

案例代码如下：

@Entry
@Component
struct RowExample03 {
  build() {
    Column({space:10}){
      Row(){
        Text().size({width:30,height:50}).backgroundColor("#FFB6C1")
        Text().size({width:30,height:50}).backgroundColor("#FAFAD2")
        Text().size({width:30,height:50}).backgroundColor("#7FFF00")
      }
      .justifyContent(FlexAlign.Start) //元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。
      .size({width:"100%", height:100})
      .borderWidth(2)
      .borderColor(Color.Orange)

      Row(){
        Text().size({width:30,height:50}).backgroundColor("#FFB6C1")
        Text().size({width:30,height:50}).backgroundColor("#FAFAD2")
        Text().size({width:30,height:50}).backgroundColor("#7FFF00")
      }
      .justifyContent(FlexAlign.Center) //元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
      .size({width:"100%", height:100})
      .borderWidth(2)
      .borderColor(Color.Orange)

      Row(){
        Text().size({width:30,height:50}).backgroundColor("#FFB6C1")
        Text().size({width:30,height:50}).backgroundColor("#FAFAD2")
        Text().size({width:30,height:50}).backgroundColor("#7FFF00")
      }
      .justifyContent(FlexAlign.End) //元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。
      .size({width:"100%", height:100})
      .borderWidth(2)
      .borderColor(Color.Orange)

      Row(){
        Text().size({width:30,height:50}).backgroundColor("#FFB6C1")
        Text().size({width:30,height:50}).backgroundColor("#FAFAD2")
        Text().size({width:30,height:50}).backgroundColor("#7FFF00")
      }
      .justifyContent(FlexAlign.SpaceBetween) //主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐
      .size({width:"100%", height:100})
      .borderWidth(2)
      .borderColor(Color.Orange)

      Row(){
        Text().size({width:30,height:50}).backgroundColor("#FFB6C1")
        Text().size({width:30,height:50}).backgroundColor("#FAFAD2")
        Text().size({width:30,height:50}).backgroundColor("#7FFF00")
      }
      .justifyContent(FlexAlign.SpaceAround) //主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。
      .size({width:"100%", height:100})
      .borderWidth(2)
      .borderColor(Color.Orange)

      Row(){
        Text().size({width:30,height:50}).backgroundColor("#FFB6C1")
        Text().size({width:30,height:50}).backgroundColor("#FAFAD2")
        Text().size({width:30,height:50}).backgroundColor("#7FFF00")
      }
      .justifyContent(FlexAlign.SpaceEvenly) //主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
      .size({width:"100%", height:100})
      .borderWidth(2)
      .borderColor(Color.Orange)

    }
    .width("100%")
    .padding({top:20})

  }
}

如果 Row 设置了 space 参数，则 justifyContent 参数不起作用。预览效果如下：

1.4.Blank

Blank 表示空白填充组件，它用在 Row 和 Column 组件内来填充组件在主轴方向上的剩余尺寸的能力。

1.4.1.Blank定义

空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column/Flex时生效。接口如下：

Blank(min?: number | string)

参数：

参数名	参数类型	必填	参数描述
min	number | string	否	空白填充组件在容器主轴上的最小大小。默认值：0说明：不支持设置百分比。负值使用默认值。当最小值大于容器可用空间时，使用最小值作为自身大小并超出容器。

1.4.2.Blank属性

除支持通用属性外，还支持以下属性：

名称	参数类型	描述
color	ResourceColor	设置空白填充的填充颜色。默认值：Color.Transparent从API version 9开始，该接口支持在ArkTS卡片中使用。

1.4.3.案例

案例代码如下：

@Entry
@Component
struct BlackExample {
  build() {
    Column({space:20}){
      // blank父组件不设置宽度时，Blank失效，可以通过设置min最小宽度填充固定宽度
      Row(){
        Text("Bluetooth")
          .fontSize(20) //文本
        Blank().color(Color.Green) //不设置空白颜色
        Toggle({type:ToggleType.Switch}) //按钮开关
      }
      .backgroundColor(Color.Pink)
      .borderRadius(8)
      .size({height:80})
      .justifyContent(FlexAlign.SpaceBetween) //设置
      .padding(10)


      Row(){
        Text("Bluetooth")
          .fontSize(20) //靠左显示
        // 设置最小宽度为160
        Blank(160).color(Color.Orange) //设置空白颜色
        Toggle({type:ToggleType.Switch}) //按钮开关
      }
      .backgroundColor(Color.Pink)
      .borderRadius(8)
      .size({width:"100%", height:80})
      .justifyContent(FlexAlign.SpaceBetween) //设置
      .padding(10)

    }
    .padding(20)
    .size({width: "100%", height: "100%"})
  }
}

预览效果如下：

Blank 的特点：

• Black只在 Row 和 Column 容器中生效。
• 除了 color 外不支持通用属性。
• 只在 Row 和 Column 有剩余空间才生效。
• 适合用在多设备适配场景中。

1.5.完整案例演示

学习上面的内容需要知道：纵向布局使用Column容器，横向布局采用Row容器，通过justifyContent和alignItems分别用来设置主轴和交叉轴的对齐方式：

属性方法名	说明	参数
justifyContent	设置子元素在主轴方向的对齐格式	FlexAlign枚举
alignItems	设置子元素在交叉轴方向的对齐格式	Row容器使用VerticalAlign枚举Column容器使用HorizontalAlign 枚举

1.5.1.需求如下

实现商品列表的展示，如下：

分析页面元素构成：

1.5.2.实现思路

这里的商品列表是，不能通过一个一个的Row容器实现，需要通过ForEach实现,很多时间是不确定有多少个商品的，如下：

代码如下：

@Entry
@Component
struct ListExample {
  private items = [
    {name:"HUAWEI Mate 60", image: $r("app.media.mate60"), price: 5999.00},
    {name:"HUAWEI MatePad Pro", image: $r("app.media.MatePadPro"), price: 4299.00},
    {name:"HUAWEI WATCH GT 4", image: $r("app.media.WATCHGT4"), price: 1538.00},
    {name:"HUAWEI FreeBuds Pro 3", image: $r("app.media.FreeBudsPro3"), price: 1499.00},
    {name:"HUAWEI MateBook 14s", image: $r("app.media.MateBook14s"), price: 5299.00}
  ]
  build() {
    Column(){
      ForEach(this.items, //遍历的数组
        (item: any, index?:number)=> //页面组件生成函数
        {
        Row(){
          Image(item.image)
          Column(){
            Text(item.name)
            Text(item.price)
          }
        }
      })
    }
  }
}

1.5.3.实现单个商品展示

不要一蹴而就，先编写单个商品的展示，调整好样式，在考虑后续的，代码如下：

@Entry
@Component
struct ListExample {
  build() {
    Column({space:8}){
      Row(){
        Text("商品列表")
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .width("100%")
      .padding(20)

      Row({space:10}){
        Image($r('app.media.mate60')).width(100)
        Column({space:4}){
          Text("华为mata60").fontSize(20).fontWeight(FontWeight.Bold)
          Text("原价：￥4565").fontColor("#F36").fontSize(18)
        }
        .height("100%")
        .alignItems(HorizontalAlign.Start) //设置子组件在水平方向上按照语言方向起始端对齐。
      }
      .width("90%")  //设置宽度
      .height(120)    //设置高度
      .justifyContent(FlexAlign.SpaceBetween) //设置主轴方向主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。
      .backgroundColor("#FFFFFF") //设置背景为白色
      .borderRadius(10) //这是圆角班级
      .padding(20) //内边距

    }
    .width("100%")
    .height("100%")
    .backgroundColor("#D3D3D3")

  }
}

预览效果如下：

1.5.4.实现商品列表，展示商品

由于后期商品很多数量不确定，不可能写多个Row标签，所以这里使用ForEach循环渲染出来商品列表信息：

class Item{
  //定位属性
  name: string
  image: any
  price: number

  constructor(name: string, image: any, price: number) {
    this.name = name
    this.image = image
    this.price = price
  }
}

@Entry
@Component
struct ListExample {
  private items:Array<Item> = [
    new Item("HUAWEI Mate 60 Pro",$r("app.media.mate60"),  5999.00),
    new Item("HUAWEI MatePad Pro",$r("app.media.MatePadPro"),4299.00),
    new Item("HUAWEI WATCH GT 4", $r("app.media.WATCHGT4"), 1538.00),
    new Item("HUAWEI FreeBuds Pro 3", $r("app.media.FreeBudsPro3"), 1499.00),
    new Item("HUAWEI MateBook 14s", $r("app.media.MateBook14s"), 5299.00)
  ]
  build() {
    Column({space:8}){
      Row(){
        Text("商品列表")
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .width("100%")
      .padding(20)
      
      
      ForEach(this.items,(item: Item, index?:number)=>{
        Row({space:10}){
          Image(item.image).width(100)
          Column({space:4}){
            Text(item.name).fontSize(15).fontWeight(FontWeight.Bold)
            Text(`原价：￥ ${item.price}`).fontColor("#F36").fontSize(18)
          }
          .height("100%")
          .alignItems(HorizontalAlign.Start)
        }
        .width("90%")  //设置宽度
        .height(120)    //设置高度
        .justifyContent(FlexAlign.SpaceBetween) //设置主轴方向主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。
        .backgroundColor("#FFFFFF") //设置背景为白色
        .borderRadius(10) //这是圆角班级
        .padding(20) //内边距
      })
    }
    .width("100%")
    .height("100%")
    .backgroundColor("#D3D3D3")

  }
}

预览效果如下：

上面的内容虽然可以展示商品，但是商品的数量过多，无法展示出来，这时候就要采用List容器来采用滚动的方式实现。

二、弹性布局容器（Flex）

ArkUI 开发框架为了方便开发者实现灵活的页面布局方式，提供了弹性布局 Flex ，它用来为盒装模型提供最大的灵活性。 Flex 和 Row 、 Column 组件一样，也有主轴和纵轴之分。

说明：

• Flex组件在渲染时存在二次布局过程，因此在对性能有严格要求的场景下建议使用Column、Row代替。
• Flex组件主轴默认不设置时撑满父容器，Column、Row组件主轴不设置时默认是跟随子节点大小。

2.1.Flex接口

Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })

2.2.参数

value是一个对象。

2.2.1.direction

direction：设置子组件的的排列方向即主轴方向， 类型FlexDirection 定义了以下4种排列方式：

名称	描述
Row	主轴与行方向一致作为布局模式。
RowReverse	与Row方向相反方向进行布局。
Column	主轴与列方向一致作为布局模式。
ColumnReverse	与Column相反方向进行布局。

示例图如下：

说明：

1）Row（默认值）：子组件水平排列，即主轴为水平方向纵轴为竖直方向，子组件由左向右排列：

2）Column：子组件竖直排列，即主轴为垂直方向，起点在上边，子组件由上到下排列。

3）Column：子组件竖直排列，即主轴为垂直方向，起点在上边，子组件由上到下排列。

4）ColumnReverse：子组件竖直排列，即主轴为垂直方向，起点在下边，子组件由下到上排列。

案例代码如下：

@Entry
@Component
struct FlexExample {
  build() {
    Column({space:10}){
      //Row（默认值）：子组件水平排列，即主轴为水平方向纵轴为竖直方向，子组件由左向右排列。
      Flex({direction: FlexDirection.Row}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(50).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(50).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(50).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(50).height(25)
      }.width("100%")
      .height(60)
      .backgroundColor("#808080")
      .padding({top:20,bottom:20})

      //RowReverse：子组件水平排列，即主轴为水平方向纵轴为竖直方向，子组件由右向左排列。
      Flex({direction: FlexDirection.RowReverse}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(50).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(50).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(50).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(50).height(25)
      }.width("100%")
      .height(60)
      .backgroundColor("#808080")
      .padding({top:20,bottom:20})
      
      //Column：子组件竖直排列，即主轴为垂直方向，起点在上边，子组件由上到下排列。
      Flex({direction: FlexDirection.Column}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(50).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(50).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(50).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(50).height(25)
      }.width("100%")
      .height(150)
      .backgroundColor("#808080")
      .padding({top:20,bottom:20})

      //ColumnReverse：子组件竖直排列，即主轴为垂直方向，起点在下边，子组件由下到上排列。
      Flex({direction: FlexDirection.ColumnReverse}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(50).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(50).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(50).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(50).height(25)
      }.width("100%")
      .height(150)
      .backgroundColor("#808080")
      .padding({top:20,bottom:20})
    }
    .width("100%")
    .height("100%")
  }
}

预览效果如下：

2.2.2.wrap

wrap：设置子组件是单行/列还是多行/列排序， FlexWrap枚举提供了以下3种类型：

名称	描述
NoWrap	Flex容器的元素单行/列布局，子项不允许超出容器。
Wrap	Flex容器的元素多行/列排布，子项允许超出容器。
WrapReverse	Flex容器的元素反向多行/列排布，子项允许超出容器。

案例代码如下：

@Entry
@Component
struct FlexExample02 {
  build() {
    Column({space:20}){
      //1.NoWrap（默认值）：子组件单行/列排序，子组件不允许超出容器。会挤在一起
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.NoWrap}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#F5F5F5").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
      }
      .borderWidth(2)

      //2.Wrap：子组件多行/列排序，子组件允许超出容器。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.Wrap}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#F5F5F5").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
      }
      .borderWidth(2)
      
      //3.WrapReverse：子组件反向多行/列排序，子组件允许超出容器。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.WrapReverse}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#F5F5F5").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
      }
      .borderWidth(2)

    }
    .width("100%")
    .height("100%")
    .padding({top:20, bottom:20})
  }
}

预览效果如下：

2.2.3.justifyContent

justifyContent：设置子组件在主轴上的对齐方式， FlexAlign 提供了以下 6 种对齐方式：

名称	描述
Start	元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。
Center	元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
End	元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。
SpaceBetween	Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。
SpaceAround	Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
SpaceEvenly	Flex主轴方向均匀分配弹性元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

如下图所示：

案例代码如下：

@Entry
@Component
struct FlexExample02 {
  build() {
    Column({space:20}){
      //Start（默认值）：元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.Wrap, justifyContent:FlexAlign.Start}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)

      }
      .borderWidth(2)

      //Center：元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.Wrap,justifyContent:FlexAlign.Center}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#F5F5F5").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
      }
      .borderWidth(2)

      //End：元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.Wrap,justifyContent:FlexAlign.End}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#8B4513").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
      }
      .borderWidth(2)

      //SpaceBetween：Flex 主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.Wrap,justifyContent:FlexAlign.SpaceBetween}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#8B4513").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
      }
      .borderWidth(2)


      //SpaceAround： Flex 主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.Wrap,justifyContent:FlexAlign.SpaceAround}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#8B4513").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
      }
      .borderWidth(2)


      //SpaceEvenly： Flex 主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.Wrap,justifyContent:FlexAlign.SpaceEvenly}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#8B4513").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
      }
      .borderWidth(2)
      
    }
    .width("100%")
    .height("100%")
    .padding({top:20, bottom:20})
  }
}

预览效果如下：

2.2.4.alignItems

所有子组件在Flex容器交叉轴上的对齐格式。默认值是ItemAlign.Start，ItemAlign枚举有6种对齐方式：

名称	描述
Auto	使用Flex容器中默认配置。
Start	元素在Flex容器中，交叉轴方向首部对齐。
Center	元素在Flex容器中，交叉轴方向居中对齐。
End	元素在Flex容器中，交叉轴方向底部对齐。
Stretch	元素在Flex容器中，交叉轴方向拉伸填充。容器为Flex且设置Wrap为FlexWrap.Wrap或FlexWrap.WrapReverse时，元素拉伸到与当前行/列交叉轴长度最长的元素尺寸。其余情况在元素未设置尺寸时，拉伸到容器尺寸。
Baseline	元素在Flex容器中，交叉轴方向文本基线对齐。

代码如下：为了看到效果，不要设置wrap（设置子组件是单行/列还是多行/列排序）

@Entry
@Component
struct FlexExample02 {
  build() {
    Column({space:20}){
      //ItemAlign.Auto使用Flex容器中默认配置。
      Flex({direction:FlexDirection.Row, alignItems:ItemAlign.Auto}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
        Text("test8").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)

      }
      .borderWidth(2)
      .width("100%")
      .height(100)

      //ItemAlign.Start 元素在Flex容器中，交叉轴方向首部对齐。。
      Flex({direction:FlexDirection.Row, alignItems:ItemAlign.Start}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
        Text("test8").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
      }
      .borderWidth(2)
      .width("100%")
      .height(100)

      //ItemAlign.Center 元素在Flex容器中，交叉轴方向居中对齐
      Flex({direction:FlexDirection.Row,alignItems:ItemAlign.Center}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
        Text("test8").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)

      }
      .borderWidth(2)
      .width("100%")
      .height(100)

      //ItemAlign.End：元素在Flex容器中，交叉轴方向底部对齐。
      Flex({direction:FlexDirection.Row, alignItems:ItemAlign.End}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
        Text("test8").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test9").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test10").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test11").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test12").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
      }
      .borderWidth(2)
      .width("100%")
      .height(100)


      //ItemAlign.Stretch：元素在Flex容器中，交叉轴方向拉伸填充。
      //容器为Flex且设置Wrap为FlexWrap.Wrap或FlexWrap.WrapReverse时，
      //元素拉伸到与当前行/列交叉轴长度最长的元素尺寸。其余情况在元素未设置尺寸时，拉伸到容器尺寸。
      Flex({direction:FlexDirection.Row, alignItems:ItemAlign.Stretch}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
        Text("test8").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test9").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test10").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test11").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test12").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
      }
      .borderWidth(2)
      .width("100%")
      .height(130)


      //ItemAlign.Baseline：元素在Flex容器中，交叉轴方向文本基线对齐。。
      Flex({direction:FlexDirection.Row, alignItems:ItemAlign.Baseline}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
        Text("test8").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test9").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test10").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test11").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test12").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
      }
      .borderWidth(2)
      .width("100%")
      .height(120)

    }
    .width("100%")
    .height("100%")
    .padding({top:20, bottom:20})
  }
}

预览效果如下：

2.2.5.alignContent

alignContent：当交叉轴有额外的空间时，多行内容的对齐方式。该属性仅在 wrap 属性为 Wrap 或者 WrapReverse 时才生效， FlexAlign 定义了以下 6 种对齐方式：

名称	描述
Start	元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。
Center	元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
End	元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。
SpaceBetween	Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。
SpaceAround	Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
SpaceEvenly	Flex主轴方向均匀分配弹性元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

案例代码如下：

@Entry
@Component
struct FlexExample02 {
  build() {
    Column({space:20}){
      //Start（默认值）：设置子组件在交叉轴（纵轴）方向首部对齐。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent:FlexAlign.Start}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
        Text("test8").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test9").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test10").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test11").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test12").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
      }
      .borderWidth(2)
      .width("100%")
      .height(100)

      //Center：设置子组件在交叉轴（纵轴）方向居中对齐。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.Wrap,alignContent:FlexAlign.Center}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
        Text("test8").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test9").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test10").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test11").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test12").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
      }
      .borderWidth(2)
      .width("100%")
      .height(100)

      //End：设置子组件在交叉轴（纵轴）方向尾部对齐。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.Wrap,alignContent:FlexAlign.End}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
        Text("test8").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test9").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test10").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test11").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test12").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
      }
      .borderWidth(2)
      .width("100%")
      .height(100)

      //SpaceBetween：设置子组件在交叉轴（纵轴）方向等间距布局。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.Wrap,alignContent:FlexAlign.SpaceBetween}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
        Text("test8").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test9").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test10").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test11").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test12").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
      }
      .borderWidth(2)
      .width("100%")
      .height(100)


      //SpaceAround：设置子组件在交叉轴（纵轴）方向间距布局，并且首尾子组件到 Flex 的间距是子组件间距的一半。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.Wrap,alignContent:FlexAlign.SpaceAround}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
        Text("test8").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test9").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test10").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test11").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test12").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
      }
      .borderWidth(2)
      .width("100%")
      .height(130)


      //SpaceEvenly：设置子组件在交叉轴（纵轴）方向等间距布局，并且首尾子组件到 Flex 的间距子组件之间的间距都相等。
      Flex({direction:FlexDirection.Row, wrap: FlexWrap.Wrap,alignContent:FlexAlign.SpaceEvenly}){
        Text("test1").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test2").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test3").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test4").fontSize(20).backgroundColor("#FFFFE0").width(60).height(25)
        Text("test5").fontSize(20).backgroundColor("#FFE4E1").width(60).height(25)
        Text("test6").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test7").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
        Text("test8").fontSize(20).backgroundColor("#FF69B4").width(60).height(25)
        Text("test9").fontSize(20).backgroundColor("#A52A2A").width(60).height(25)
        Text("test10").fontSize(20).backgroundColor("#FFFFFF").width(60).height(25)
        Text("test11").fontSize(20).backgroundColor("#FFA07A").width(60).height(25)
        Text("test12").fontSize(20).backgroundColor("#FF8C00").width(60).height(25)
      }
      .borderWidth(2)
      .width("100%")
      .height(120)

    }
    .width("100%")
    .height("100%")
    .padding({top:20, bottom:20})
  }
}

预览结果如下：

三、层叠布局容器（Stack）

堆叠容器组件 Stack的布局方式是把子组件按照设置的对齐方式顺序依次堆叠，后一个子组件覆盖在前一个子组件上边。

注意：Stack 组件层叠式布局，尺寸较小的布局会有被遮挡的风险，

3.1.接口

堆叠容器组件 Stack接口如下：

Stack(value?: { alignContent?: Alignment })

3.2.参数

参数只有一个如下：

参数名	参数类型	必填	参数描述
alignContent	Alignment	否	设置子组件在容器内的对齐方式。默认值：Alignment.Center

参数alignContent，参数类型为Alignment枚举有9个参数值如下：

名称	描述
TopStart	子组件在 Stack 内靠左上角对齐
Top	设置子组件在 Stack 内靠顶部水平居中对齐
TopEnd	设置子组件在 Stack 内部靠右上角对齐
Start	子组件靠 Stack 左边侧竖直居中对齐
Center	设置子组件居中对齐
End	设置子组件靠右竖直居中对齐
BottomStart	设置子组件左下角对齐
Bottom	设置子组件底部水平居中对齐
BottomEnd	设置子组件右下角对齐

1）TopStart：子组件在 Stack 内靠左上角对齐，简单样例如下所示：

@Entry
@Component
struct StackExample {
  build() {
    //TopStart：子组件在 Stack 内靠左上角对齐，
    Stack({alignContent:Alignment.TopStart}){
      Text("test1")
        .width(200)                     //宽
        .height(180)                    //高
        .textAlign(TextAlign.End)
        .backgroundColor(Color.Orange)  //设置背景

      Text("test2")
        .width(130)                     //宽
        .height(100)                    //高
        .textAlign(TextAlign.End)
        .backgroundColor(Color.White)  //设置背景

      Text("test3")
        .width(65)                     //宽
        .height(55)                    //高
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Brown)  //设置背景
    }
    .width("100%")
    .height(200)
    .backgroundColor(Color.Pink)
  }
}

预览效果如下：

2）Top：设置子组件在 Stack 内靠顶部水平居中对齐，如下图所示：

3）TopEnd：设置子组件在 Stack 内部靠右上角对齐，如下所示：

4）Start：子组件靠 Stack 左边侧竖直居中对齐，如下所示：

5）Center（默认值）：设置子组件居中对齐，如下所示：

6）End：设置子组件靠右竖直居中对齐，如下所示：

7）BottomStart：设置子组件左下角对齐，如下所示：

8）Bottom：设置子组件底部水平居中对齐，如下所示：

9）BottomEnd：设置子组件右下角对齐，如下所示：

3.3.属性

除支持通用属性外，还支持以下属性：

参数名	参数类型	参数描述
alignContent	Alignment	设置所有子组件在容器内的对齐方式。默认值：Alignment.Center从API version 9开始，该接口支持在ArkTS卡片中使用。说明：该属性与通用属性align同时设置时，后设置的属性生效。

alignContent：设置子组件的对齐方式，通过另一种方式设置而已， Alignment 的讲解同上，就没有在说明。

四、List容器

列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。

说明

• 列表项ListItem是listItem的子项
• 列表项（ListItem）数量过多超出屏幕后，会自动提供滚动功能
• 列表项（ListItem）既可以纵向排列，也可以横向排列
• 注意list是容器，ListItem不是容器， ListItem中只能包含一个根组件，可以在里面先写一个跟组件，例如row容器，在编写内容

4.1.接口

接口说明：

List(value?:{space?: number | string, initialIndex?: number, scroller?: Scroller})

参数：

参数名	参数类型	必填	参数描述
space	number | string	否	子组件主轴方向的间隔。默认值：0说明：设置为除-1外其他负数或百分比时，按默认值显示。space参数值小于List分割线宽度时，子组件主轴方向的间隔取分割线宽度。
initialIndex	number	否	设置当前List初次加载时视口起始位置显示的item的索引值。默认值：0说明：设置为除-1外其他负数或超过了当前List最后一个item的索引值时视为无效取值，无效取值按默认值显示。
scroller	Scroller	否	可滚动组件的控制器。用于与可滚动组件进行绑定。说明：不允许和其他滚动类组件绑定同一个滚动控制对象。

4.2.属性

除支持通用属性外，还支持以下属性：

名称	参数类型	描述
listDirection	Axis	设置List组件排列方向。默认值：Axis.Vertical从API version 9开始，该接口支持在ArkTS卡片中使用。
divider	{strokeWidth: Length,color?:ResourceColor,startMargin?: Length,endMargin?: Length} | null	设置ListItem分割线样式，默认无分割线。- strokeWidth: 分割线的线宽。- color: 分割线的颜色。- startMargin: 分割线与列表侧边起始端的距离。- endMargin: 分割线与列表侧边结束端的距离。从API version 9开始，该接口支持在ArkTS卡片中使用。endMargin +startMargin 不能超过列宽度。startMargin和endMargin不支持设置百分比。List的分割线画在主轴方向两个子组件之间，第一个子组件上方和最后一个子组件下方不会绘制分割线。多列模式下，ListItem与ListItem之间的分割线起始边距从每一列的交叉轴方向起始边开始计算，其他情况从List交叉轴方向起始边开始计算。
scrollBar	BarState	设置滚动条状态。默认值：BarState.Off从API version 9开始，该接口支持在ArkTS卡片中使用。
cachedCount	number	设置列表中ListItem/ListItemGroup的预加载数量，其中ListItemGroup将作为一个整体进行计算，ListItemGroup中的所有ListItem会一次性全部加载出来。具体使用可参考减少应用白块说明。默认值：1从API version 9开始，该接口支持在ArkTS卡片中使用。说明：单列模式下，会在List显示的ListItem前后各缓存cachedCount个ListItem。多列模式下， 会在List显示的ListItem前后各缓存cachedCount*列数个ListItem。
editMode(deprecated)	boolean	声明当前List组件是否处于可编辑模式。可参考示例3实现删除选中的list项。从API version9开始废弃。默认值：false
edgeEffect	EdgeEffect	设置组件的滑动效果。默认值：EdgeEffect.Spring从API version 9开始，该接口支持在ArkTS卡片中使用。
chainAnimation	boolean	设置当前List是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：List内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。默认值：false- false：不启用链式联动。- true：启用链式联动。从API version 9开始，该接口支持在ArkTS卡片中使用。
multiSelectable8+	boolean	是否开启鼠标框选。默认值：false- false：关闭框选。- true：开启框选。从API version 9开始，该接口支持在ArkTS卡片中使用。
lanes9+	number | LengthConstrain	以列模式为例（listDirection为Axis.Vertical）:lanes用于决定List组件在交叉轴方向按几列布局。默认值：1规则如下：- lanes为指定的数量时，根据指定的数量与List组件的交叉轴尺寸除以列数作为列的宽度。- lanes设置了{minLength，maxLength}时，根据List组件的宽度自适应决定lanes数量（即列数），保证缩放过程中lane的宽度符合{minLength，maxLength}的限制。其中，minLength条件会被优先满足，即优先保证符合ListItem的交叉轴尺寸符合最小限制。- lanes设置了{minLength，maxLength}，如果父组件交叉轴方向尺寸约束为无穷大时，固定按一列排列，列宽度按显示区域内最大的ListItem计算。- ListItemGroup在多列模式下也是独占一行，ListItemGroup中的ListItem按照List组件的lanes属性设置值来布局。- lanes设置了{minLength，maxLength}时，计算列数会按照ListItemGroup的交叉轴尺寸计算。当ListItemGroup交叉轴尺寸与List交叉轴尺寸不一致时ListItemGroup中的列数与List中的列数可能不一样。该接口支持在ArkTS卡片中使用。
alignListItem9+	ListItemAlign	List交叉轴方向宽度大于ListItem交叉轴宽度 * lanes时，ListItem在List交叉轴方向的布局方式，默认为首部对齐。默认值：ListItemAlign.Start该接口支持在ArkTS卡片中使用。
sticky9+	StickyStyle	配合ListItemGroup组件使用，设置ListItemGroup中header和footer是否要吸顶或吸底。默认值：StickyStyle.None该接口支持在ArkTS卡片中使用。说明：sticky属性可以设置为 StickyStyle.Header | StickyStyle.Footer 以同时支持header吸顶和footer吸底。

ListItemAlign9+枚举说明：

名称	描述
Start	ListItem在List中，交叉轴方向首部对齐。
Center	ListItem在List中，交叉轴方向居中对齐。
End	ListItem在List中，交叉轴方向尾部对齐。

StickyStyle9+枚举说明：

名称	描述
None	ListItemGroup的header不吸顶，footer不吸底。
Header	ListItemGroup的header吸顶，footer不吸底。
Footer	ListItemGroup的footer吸底，header不吸顶。

说明

• List组件通用属性clip的默认值为true。

4.3.事件

名称	功能描述
onItemDelete(deprecated)(event: (index: number) => boolean)	当List组件在编辑模式时，点击ListItem右边出现的删除按钮时触发。从API version9开始废弃。- index: 被删除的列表项的索引值。
onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void)	列表滑动时触发。- scrollOffset: 每帧滚动的偏移量，List的内容向上滚动时偏移量为正，向下滚动时偏移量为负。- scrollState: 当前滑动状态。使用控制器调用ScrollEdge和ScrollToIndex时不会触发，其余情况有滚动就会触发该事件。从API version 9开始，该接口支持在ArkTS卡片中使用。
onScrollIndex(event: (start: number, end: number) => void)	列表滑动时触发。计算索引值时，ListItemGroup作为一个整体占一个索引值，不计算ListItemGroup内部ListItem的索引值。- start: 滑动起始位置索引值。- end: 滑动结束位置索引值。触发该事件的条件：列表初始化时会触发一次，List显示区域内第一个子组件的索引值或后一个子组件的索引值有变化时会触发。List的边缘效果为弹簧效果时，在List划动到边缘继续划动和松手回弹过程不会触发onScrollIndex事件。从API version 9开始，该接口支持在ArkTS卡片中使用。
onReachStart(event: () => void)	列表到达起始位置时触发。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：List初始化时如果initialIndex为0会触发一次，List滚动到起始位置时触发一次。List边缘效果为弹簧效果时，划动经过起始位置时触发一次，回弹回起始位置时再触发一次。
onReachEnd(event: () => void)	列表到底末尾位置时触发。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：List边缘效果为弹簧效果时，划动经过末尾位置时触发一次，回弹回末尾位置时再触发一次。
onScrollFrameBegin9+(event: (offset: number, state: ScrollState) => { offsetRemain })	列表开始滑动时触发，事件参数传入即将发生的滑动量，事件处理函数中可根据应用场景计算实际需要的滑动量并作为事件处理函数的返回值返回，列表将按照返回值的实际滑动量进行滑动。- offset：即将发生的滑动量，单位vp。- state：当前滑动状态。- offsetRemain：实际滑动量，单位vp。触发该事件的条件：手指拖动List、List惯性划动时每帧开始时触发；List超出边缘回弹、使用滚动控制器的滚动不会触发。该接口支持在ArkTS卡片中使用。说明：当listDirection的值为Axis.Vertical时，返回垂直方向滑动量，当listDirection的值为Axis.Horizontal时，返回水平方向滑动量。
onScrollStart9+(event: () => void)	列表滑动开始时触发。手指拖动列表或列表的滚动条触发的滑动开始时，会触发该事件。使用Scroller滑动控制器触发的带动画的滑动，动画开始时会触发该事件。该接口支持在ArkTS卡片中使用。
onScrollStop(event: () => void)	列表滑动停止时触发。手拖动列表或列表的滚动条触发的滑动，手离开屏幕并且滑动停止时会触发该事件；使用Scroller滑动控制器触发的带动画的滑动，动画停止会触发该事件。从API version 9开始，该接口支持在ArkTS卡片中使用。
onItemMove(event: (from: number, to: number) => boolean)	列表元素发生移动时触发。- from: 移动前索引值。- to: 移动后索引值。
onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => ((() => any) | void)	开始拖拽列表元素时触发。- itemIndex: 被拖拽列表元素索引值。
onItemDragEnter(event: (event: ItemDragInfo) => void)	拖拽进入列表元素范围内时触发。
onItemDragMove(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void)	拖拽在列表元素范围内移动时触发。- itemIndex: 拖拽起始位置。- insertIndex: 拖拽插入位置。
onItemDragLeave(event: (event: ItemDragInfo, itemIndex: number) => void)	拖拽离开列表元素时触发。- itemIndex: 拖拽离开的列表元素索引值。
onItemDrop(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void)	绑定该事件的列表元素可作为拖拽释放目标，当在列表元素内停止拖拽时触发。- itemIndex: 拖拽起始位置。- insertIndex: 拖拽插入位置。- isSuccess: 是否成功释放。说明：跨List拖拽时，当拖拽释放的位置绑定了onItemDrop时会返回true，否则为false。List内部拖拽时，isSuccess为onItemMove事件的返回值。

ScrollState枚举说明：

名称	描述
Idle	未滑动状态。
Scroll	手指拖动状态。
Fling	惯性滑动状态。

说明：

要使List处于可编辑模式需配合onItemDelete事件和ListItem的editable属性，即可编辑模式实现删除列表项功能，需满足以下条件：

• editMode属性设置为true。
• 绑定onItemDelete事件，且事件回调返回true。
• ListItem的editable属性设置为true。

实现ListItem拖拽，需满足以下条件：

• editMode属性设置为true。
• 绑定onDragStart事件，且事件回调中返回浮动UI布局。

4.4.案例

4.4.1.示例一：

@Entry
@Component
struct ListItemExample {
  private arr1:number[] = [0,1,2,3,4,5,6,7,8,9,11,12,13,14,15,16,17,18,19,20]
  build() {
    Column(){
      List({space:20, initialIndex:0}){ //initialIndex设置当前List初次加载时视口起始位置显示的item的索引值。默认值：0

        ForEach(this.arr1, (item)=>{
          ListItem(){
            Text('' + item)
              .width("100%") //宽
              .height(100)  //高
              .fontSize(16) //字体大小
              .textAlign(TextAlign.Center) //居中显示
              .borderRadius(10) //设置圆角半径
              .backgroundColor("#A9A9A9") //设置背景颜色
          }
          // 结束ForEach循环，并且指定item作为每个列表项的标识符。
        },item => item)
      }
      .listDirection(Axis.Vertical) //排列方向 Vertical垂直方向
      /**
       * 设置ListItem分割线样式，默认无分割线。
       * - strokeWidth: 分割线的线宽。
       * - color: 分割线的颜色。
       * - startMargin: 分割线与列表侧边起始端的距离。
       * - endMargin: 分割线与列表侧边结束端的距离。
       */
      .divider({strokeWidth:2, color: "#8FBC8F", startMargin:20, endMargin:20})
      .edgeEffect(EdgeEffect.Spring) //滑动到边缘无效果,默认值：EdgeEffect.Spring
      /**
       * 列表滑动时触发。
       * - start: 滑动起始位置索引值。
       * - end: 滑动结束位置索引值。
       */
      .onScrollIndex((start: number,end:number) => {
        console.info(`start: ${start}`)
        console.info(`end: ${end}`)
      })
      .width("90%")
    }
    .width("100%")
    .height("100%")
    .backgroundColor("#808080")
    .padding({top:10})
  }
}

预览效果如下：

4.4.2.示例二

@Entry
@Component
struct ListLanesExample  {
  @State arr1:number[] = [0,1,2,3,4,5,6,7,8,9,11,12,13,14,15,16,17,18,19,20,21]

  build() {
    Column(){
      List({space:20}){
        ForEach(this.arr1, (item)=>{
          ListItem(){
            Text("hi:"+item)
              .width("100%") //宽
              .height(100)  //高
              .fontSize(16) //字体大小
              .textAlign(TextAlign.Center) //居中显示
              .borderRadius(10) //设置圆角半径
              .backgroundColor("#A9A9A9") //设置背景颜色
          }
          .border({width:2, color: "#3CB371"})
          //结束ForEach循环，并且指定item作为每个列表项的标识符。可以不写
        },item=>item)
      }
      .height(360) //高
      .width("100%") //宽
      .border({width: 2, color: "#2F4F4F"}) //框线颜色和宽度

      /*
      * 设置了最小交叉轴长度为40vp，最大交叉轴长度为80vp,然后由于List没有设置listDirection,所以List的交叉轴方向为水平方向，
      * 如果列表的交叉轴方向上的大小 小于最小交叉轴长度的两倍，那么只能展示一列。
      * 如果将列表的交叉轴上的大小改成大于最小交叉轴长度的两倍，列数就会改变（）。
      */
      .lanes({minLength:40, maxLength:80})

      //一种是直接传一个number，比如上面的列表我想让它交叉轴方向上展示三个子项
      //.lanes(6)

      /**
       *
       * List交叉轴方向宽度大于ListItem交叉轴宽度 * lanes时，ListItem在List交叉轴方向的布局方式，默认为首部对齐。
       * 默认值：ListItemAlign.Start
       */
      .alignListItem(ListItemAlign.Start)

    }
    .width("100%")
    .height("100%")
    .padding(20)
  }
}

预览效果如下：

4.4.3.示例三

@Entry
@Component
struct ListExample02 {
  @State arr1:number[] = [0,1,2,3,4,5,6,7,8,9,11,12,13,14,15,16,17,18,19,20]
  @State editFlag:boolean = false

  build() {
    //采用层叠布局（创建column容器、然后创建button按钮堆叠在column容器上面）, TopStart子组件在 Stack 内靠左上角对齐
    Stack({alignContent:Alignment.TopStart}){
      //创建column容器
      Column(){
        List({space:20, initialIndex:0}){
          ForEach(this.arr1, (item, index:number)=>{
            ListItem(){
              //弹性布局（水平排列）,也可以采用row容器
              Flex({direction:FlexDirection.Row}){
                Text(""+item)
                  .width("100%")
                  .height(80)
                  .fontSize(20)
                  .textAlign(TextAlign.Center)
                  .borderRadius(10)
                  .backgroundColor("#F9F9FA")
                  .flexShrink(1)

                if(this.editFlag){
                  //如果editFlag为true则显示按钮
                  Button(){
                    Text("delete").fontSize(16).borderRadius(5)
                  }
                  .width("30%")
                  .height(40)
                  .onClick(()=>{
                    //输出打印到控制太
                    console.info("删除元素："+this.arr1[index])
                    //删除元素
                    this.arr1.splice(index,1)
                    //输出剩余元素
                    console.info(JSON.stringify(this.arr1))
                    //修改值为false
                    this.editFlag = false
                    //是否启用按钮按下时的切换效果。当状态设置为 false 时，切换效果无效。
                  }).stateEffect(true)
                }
              }
            }
          })
        }.width("90%")
      }.width("100%")


      //创建button按钮
      Button("edit list").onClick(()=>{
        //点击修改修改值为true
        this.editFlag = true
      }).margin({top:5, left:20})
    }
    .size({height:"100%", width:"100%"})
    .backgroundColor("#E1E1E1")
    .padding({top:10})
  }
}

预览效果如下：

4.4.4.示例四

章节一中的内容，商品如果比较多的时候无法下拉选择的，只能展示一行，这里采用List容器来解决这个问题，如下：

class Item{
  //定位属性
  name: string
  image: any
  price: number

  constructor(name: string, image: any, price: number) {
    this.name = name
    this.image = image
    this.price = price
  }
}

@Entry
@Component
struct ListExample {
  private items:Array<Item> = [
    new Item("HUAWEI Mate 60 Pro",$r("app.media.mate60"),  7999.00),
    new Item("HUAWEI MatePad Pro",$r("app.media.MatePadPro"),4299.00),
    new Item("HUAWEI WATCH GT 4", $r("app.media.WATCHGT4"), 1538.00),
    new Item("HUAWEI FreeBuds Pro 3", $r("app.media.FreeBudsPro3"), 1499.00),
    new Item("HUAWEI MateBook 14s", $r("app.media.MateBook14s"), 5299.00),
    new Item("HUAWEI FreeBuds Pro 3", $r("app.media.FreeBudsPro3"), 1499.00),
    new Item("HUAWEI MateBook 14s", $r("app.media.MateBook14s"), 5299.00),
    new Item("HUAWEI Mate 60",$r("app.media.mate60"),  5999.00),
    new Item("HUAWEI MatePad2 Pro",$r("app.media.MatePadPro"),4599.00),
    new Item("HUAWEI WATCH GT 5", $r("app.media.WATCHGT4"), 1638.00),
    new Item("HUAWEI FreeBuds Pro 4", $r("app.media.FreeBudsPro3"), 1699.00),
  ]
  build() {
    Column({space:8}){
      Row(){
        Text("商品列表")
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .width("100%")
      .padding(20)

      List({space:10}){
        ForEach(this.items,(item: Item)=>{
          ListItem(){
            Row({space:10}){
              Image(item.image).width(100)
              Column({space:4}){
                Text(item.name).fontSize(15).fontWeight(FontWeight.Bold)
                Text(`原价：￥ ${item.price}`).fontColor("#F36").fontSize(18)
              }
              .height("100%")
              .alignItems(HorizontalAlign.Start)
            }
            .width("90%")  //设置宽度
            .height(120)    //设置高度
            .justifyContent(FlexAlign.SpaceBetween) //设置主轴方向主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。
            .backgroundColor("#FFFFFF") //设置背景为白色
            .borderRadius(10) //这是圆角班级
            .padding(20) //内边距
          }
        })
      }
        .alignListItem(ListItemAlign.Center) //ListItem在List交叉轴方向的布局方式，默认为首部对齐。这里改为居中对齐
        .height("100%")
        .width("100%")

    }
    .width("100%")
    .height("100%")
    .backgroundColor("#D3D3D3")
  }
}

预览效果如下：