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

最新推荐文章于 2024-05-11 11:29:42 发布
最新推荐文章于 2024-05-11 11:29:42 发布
阅读量1.8k 收藏 21
点赞数 29
分类专栏： HarmoneyOS 文章标签： harmonyos typescript 前端 网络 鸿蒙 鸿蒙系统 华为
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42533732/article/details/135538302
版权

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

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

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

1.1.主轴和纵轴概念

什么是主轴和纵轴？

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

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

如下图所示：

img

容器属性说明：

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

1.2.Column

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

1.2.1.Column定义

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

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

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

参数名参数类型必填参数描述
spacestring | 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})      //外上、下边距
    }
  }
}

预览效果如下：

img

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

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

如下图所示：

img

案例代码如下：

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

预览效果如下：

img

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的数字，或者可以转换为数字的字符串。

预览效果如下：

img

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

预览效果如下：

img

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

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

示意图如下：

img

案例代码如下：

@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 参数不起作用。预览效果如下：

img

1.4.Blank

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

1.4.1.Blank定义

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

Blank(min?: number | string)

参数：

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

1.4.2.Blank属性

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

名称参数类型描述
colorResourceColor设置空白填充的填充颜色。默认值：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%"})
  }
}

预览效果如下：

img

Blank 的特点：

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

1.5.完整案例演示

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

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

1.5.1.需求如下

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

img

分析页面元素构成：

img

1.5.2.实现思路

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

img

代码如下：

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

  }
}

预览效果如下：

img

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")

  }
}

预览效果如下：

img

上面的内容虽然可以展示商品，但是商品的数量过多，无法展示出来，这时候就要采用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相反方向进行布局。

示例图如下：

img

说明：

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%")
  }
}

预览效果如下：

img

2.2.2.wrap

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

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

案例代码如下：

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

预览效果如下：

img

2.2.3.justifyContent

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

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

如下图所示：

img

案例代码如下：

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

预览效果如下：

img

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

预览效果如下：

img

2.2.5.alignContent

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

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

案例代码如下：

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

预览结果如下：

img

