彈性方式布局子組件的容器組件

2024-01-22 17:49 更新
說明
  • 該組件從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標單獨標記該內(nèi)容的起始版本。
  • Flex組件在渲染時存在二次布局過程，因此在對性能有嚴格要求的場景下建議使用Column、Row代替。
  • Flex組件主軸默認不設(shè)置時撐滿父容器，Column、Row組件主軸不設(shè)置時默認是跟隨子節(jié)點大小。

權(quán)限列表

無

子組件

可以包含子組件。

接口

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

標準Flex布局容器。詳細指導請參考彈性布局。

從API version 9開始，該接口支持在ArkTS卡片中使用。

參數(shù)：

參數(shù)名

參數(shù)類型

必填

默認值

參數(shù)描述

direction

FlexDirection

否

FlexDirection.Row

子組件在Flex容器上排列的方向，即主軸的方向。

wrap

FlexWrap

否

FlexWrap.NoWrap

Flex容器是單行/列還是多行/列排列。

說明：

在多行布局時，通過交叉軸方向，確認新行堆疊方向。

justifyContent

FlexAlign

否

FlexAlign.Start

所有子組件在Flex容器主軸上的對齊格式。

alignItems

ItemAlign

否

ItemAlign.Start

所有子組件在Flex容器交叉軸上的對齊格式。

alignContent

FlexAlign

否

FlexAlign.Start

交叉軸中有額外的空間時，多行內(nèi)容的對齊方式。僅在wrap為Wrap或WrapReverse下生效。

示例

