您的当前位置:首页正文

HarmonyOS ArkTS组件 | Flex 以弹性方式布局子组件的容器组件 学习记录

2024-10-17 来源:个人技术集锦

HarmonyOS ArkTS组件 | Flex 以弹性方式布局子组件的容器组件 学习记录

前言:最近需要用到弹性布局,记录一下。(忽略图片水印QAQ)

说明:

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

接口:

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

参数:

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

// xxx.ets@Entry@Componentstruct FlexExample1 {  build() {    Column() {      Column({ space: 5 }) {        Text('direction:Row').fontSize(9).fontColor(0xCCCCCC).width('90%')        Flex({ direction: FlexDirection.Row }) {          Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)          Text('2').width('20%').height(50).backgroundColor(0xD2B48C)          Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)          Text('4').width('20%').height(50).backgroundColor(0xD2B48C)        }        .height(70)        .width('90%')        .padding(10)        .backgroundColor(0xAFEEEE)        Text('direction:RowReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')        Flex({ direction: FlexDirection.RowReverse }) {          Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)          Text('2').width('20%').height(50).backgroundColor(0xD2B48C)          Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)          Text('4').width('20%').height(50).backgroundColor(0xD2B48C)        }        .height(70)        .width('90%')        .padding(10)        .backgroundColor(0xAFEEEE)        Text('direction:Column').fontSize(9).fontColor(0xCCCCCC).width('90%')        Flex({ direction: FlexDirection.Column }) {          Text('1').width('100%').height(40).backgroundColor(0xF5DEB3)          Text('2').width('100%').height(40).backgroundColor(0xD2B48C)          Text('3').width('100%').height(40).backgroundColor(0xF5DEB3)          Text('4').width('100%').height(40).backgroundColor(0xD2B48C)        }        .height(160)        .width('90%')        .padding(10)        .backgroundColor(0xAFEEEE)        Text('direction:ColumnReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')        Flex({ direction: FlexDirection.ColumnReverse }) {          Text('1').width('100%').height(40).backgroundColor(0xF5DEB3)          Text('2').width('100%').height(40).backgroundColor(0xD2B48C)          Text('3').width('100%').height(40).backgroundColor(0xF5DEB3)          Text('4').width('100%').height(40).backgroundColor(0xD2B48C)        }        .height(160)        .width('90%')        .padding(10)        .backgroundColor(0xAFEEEE)      }.width('100%').margin({ top: 5 })    }.width('100%')  }}

运行结果:

wrap:
Flex容器是单行/列还是多行/列排列。
说明:
在多行布局时,通过交叉轴方向,确认新行堆叠方向。

// xxx.ets@Entry@Componentstruct FlexExample2 {  build() {    Column() {      Column({ space: 5 }) {        Text('Wrap').fontSize(9).fontColor(0xCCCCCC).width('90%')        Flex({ wrap: FlexWrap.Wrap }) {          Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)          Text('2').width('50%').height(50).backgroundColor(0xD2B48C)          Text('3').width('50%').height(50).backgroundColor(0xD2B48C)        }        .width('90%')        .padding(10)        .backgroundColor(0xAFEEEE)        Text('NoWrap').fontSize(9).fontColor(0xCCCCCC).width('90%')        Flex({ wrap: FlexWrap.NoWrap }) {          Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)          Text('2').width('50%').height(50).backgroundColor(0xD2B48C)          Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)        }        .width('90%')        .padding(10)        .backgroundColor(0xAFEEEE)        Text('WrapReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')        Flex({ wrap: FlexWrap.WrapReverse , direction:FlexDirection.Row }) {          Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)          Text('2').width('50%').height(50).backgroundColor(0xD2B48C)          Text('3').width('50%').height(50).backgroundColor(0xD2B48C)        }        .width('90%')        .height(120)        .padding(10)        .backgroundColor(0xAFEEEE)      }.width('100%').margin({ top: 5 })    }.width('100%')  }}

运行结果:

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

