codecamp

弹性方式布局子组件的容器组件

说明
  • 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
  • Flex组件在渲染时存在二次布局过程，因此在对性能有严格要求的场景下建议使用Column、Row代替。
  • Flex组件主轴默认不设置时撑满父容器，Column、Row组件主轴不设置时默认是跟随子节点大小。

权限列表

无

子组件

可以包含子组件。

接口

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

标准Flex布局容器。详细指导请参考弹性布局。

从API version 9开始，该接口支持在ArkTS卡片中使用。

参数：

参数名

参数类型

必填

默认值

参数描述

direction

FlexDirection

否

FlexDirection.Row

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

wrap

FlexWrap

否

FlexWrap.NoWrap

Flex容器是单行/列还是多行/列排列。

说明：

在多行布局时，通过交叉轴方向，确认新行堆叠方向。

justifyContent

FlexAlign

否

FlexAlign.Start

所有子组件在Flex容器主轴上的对齐格式。

alignItems

ItemAlign

否

ItemAlign.Start

所有子组件在Flex容器交叉轴上的对齐格式。

alignContent

FlexAlign

否

FlexAlign.Start

交叉轴中有额外的空间时，多行内容的对齐方式。仅在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. }

计数器组件
瀑布流组件的子组件
温馨提示
下载编程狮App，免费阅读超1000+编程语言教程
取消
确定
目录

通用事件

通用属性

手势处理

基础组件

容器组件

媒体组件

绘制组件

画布组件

动画

弹窗

生命周期

状态管理

像素

枚举

类型

接口

错误码合集

关闭

 MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }