Flex布局

說明：
開發前請熟悉鴻蒙開發指導文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
從API Version 7開始支持。后續版本如有新增內容，則采用上角標單獨標記該內容的起始版本。
僅當父組件是 Flex、Column、Row 、GridRow時生效。

屬性

名稱	參數說明	描述
flexBasis	number	string
flexGrow	number	設置父容器的剩余空間分配給此屬性所在組件的比例。默認值：0 從API version 9開始，該接口支持在ArkTS卡片中使用。
flexShrink	number	設置父容器壓縮尺寸分配給此屬性所在組件的比例。父容器為Row、Column時，默認值：0 父容器為Flex時，默認值：1 從API version 9開始，該接口支持在ArkTS卡片中使用。
alignSelf	[ItemAlign]	子組件在父容器交叉軸的對齊格式，會覆蓋Flex、Column、Row、GridRow布局容器中的alignItems設置。 GridCol可以綁定alignsSelf屬性來改變它自身在交叉軸方向上的布局。默認值：ItemAlign.Auto 從API version 9開始，該接口支持在ArkTS卡片中使用。
layoutWeight	number	string

新文檔.png

示例

// xxx.ets
@Entry
@Component
struct FlexExample {
  build() {
    Column({ space: 5 }) {
      Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%')
      // 基于主軸的基準尺寸
      // flexBasis()值可以是字符串'auto',表示基準尺寸是元素本來的大小,也可以是長度設置，相當于.width()/.height()
      Flex() {
        Text('flexBasis(100)')
          .flexBasis(100) // 這里表示寬度為100vp
          .height(100)
          .backgroundColor(0xF5DEB3)
          .textAlign(TextAlign.Center)
        Text(`flexBasis('auto')`)
          .flexBasis('auto') // 這里表示寬度保持原本設置的60%的寬度
          .width('60%')
          .height(100)
          .backgroundColor(0xD2B48C)
          .textAlign(TextAlign.Center)
      }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)

      Text('flexGrow').fontSize(9).fontColor(0xCCCCCC).width('90%')
      // flexGrow()表示剩余空間分配給該元素的比例
      Flex() {
        Text('flexGrow(2)')
          .flexGrow(2) // 父容器分配給該Text的寬度為剩余寬度的2/3
          .height(100)
          .backgroundColor(0xF5DEB3)
          .textAlign(TextAlign.Center)
        Text('flexGrow(1)')
          .flexGrow(1) // 父容器分配給該Text的寬度為剩余寬度的1/3
          .height(100)
          .backgroundColor(0xD2B48C)
          .textAlign(TextAlign.Center)
      }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)

      Text('flexShrink').fontSize(9).fontColor(0xCCCCCC).width('90%')
      // flexShrink()表示該元素的壓縮比例，基于超出的總尺寸進行計算
      // 第一個text壓縮比例是0,另外兩個都是1,因此放不下時等比例壓縮后兩個,第一個不壓縮
      Flex({ direction: FlexDirection.Row }) {
        Text('flexShrink(0)')
          .flexShrink(0)
          .width('50%')
          .height(100)
          .backgroundColor(0xF5DEB3)
          .textAlign(TextAlign.Center)
        Text('default flexShrink') // 默認值為1
          .width('40%')
          .height(100)
          .backgroundColor(0xD2B48C)
          .textAlign(TextAlign.Center)
        Text('flexShrink(1)')
          .flexShrink(1)
          .width('40%')
          .height(100)
          .backgroundColor(0xF5DEB3)
          .textAlign(TextAlign.Center)
      }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)

      Text('alignSelf').fontSize(9).fontColor(0xCCCCCC).width('90%')
      // alignSelf會覆蓋Flex布局容器中的alignItems設置
      Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
        Text('no alignSelf,height:70')
          .width('33%')
          .height(70)
          .backgroundColor(0xF5DEB3)
          .textAlign(TextAlign.Center)
        Text('alignSelf End')
          .alignSelf(ItemAlign.End)
          .width('33%')
          .height(70)
          .backgroundColor(0xD2B48C)
          .textAlign(TextAlign.Center)
        Text('no alignSelf,height:100%')
          .width('34%')
          .height('100%')
          .backgroundColor(0xF5DEB3)
          .textAlign(TextAlign.Center)
      }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
    }.width('100%').margin({ top: 5 })
  }
}