无处安放的波澜
关注
  • 29
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex容器布局
zhangjiaming02的博客
06-13 339
flex容器布局
【鸿蒙HarmonyOS开发笔记】ArkUI常用组件介绍汇总（更新中）
温的打怪之旅
03-25 794
此文总结开发中用到的一些常用组件，便于查阅，此文持续更新，闲的没事就更。
第八篇【传奇开心果短博文系列】鸿蒙开发技术点案例示例：酷炫简单的ArkUI 动画和过渡效果_arkuilineargradient(4)
最新发布
2401_84862118的博客
05-11 431
8.抖动效果（Shake）：抖动效果可以使元素在短时间内快速震动，给用户一种物体在颤动或抖动的感觉。这种效果通常用于吸引用户的注意力，或者为某个特定状态或事件提供视觉反馈。9.闪烁效果（Flash）：闪烁效果是指元素在一段时间内快速地交替显示和隐藏，以产生闪烁的效果。这种效果常用于提示用户某个重要的信息或状态发生变化，或者用于制作一些特殊的视觉效果。10.模糊效果（Blur）：模糊效果可以使元素的内容看起来模糊不清，营造出一种柔和、朦胧的视觉效果。
Android属性动画Property Animation系列三之LayoutTransition（布局容器动画）
热门推荐
废墟的树的专栏
05-25 1万+
在上一篇中我们学习了属性动画的ObjectAnimator使用，不了解的可以看看 Android属性动画Property Animation系列一之ObjectAnimator。这一篇我们来学点新的东西。做项目的时候应该碰到这种问题：根据不同条件显示或者隐藏一个控件或者布局，我们能想到的第一个方法就是 调用View.setVisibility（）方法。虽然实现了显示隐藏效果，但是总感觉这样的显示隐藏
布局容器
weixin_30457551的博客
04-11 178
　　bootstrap需要为页面和栅格系统包裹一个.container容器。我们提供了两个作为用处的类。注意由于pidding等属性的原因这两种容器不能相互嵌套。 　　.container类用于固定宽度并支持响应式布局容器 　　 <div class="container"> 必须要有container这个 ... </div> 　　.conta...
布局 容器
qq_41301428的博客
11-22 216
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>布局容器</title> <link rel="stylesheet" type="text/css" href="../static/bootstrap/css/bootstrap.min.css"> <style> .con
HarmonyOS 4.0小米6刷机包
02-19
你们要的小米6鸿蒙4.0来辣！！！基于毛子GSI开包制作 bug：一堆，懒得挨个说了娱乐娱乐想刷可以，日用就算了，别刷.
HarmonyOS应用开发-ets-video组件案例.doc
05-26
该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
HarmonyOS/OpenHarmony应用开发-ArkOpenHarmony应用开发-ArkTS画布组件Canvas.doc
03-02
HarmonyOS/OpenHarmony 应用开发-ArkTS 画布组件 Canvas 是 ArkTS 框架中的一种重要组件，用于自定义绘制图形。该组件从 API Version 8 开始支持，后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ...
HarmonyOS应用开发-常用组件与布局
11-05
简单的登录页面
HarmonyOS 4.0 应⽤开发 配合视频和文档相关代码
03-20
HarmonyOS 4.0 应⽤开发 配合视频和文档相关代码HarmonyOS 4.0 应⽤开发 配合视频和文档相关代码HarmonyOS 4.0 应⽤开发 配合视频和文档相关代码
Container布局容器
SSS_Sophia的博客
03-06 478
Container布局容器
Android布局容器
kieven2008的专栏
04-25 8725
一、.线性布局 LinearLayout  1.1方向控制：android:orientation: vertical,horizontal, 运行时动态改变方向setOrientation(),并传入HORIZONTALAK VERTICAL参数。  1.2填充模型：android:layout_width 和android:layout_height特性。这两个特性的值可能是以下3种形式：   a.具体的大小 px,dip,..   b.wrap_content   c.fill_parent 1.3权
布局和容器
azhou2012的专栏
03-29 631
布局和容器 布局系统是Ext JS的最强大的地区之一。它可以处理的大小和每一个定位在您的应用程序的组件。本指南介绍如何开始布局的基础。 容器 一个Ext JS的应用程序的UI 组件小号（见组件组件指南。一个容器是一个组件，它可以包含其他组件的特殊类型。一个典型的Ext JS的应用程序是由几层嵌套组件 最常用的容器是小组。让我们来看看如何集装箱允许
WPF的5种布局容器
weixin_46021786的博客
07-11 2460
@TOC WPF 5种布局容器的使用场景Grid意思为网格，是以网状表格的形式对元素进行布局，控件被放到设定好的小格子里面，每个小格子可以按照自己设定的比例进行全局缩放，对于制作自适应界面来说比较方便。Grid容器相比于其他四个容器使用更广，功能更强大。下面展示代码。 StackPanel布局的特点及使用 将子元素排列成水平或垂直的一行，属于布局控件，通俗说叫栈式面板。可将包含的元素在水平或垂直方向排成一条线，当移除一个元素后，后面的元素会自动向前填充空缺。 效果图片 代码展示 WrapPanel布局
【WPF】布局基础-6种常见布局容器
放纵小开爱的博客
10-24 1678
在 WPF (Windows Presentation Foundation) 中，是用于。不同的容器提供不同的布局和排列方式，以满足不同的设计需求。
ElementUI 布局容器Container
爱喝水的qdy的博客
11-18 3564
目录官方地址布局容器组件常见布局测试用的CSS样式常见布局1常见布局2常见布局3常见布局3常见布局4常见布局5常见布局6实例templatestylejsel-container 属性el-header 属性el-footer 属性el-aside 属性 官方地址 https://element.eleme.io/#/zh-CN/component/container 布局容器组件 布局容器组件采...
[android]布局（容器）简介和使用方法
guomeijuan916的专栏
09-01 2156
布局（控件）---用来存放控件，并控制他们的位置排列 inearLayout---线性布局--控件安书序排成一行或者一列 属性：          android:layout_width=""---布局宽          android:layout_height=::---布局高          android:orientation=""---设定布局中的控件的排列方式
harmonyos4.0开发 pdf
01-06
HarmonyOS 4.0是华为推出的一款操作系统，它支持多种设备，如智能手机、平板电脑和智能家居设备等。在HarmonyOS 4.0中，开发者可以利用PDF开发功能来创建和处理PDF文件。 通过HarmonyOS 4.0的PDF开发功能，开发者可以实现以下功能： 1. PDF文件的创建：开发者可以使用HarmonyOS 4.0提供的API来创建PDF文件，可以自定义文件的尺寸、页面布局和文本样式等。 2. PDF文件的编辑：开发者可以调用HarmonyOS 4.0的API来编辑已有的PDF文件，包括添加、删除和修改页面内容，插入图片和表格等。 3. PDF文件的导出和分享：开发者可以利用HarmonyOS 4.0的API将PDF文件导出为其他格式，如图片或文本文件，以便在其他应用或设备上使用。同时，开发者还可以通过HarmonyOS 4.0的分享功能将PDF文件分享给其他用户。 4. PDF文件的阅读和搜索：利用HarmonyOS 4.0的PDF功能，用户可以在支持HarmonyOS 4.0的设备上阅读、搜索和标注PDF文件，提高工作和学习的效率。 总的来说，HarmonyOS 4.0的PDF开发功能为开发者提供了创建、编辑和处理PDF文件的能力，同时也让用户能够方便地阅读和分享PDF文件。这为应用开发者和用户提供了更多的选择和便利，同时也推动了智能设备之间的互联互通。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值