HarmonyOS鸿蒙Next中Flex()组件怎么自适应子元素的宽高

Wrap：Flex容器的元素多行/列排布，子项允许超出容器。会导致auto属性失效。

当子组件的宽大于父组件的宽时，会溢出父组件的范围，可使用layoutWeight自适应布局，若遍历会影响其他子组件，可通过父组件宽度与文本宽度做比较判断是否自适应布局。

获取父组件宽度与文本宽度方案如下：

方案一：通过display.getDefaultDisplaySync获取屏幕宽度，MeasureText.measureText或onAreaChange获取文本宽度，判断文本宽是否大于屏幕宽，完成自适应布局。

主文件代码示例如下：

import { display, LengthMetrics, MeasureText } from '@kit.ArkUI'

@Component
@Entry
struct Index {
  options = ['这段很长的文字会溢出这段很长的文字会溢出这段很长的文字会溢出', '文字1', '文字2']

  build() {
    Flex({
      wrap: FlexWrap.Wrap,
      space: { main: LengthMetrics.vp(8), cross: LengthMetrics.vp(8) },
      direction: FlexDirection.Row,
      alignItems: ItemAlign.Start
    }) {
      ForEach(this.options, (item: string) => {
        ChildItem({ text: item })
      }, (item: string) => item)
    }
    .padding(10)
    .height(300)
  }
}

ChildItem子组件代码示例如下：

@Component
struct ChildItem {
  @Prop text: string = ""
  @State textWidth: number = 0
  @State totalWidth: number = 0

  aboutToAppear(): void {
    // 获取文本宽度
    this.textWidth = px2vp(MeasureText.measureText({
      textContent: this.text
    }))
    this.totalWidth = px2vp(display.getDefaultDisplaySync().width) // 获取屏幕宽度
  }

  build() {
    Row() {
      Checkbox({ name: this.text })
        .shape(CheckBoxShape.ROUNDED_SQUARE)
        .margin(0)
        .width(20)
        .height(20)
      Text(this.text)
        .backgroundColor(Color.Orange)
        .margin({
          left: 4
        })
        .layoutWeight(this.textWidth > this.totalWidth - 44 ? 1 : 0)
    }
    .height(50)
    .backgroundColor(Color.Blue)
  }
}

方案二：通过onAreaChange回调获取父组件宽度，MeasureText.measureText获取文本宽度，判断文本宽是否大于父组件宽，完成自适应布局。

核心代码示例如下：

@Component
struct ChildItem {
  @Prop text: string = ""
  @State textWidth: number = 0
  @State totalWidth: number = 0

  aboutToAppear(): void {
    // 获取文本宽度
    this.textWidth = px2vp(MeasureText.measureText({
      textContent: this.text
    }))
  }

  build() {
    Row() {
      Checkbox({ name: this.text })
        .shape(CheckBoxShape.ROUNDED_SQUARE)
        .margin(0)
        .width(20)
        .height(20)
      Text(this.text)
        .backgroundColor(Color.Orange)
        .margin({
          left: 4
        })
        .layoutWeight(this.textWidth - 24 > this.totalWidth ? 1 : 0)
    }
    .height(50)
    .backgroundColor(Color.Blue)
    // 获取父组件宽度
    .onAreaChange((oldValue: Area, newValue: Area) => {
      this.totalWidth = newValue.width as number
    })
  }
}