示例1

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct FlexExample1 {
  5.   build() {
  6.     Column() {
  7.       Column({ space: 5 }) {
  8.         Text('direction:Row').fontSize(9).fontColor(0xCCCCCC).width('90%')
  9.         Flex({ direction: FlexDirection.Row }) { // 子組件在容器主軸上行布局
  10.           Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
  11.           Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
  12.           Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
  13.           Text('4').width('20%').height(50).backgroundColor(0xD2B48C)
  14.         }
  15.         .height(70)
  16.         .width('90%')
  17.         .padding(10)
  18.         .backgroundColor(0xAFEEEE)
  19. 

  20.         Text('direction:RowReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
  21.         Flex({ direction: FlexDirection.RowReverse }) { // 子組件在容器主軸上反向行布局
  22.           Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
  23.           Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
  24.           Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
  25.           Text('4').width('20%').height(50).backgroundColor(0xD2B48C)
  26.         }
  27.         .height(70)
  28.         .width('90%')
  29.         .padding(10)
  30.         .backgroundColor(0xAFEEEE)
  31. 

  32.         Text('direction:Column').fontSize(9).fontColor(0xCCCCCC).width('90%')
  33.         Flex({ direction: FlexDirection.Column }) { // 子組件在容器主軸上列布局
  34.           Text('1').width('100%').height(40).backgroundColor(0xF5DEB3)
  35.           Text('2').width('100%').height(40).backgroundColor(0xD2B48C)
  36.           Text('3').width('100%').height(40).backgroundColor(0xF5DEB3)
  37.           Text('4').width('100%').height(40).backgroundColor(0xD2B48C)
  38.         }
  39.         .height(160)
  40.         .width('90%')
  41.         .padding(10)
  42.         .backgroundColor(0xAFEEEE)
  43. 

  44.         Text('direction:ColumnReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
  45.         Flex({ direction: FlexDirection.ColumnReverse }) { // 子組件在容器主軸上反向列布局
  46.           Text('1').width('100%').height(40).backgroundColor(0xF5DEB3)
  47.           Text('2').width('100%').height(40).backgroundColor(0xD2B48C)
  48.           Text('3').width('100%').height(40).backgroundColor(0xF5DEB3)
  49.           Text('4').width('100%').height(40).backgroundColor(0xD2B48C)
  50.         }
  51.         .height(160)
  52.         .width('90%')
  53.         .padding(10)
  54.         .backgroundColor(0xAFEEEE)
  55.       }.width('100%').margin({ top: 5 })
  56.     }.width('100%')
  57.   }
  58. }

示例2

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct FlexExample2 {
  5.   build() {
  6.     Column() {
  7.       Column({ space: 5 }) {
  8.         Text('Wrap').fontSize(9).fontColor(0xCCCCCC).width('90%')
  9.         Flex({ wrap: FlexWrap.Wrap }) { // 子組件多行布局
  10.           Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
  11.           Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
  12.           Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
  13.         }
  14.         .width('90%')
  15.         .padding(10)
  16.         .backgroundColor(0xAFEEEE)
  17. 

  18.         Text('NoWrap').fontSize(9).fontColor(0xCCCCCC).width('90%')
  19.         Flex({ wrap: FlexWrap.NoWrap }) { // 子組件單行布局
  20.           Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
  21.           Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
  22.           Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)
  23.         }
  24.         .width('90%')
  25.         .padding(10)
  26.         .backgroundColor(0xAFEEEE)
  27. 

  28.         Text('WrapReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
  29.         Flex({ wrap: FlexWrap.WrapReverse , direction:FlexDirection.Row }) { // 子組件反向多行布局
  30.           Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
  31.           Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
  32.           Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
  33.         }
  34.         .width('90%')
  35.         .height(120)
  36.         .padding(10)
  37.         .backgroundColor(0xAFEEEE)
  38.       }.width('100%').margin({ top: 5 })
  39.     }.width('100%')
  40.   }
  41. }

示例3

  1. // xxx.ets
  2. @Component
  3. struct JustifyContentFlex {
  4.   justifyContent : number = 0;
  5. 

  6.   build() {
  7.     Flex({ justifyContent: this.justifyContent }) {
  8.       Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
  9.       Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
  10.       Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
  11.     }
  12.     .width('90%')
  13.     .padding(10)
  14.     .backgroundColor(0xAFEEEE)
  15.   }
  16. }
  17. 

  18. @Entry
  19. @Component
  20. struct FlexExample3 {
  21.   build() {
  22.     Column() {
  23.       Column({ space: 5 }) {
  24.         Text('justifyContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%')
  25.         JustifyContentFlex({ justifyContent: FlexAlign.Start }) // 子組件在容器主軸上首端對齊
  26. 

  27.         Text('justifyContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%')
  28.         JustifyContentFlex({ justifyContent: FlexAlign.Center }) // 子組件在容器主軸上居中對齊
  29. 

  30.         Text('justifyContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%')
  31.         JustifyContentFlex({ justifyContent: FlexAlign.End }) // 子組件在容器主軸上尾端對齊
  32. 

  33.         Text('justifyContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%')
  34.         JustifyContentFlex({ justifyContent: FlexAlign.SpaceBetween }) // 子組件在容器主軸上均分容器布局，第一個子組件與行首對齊，最后一個子組件與行尾對齊。
  35. 

  36.         Text('justifyContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%')
  37.         JustifyContentFlex({ justifyContent: FlexAlign.SpaceAround }) // 子組件在容器主軸上均分容器布局，第一個子組件到行首的距離和最后一個子組件到行尾的距離是相鄰子組件之間距離的一半。
  38. 

  39.         Text('justifyContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%')
  40.         JustifyContentFlex({ justifyContent: FlexAlign.SpaceEvenly }) // 子組件在容器主軸上均分容器布局，子組件之間的距離與第一子組件到行首、最后一個子組件到行尾的距離相等
  41.       }.width('100%').margin({ top: 5 })
  42.     }.width('100%')
  43.   }
  44. }

示例4

  1. // xxx.ets
  2. @Component
  3. struct AlignItemsFlex {
  4.   alignItems : number = 0
  5. 

  6.   build() {
  7.     Flex({ alignItems: this.alignItems }) {
  8.       Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
  9.       Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
  10.       Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
  11.     }
  12.     .size({width: '90%', height: 80})
  13.     .padding(10)
  14.     .backgroundColor(0xAFEEEE)
  15.   }
  16. }
  17. 

  18. @Entry
  19. @Component
  20. struct FlexExample4 {
  21.   build() {
  22.     Column() {
  23.       Column({ space: 5 }) {
  24.         Text('alignItems:Auto').fontSize(9).fontColor(0xCCCCCC).width('90%')
  25.         AlignItemsFlex({ alignItems: ItemAlign.Auto }) // 子組件在容器交叉軸上首部對齊
  26. 

  27.         Text('alignItems:Start').fontSize(9).fontColor(0xCCCCCC).width('90%')
  28.         AlignItemsFlex({ alignItems: ItemAlign.Start }) // 子組件在容器交叉軸上首部對齊
  29. 

  30.         Text('alignItems:Center').fontSize(9).fontColor(0xCCCCCC).width('90%')
  31.         AlignItemsFlex({ alignItems: ItemAlign.Center }) // 子組件在容器交叉軸上居中對齊
  32. 

  33.         Text('alignItems:End').fontSize(9).fontColor(0xCCCCCC).width('90%')
  34.         AlignItemsFlex({ alignItems: ItemAlign.End }) // 子組件在容器交叉軸上尾部對齊
  35. 

  36.         Text('alignItems:Stretch').fontSize(9).fontColor(0xCCCCCC).width('90%')
  37.         AlignItemsFlex({ alignItems: ItemAlign.Stretch }) // 子組件在容器交叉軸上拉伸填充
  38. 

  39.         Text('alignItems:Baseline').fontSize(9).fontColor(0xCCCCCC).width('90%')
  40.         AlignItemsFlex({ alignItems: ItemAlign.Baseline }) // 子組件在容器交叉軸上與文本基線對齊
  41.       }.width('100%').margin({ top: 5 })
  42.     }.width('100%')
  43.   }
  44. }

示例5

  1. // xxx.ets
  2. @Component
  3. struct AlignContentFlex {
  4.   alignContent: number
  5. 

  6.   build() {
  7.     Flex({ wrap: FlexWrap.Wrap, alignContent: this.alignContent }) {
  8.       Text('1').width('50%').height(20).backgroundColor(0xF5DEB3)
  9.       Text('2').width('50%').height(20).backgroundColor(0xD2B48C)
  10.       Text('3').width('50%').height(20).backgroundColor(0xD2B48C)
  11.     }
  12.     .size({ width: '90%', height: 90 })
  13.     .padding(10)
  14.     .backgroundColor(0xAFEEEE)
  15.   }
  16. }
  17. 

  18. @Entry
  19. @Component
  20. struct FlexExample5 {
  21.   build() {
  22.     Column() {
  23.       Column({ space: 5 }) {
  24.         Text('alignContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%')
  25.         AlignContentFlex({ alignContent: FlexAlign.Start }) // 多行布局下子組件首部對齊
  26. 

  27.         Text('alignContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%')
  28.         AlignContentFlex({ alignContent: FlexAlign.Center }) // 多行布局下子組件居中對齊
  29. 

  30.         Text('alignContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%')
  31.         AlignContentFlex({ alignContent: FlexAlign.End }) // 多行布局下子組件尾部對齊
  32. 

  33.         Text('alignContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%')
  34.         AlignContentFlex({ alignContent: FlexAlign.SpaceBetween }) // 多行布局下第一行子組件與列首對齊，最后一行子組件與列尾對齊
  35. 

  36.         Text('alignContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%')
  37.         AlignContentFlex({ alignContent: FlexAlign.SpaceAround }) // 多行布局下第一行子組件到列首的距離和最后一行子組件到列尾的距離是相鄰行之間距離的一半
  38. 

  39.         Text('alignContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%')
  40.         Flex({
  41.           wrap: FlexWrap.Wrap,
  42.           alignContent: FlexAlign.SpaceEvenly
  43.         }) { // 多行布局下相鄰行之間的距離與第一行子組件到列首的距離、最后一行子組件到列尾的距離完全一樣
  44.           Text('1').width('50%').height(20).backgroundColor(0xF5DEB3)
  45.           Text('2').width('50%').height(20).backgroundColor(0xD2B48C)
  46.           Text('3').width('50%').height(20).backgroundColor(0xF5DEB3)
  47.           Text('4').width('50%').height(20).backgroundColor(0xD2B48C)
  48.           Text('5').width('50%').height(20).backgroundColor(0xF5DEB3)
  49.         }
  50.         .size({ width: '90%', height: 100 })
  51.         .padding({ left: 10, right: 10 })
  52.         .backgroundColor(0xAFEEEE)
  53.       }.width('100%').margin({ top: 5 })
  54.     }.width('100%')
  55.   }
  56. }

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號