// xxx.ets@Componentstruct JustifyContentFlex {  justifyContent : number  build() {    Flex({ justifyContent: this.justifyContent }) {      Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)      Text('2').width('20%').height(50).backgroundColor(0xD2B48C)      Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)    }    .width('90%')    .padding(10)    .backgroundColor(0xAFEEEE)  }}@Entry@Componentstruct FlexExample3 {  build() {    Column() {      Column({ space: 5 }) {        Text('justifyContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%')        JustifyContentFlex({ justifyContent: FlexAlign.Start })        Text('justifyContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%')        JustifyContentFlex({ justifyContent: FlexAlign.Center })        Text('justifyContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%')        JustifyContentFlex({ justifyContent: FlexAlign.End })        Text('justifyContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%')        JustifyContentFlex({ justifyContent: FlexAlign.SpaceBetween })        Text('justifyContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%')        JustifyContentFlex({ justifyContent: FlexAlign.SpaceAround })        Text('justifyContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%')        JustifyContentFlex({ justifyContent: FlexAlign.SpaceEvenly })      }.width('100%').margin({ top: 5 })    }.width('100%')  }}

运行结果:

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

// xxx.ets@Componentstruct AlignItemsFlex {  alignItems : number  build() {    Flex({ alignItems: this.alignItems }) {      Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)      Text('2').width('33%').height(40).backgroundColor(0xD2B48C)      Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)    }    .size({width: '90%', height: 80})    .padding(10)    .backgroundColor(0xAFEEEE)  }}@Entry@Componentstruct FlexExample4 {  build() {    Column() {      Column({ space: 5 }) {        Text('alignItems:Auto').fontSize(9).fontColor(0xCCCCCC).width('90%')        AlignItemsFlex({ alignItems: ItemAlign.Auto })        Text('alignItems:Start').fontSize(9).fontColor(0xCCCCCC).width('90%')        AlignItemsFlex({ alignItems: ItemAlign.Start })        Text('alignItems:Center').fontSize(9).fontColor(0xCCCCCC).width('90%')        AlignItemsFlex({ alignItems: ItemAlign.Center })        Text('alignItems:End').fontSize(9).fontColor(0xCCCCCC).width('90%')        AlignItemsFlex({ alignItems: ItemAlign.End })        Text('alignItems:Stretch').fontSize(9).fontColor(0xCCCCCC).width('90%')        AlignItemsFlex({ alignItems: ItemAlign.Stretch })        Text('alignItems:Baseline').fontSize(9).fontColor(0xCCCCCC).width('90%')        AlignItemsFlex({ alignItems: ItemAlign.Baseline })      }.width('100%').margin({ top: 5 })    }.width('100%')  }}

运行结果:

alignContent:
交叉轴中有额外的空间时,多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。

// xxx.ets@Componentstruct AlignContentFlex {  alignContent: number  build() {    Flex({ wrap: FlexWrap.Wrap, alignContent: this.alignContent }) {      Text('1').width('50%').height(20).backgroundColor(0xF5DEB3)      Text('2').width('50%').height(20).backgroundColor(0xD2B48C)      Text('3').width('50%').height(20).backgroundColor(0xD2B48C)    }    .size({ width: '90%', height: 90 })    .padding(10)    .backgroundColor(0xAFEEEE)  }}@Entry@Componentstruct FlexExample5 {  build() {    Column() {      Column({ space: 5 }) {        Text('alignContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%')        AlignContentFlex({ alignContent: FlexAlign.Start })        Text('alignContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%')        AlignContentFlex({ alignContent: FlexAlign.Center })        Text('alignContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%')        AlignContentFlex({ alignContent: FlexAlign.End })        Text('alignContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%')        AlignContentFlex({ alignContent: FlexAlign.SpaceBetween })        Text('alignContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%')        AlignContentFlex({ alignContent: FlexAlign.SpaceAround })        Text('alignContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%')        AlignContentFlex({ alignContent: FlexAlign.SpaceEvenly })      }.width('100%').margin({ top: 5 })    }.width('100%')  }}

运行结果:

———————————— 封装线 ——————————————————

Top