# 5.2:弹性布局容器(Flex)

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

# 5.2.1:Flex定义介绍

interface FlexInterface {
  (value?: FlexOptions): FlexAttribute;
}

declare interface FlexOptions {
  direction?: FlexDirection;
  wrap?: FlexWrap;
  justifyContent?: FlexAlign;
  alignItems?: ItemAlign;
  alignContent?: FlexAlign;
}
1
2
3
4
5
6
7
8
9
10
11
  • value:设置子组件的排列样式, FlexOptions 定义了以下几种样式:

    • direction:设置子组件的的排列方向即主轴方向, FlexDirection 定义了以下4种排列方式:

      • Row(默认值):子组件水平排列,即主轴为水平方向纵轴为竖直方向,子组件由左向右排列。

        5_2_1
        Flex({direction: FlexDirection.Row}) {
          Text('Text1')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#aabbcc")
          Text('Text2')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#bbaacc")
          Text('Text3')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#ccaabb")
          Text('Text4')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#abcabc")
        }
        .width('100%')
        .height(60)
        .backgroundColor(Color.Pink)
        
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21

        样例运行结果如下图所示:

        5_2_1_1
      • RowReverse:子组件水平排列,即主轴为水平方向纵轴为竖直方向,子组件由右向左排列。

        5_2_2
        Flex({direction: FlexDirection.RowReverse}) {
          Text('Text1')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#aabbcc")
          Text('Text2')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#bbaacc")
          Text('Text3')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#ccaabb")
          Text('Text4')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#abcabc")
        }
        .width('100%')
        .height(60)
        .backgroundColor(Color.Pink)
        
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21

        样例运行结果如下图所示:

        5_2_2_1
      • Column:子组件竖直排列,即主轴为垂直方向,起点在上边,子组件由上到下排列。

        5_2_3
        Flex({direction: FlexDirection.Column}) {
          Text('Text1')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#aabbcc")
          Text('Text2')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#bbaacc")
          Text('Text3')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#ccaabb")
          Text('Text4')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#abcabc")
        }
        .width('100%')
        .height(220)
        .backgroundColor(Color.Pink)
        
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21

        样例运行结果如下图所示:

        5_2_3_1
      • ColumnReverse:子组件竖直排列,即主轴为垂直方向,起点在下边,子组件由下到上排列。

        5_2_4
        Flex({direction: FlexDirection.ColumnReverse}) {
          Text('Text1')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#aabbcc")
          Text('Text2')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#bbaacc")
          Text('Text3')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#ccaabb")
          Text('Text4')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#abcabc")
        }
        .width('100%')
        .height(220)
        .backgroundColor(Color.Pink)
        
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21

        样例运行结果如下图所示:

        5_2_4_1
  • wrap:设置子组件是单行/列还是多行/列排序, FlexWrap 提供了以下3种类型:

    • NoWrap(默认值):子组件单行/列排序,子组件不允许超出容器。

      Flex({direction: FlexDirection.Row, wrap: FlexWrap.NoWrap}) {
        Text('Text1')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#aabbcc")
        Text('Text2')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#bbaacc")
        Text('Text3')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#ccaabb")
        Text('Text4')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#abcabc")
        Text('Text5')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#cabcab")
        Text('Text6')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#aabbcc")
      }
      .width('100%')
      .height(60)
      .backgroundColor(Color.Pink)
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      5_2_6_1
    • Wrap:子组件多行/列排序,子组件允许超出容器。

      5_2_6_2
    • WrapReverse:子组件反向多行/列排序,子组件允许超出容器。

      Flex({direction: FlexDirection.Row, wrap: FlexWrap.WrapReverse}) {
        Text('Text1')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#aabbcc")
        Text('Text2')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#bbaacc")
        Text('Text3')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#ccaabb")
        Text('Text4')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#abcabc")
        Text('Text5')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#aabbcc")
        Text('Text6')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#cabcab")
      }
      .width('100%')
      .height(60)
      .backgroundColor(Color.Pink)
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      5_2_6_3
  • justifyContent:设置子组件在主轴上的对齐方式, FlexAlign 提供了以下 6 种对齐方式:

    • Start(默认值):元素在主轴方向首端对齐, 第一个元素与行首对齐,同时后续的元素与前一个对齐。

      Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start}) {
        Text('Text1')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#aabbcc")
        Text('Text2')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#bbaacc")
        Text('Text3')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#ccaabb")
        Text('Text4')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#abcabc")
      }
      .width('100%')
      .height(60)
      .backgroundColor(Color.Pink)
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      5_2_7
    • Center:元素在主轴方向中心对齐,第一个元素与行首的距离与最后一个元素与行尾距离相同。

        Text('Text1')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#aabbcc")
        Text('Text2')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#bbaacc")
        Text('Text3')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#ccaabb")
        Text('Text4')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#abcabc")
      }
      .width('100%')
      .height(60)
      .backgroundColor(Color.Pink)
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      5_2_8
    • End:元素在主轴方向尾部对齐, 最后一个元素与行尾对齐,其他元素与后一个对齐。

      Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.End}) {
        Text('Text1')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#aabbcc")
        Text('Text2')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#bbaacc")
        Text('Text3')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#ccaabb")
        Text('Text4')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#abcabc")
      }
      .width('100%')
      .height(60)
      .backgroundColor(Color.Pink)
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      5_2_9
    • SpaceBetweenFlex 主轴方向均匀分配弹性元素,相邻元素之间距离相同。 第一个元素与行首对齐,最后一个元素与行尾对齐。

      Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween}) {
        Text('Text1')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#aabbcc")
        Text('Text2')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#bbaacc")
        Text('Text3')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#ccaabb")
        Text('Text4')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#abcabc")
      }
      .width('100%')
      .height(60)
      .backgroundColor(Color.Pink)
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      5_2_10
    • SpaceAroundFlex 主轴方向均匀分配弹性元素,相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。

      Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround}) {
        Text('Text1')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#aabbcc")
        Text('Text2')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#bbaacc")
        Text('Text3')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#ccaabb")
        Text('Text4')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#abcabc")
      }
      .width('100%')
      .height(60)
      .backgroundColor(Color.Pink)
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      5_2_11
    • SpaceEvenlyFlex 主轴方向元素等间距布局, 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

      Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceEvenly}) {
        Text('Text1')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#aabbcc")
        Text('Text2')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#bbaacc")
        Text('Text3')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#ccaabb")
        Text('Text4')
          .fontSize(16)
          .padding(10)
          .backgroundColor("#abcabc")
      }
      .width('100%')
      .height(60)
      .backgroundColor(Color.Pink)
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      5_2_12
  • alignItems:设置子组件在纵轴方向上的排列方式, ItemAlign 定义了以下 6 种排列方式:

    • Auto:自动布局,简单样例如下所示:

      Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Auto}) {
        Text('Text1')
          .fontSize(16)
          .size({width: 50, height: 20})
          .backgroundColor("#aabbcc")
        Text('Text2')
          .fontSize(16)
          .size({width: 60, height: 30})
          .backgroundColor("#bbaacc")
        Text('Text3')
          .fontSize(16)
          .size({width: 70, height: 40})
          .backgroundColor("#ccaabb")
        Text('Text4')
          .fontSize(16)
          .size({width: 80, height: 50})
          .backgroundColor("#abcabc")
      }
      .width('100%')
      .height(60)
      .backgroundColor(Color.Pink)
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21

      运行结果如下所示:

      5_2_14
    • Start:居左对齐,简单样例如下所示:

      Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Start}) {
        Text('Text1')
          .fontSize(16)
          .size({width: 50, height: 20})
          .backgroundColor("#aabbcc")
        Text('Text2')
          .fontSize(16)
          .size({width: 60, height: 30})
          .backgroundColor("#bbaacc")
        Text('Text3')
          .fontSize(16)
          .size({width: 70, height: 40})
          .backgroundColor("#ccaabb")
        Text('Text4')
          .fontSize(16)
          .size({width: 80, height: 50})
          .backgroundColor("#abcabc")
      }
      .width('100%')
      .height(60)
      .backgroundColor(Color.Pink)
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      5_2_15
    • Center:居中对齐,简单样例如下所示:

      Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center}) {
        Text('Text1')
          .fontSize(16)
          .size({width: 50, height: 20})
          .backgroundColor("#aabbcc")
        Text('Text2')
          .fontSize(16)
          .size({width: 60, height: 30})
          .backgroundColor("#bbaacc")
        Text('Text3')
          .fontSize(16)
          .size({width: 70, height: 40})
          .backgroundColor("#ccaabb")
        Text('Text4')
          .fontSize(16)
          .size({width: 80, height: 50})
          .backgroundColor("#abcabc")
      }
      .width('100%')
      .height(60)
      .backgroundColor(Color.Pink)
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      5_2_16
    • End:居右对齐,简单样例如下所示:

      Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.End}) {
        Text('Text1')
          .fontSize(16)
          .size({width: 50, height: 20})
          .backgroundColor("#aabbcc")
        Text('Text2')
          .fontSize(16)
          .size({width: 60, height: 30})
          .backgroundColor("#bbaacc")
        Text('Text3')
          .fontSize(16)
          .size({width: 70, height: 40})
          .backgroundColor("#ccaabb")
        Text('Text4')
          .fontSize(16)
          .size({width: 80, height: 50})
          .backgroundColor("#abcabc")
      }
      .width('100%')
      .height(60)
      .backgroundColor(Color.Pink)
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      5_2_17
    • Baseline:基线对齐,简单样例如下所示:

      Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Baseline}) {
        Text('Text1')
          .fontSize(16)
          .size({width: 50, height: 20})
          .backgroundColor("#aabbcc")
        Text('Text2')
          .fontSize(16)
          .size({width: 60, height: 30})
          .backgroundColor("#bbaacc")
        Text('Text3')
          .fontSize(16)
          .size({width: 70, height: 40})
          .backgroundColor("#ccaabb")
        Text('Text4')
          .fontSize(16)
          .size({width: 80, height: 50})
          .backgroundColor("#abcabc")
      }
      .width('100%')
      .height(60)
      .backgroundColor(Color.Pink)
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      5_2_18
    • Stretch(默认值)

      Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Stretch}) {
        Text('Text1')
          .fontSize(16)
          .size({width: 50, height: 20})
          .backgroundColor("#aabbcc")
        Text('Text2')
          .fontSize(16)
          .size({width: 60, height: 30})
          .backgroundColor("#bbaacc")
        Text('Text3')
          .fontSize(16)
          .size({width: 70, height: 40})
          .backgroundColor("#ccaabb")
        Text('Text4')
          .fontSize(16)
          .size({width: 80, height: 50})
          .backgroundColor("#abcabc")
      }
      .width('100%')
      .height(60)
      .backgroundColor(Color.Pink)
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      5_2_19
  • alignContent:当纵轴有额外的空间时,多行内容的对齐方式。该属性仅在 wrap 属性为 Wrap 或者 WrapReverse 时才生效, FlexAlign 定义了以下 6 种对齐方式:

    • Start(默认值):设置子组件在纵轴方向首部对齐。

      Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Start}) {
        Text('Text1')
          .fontSize(16)
          .size({width: 90, height: 40})
          .backgroundColor("#aabbcc")
        Text('Text2')
          .fontSize(16)
          .size({width: 90, height: 40})
          .backgroundColor("#bbaacc")
        Text('Text3')
          .fontSize(16)
          .size({width: 90, height: 40})
          .backgroundColor("#ccaabb")
        Text('Text4')
          .fontSize(16)
          .size({width: 90, height: 40})
          .backgroundColor("#abcabc")
      }
      .width('100%')
      .height(120)
      .backgroundColor(Color.Pink)
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      5_2_20
    • Center:设置子组件在纵轴方向居中对齐。

      Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Center}) {
        Text('Text1')
          .fontSize(16)
          .size({width: 90, height: 40})
          .backgroundColor("#aabbcc")
        Text('Text2')
          .fontSize(16)
          .size({width: 90, height: 40})
          .backgroundColor("#bbaacc")
        Text('Text3')
          .fontSize(16)
          .size({width: 90, height: 40})
          .backgroundColor("#ccaabb")
        Text('Text4')
          .fontSize(16)
          .size({width: 90, height: 40})
          .backgroundColor("#abcabc")
      }
      .width('100%')
      .height(120)
      .backgroundColor(Color.Pink)
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      5_2_21
    • End:设置子组件在纵轴方向尾部对齐。

      Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent: FlexAlign.End}) {
        Text('Text1')
          .fontSize(16)
          .size({width: 90, height: 40})
          .backgroundColor("#aabbcc")
        Text('Text2')
          .fontSize(16)
          .size({width: 90, height: 40})
          .backgroundColor("#bbaacc")
        Text('Text3')
          .fontSize(16)
          .size({width: 90, height: 40})
          .backgroundColor("#ccaabb")
        Text('Text4')
          .fontSize(16)
          .size({width: 90, height: 40})
          .backgroundColor("#abcabc")
      }
      .width('100%')
      .height(120)
      .backgroundColor(Color.Pink)
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      5_2_22
    • SpaceBetween:设置子组件在纵轴方向等间距布局。

      Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceBetween}) {
        Text('Text1')
          .fontSize(16)
          .size({width: 90, height: 40})
          .backgroundColor("#aabbcc")
        Text('Text2')
          .fontSize(16)
          .size({width: 90, height: 40})
          .backgroundColor("#bbaacc")
        Text('Text3')
          .fontSize(16)
          .size({width: 90, height: 40})
          .backgroundColor("#ccaabb")
        Text('Text4')
          .fontSize(16)
          .size({width: 90, height: 40})
          .backgroundColor("#abcabc")
      }
      .width('100%')
      .height(120)
      .backgroundColor(Color.Pink)
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      5_2_23
    • SpaceAround:设置子组件在纵轴方向间距布局,并且首尾子组件到 Flex 的间距是子组件间距的一半。

      Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround}) {
        Text('Text1')
          .fontSize(16)
          .size({width: 90, height: 40})
          .backgroundColor("#aabbcc")
        Text('Text2')
          .fontSize(16)
          .size({width: 90, height: 40})
          .backgroundColor("#bbaacc")
        Text('Text3')
          .fontSize(16)
          .size({width: 90, height: 40})
          .backgroundColor("#ccaabb")
        Text('Text4')
          .fontSize(16)
          .size({width: 90, height: 40})
          .backgroundColor("#abcabc")
      }
      .width('100%')
      .height(120)
      .backgroundColor(Color.Pink)
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      5_2_24
    • SpaceEvenly:设置子组件在纵轴方向等间距布局,并且首尾子组件到 Flex 的间距子组件之间的间距都相等。

      Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceEvenly}) {
        Text('Text1')
          .fontSize(16)
          .size({width: 90, height: 40})
          .backgroundColor("#aabbcc")
        Text('Text2')
          .fontSize(16)
          .size({width: 90, height: 40})
          .backgroundColor("#bbaacc")
        Text('Text3')
          .fontSize(16)
          .size({width: 90, height: 40})
          .backgroundColor("#ccaabb")
        Text('Text4')
          .fontSize(16)
          .size({width: 90, height: 40})
          .backgroundColor("#abcabc")
      }
      .width('100%')
      .height(120)
      .backgroundColor(Color.Pink)
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      5_2_25

# 5.2.2:小结

本节简单介绍了 Flex 的使用方式,它的使用很灵活,读者熟练掌握各属性的渲染特性后可以根据设置参数构建出复杂的UI布局。

(adsbygoogle = window.adsbygoogle || []).push({});
请作者喝杯咖啡

津公网安备 12011402001367号

津ICP备2020008934号-2