HarmonyOS 如何监听每行显示几个元素，并且如何获取每个元素的宽度？

Question

我现在要实现搜索历史记录展开折叠功能，我使用了Flex({ wrap: FlexWrap.Wrap }) 组件展示，请问

1：Flex({ wrap: FlexWrap.Wrap }) 组件如何获取每行显示了几个元素呢 ？

2: 且每个元素宽度又如何获取呢 ？

3: 有没有Flex 组件相关的监听方法的API 文档呢？ ，官方文档只有如何使用， 但是没有其相关的监听

Answer 1

请参考示例：

import { display } from '@kit.ArkUI';
import measure from '@ohos.measure'

let displayClass: display.Display | null = null;
let componentWidth: number = 0;
const childMaxWidth: number = 500
try {
  displayClass = display.getDefaultDisplaySync();
  componentWidth = displayClass.width
  console.info('Flex_overNumber displayClass.width:' + displayClass.width)
} catch (exception) {
  console.error('Flex_overNumber Failed to obtain the default display object. Code: ' + JSON.stringify(exception));
} /*export function getScreenWidth(): number { let screenWidth = 0; try { screenWidth = display.getDefaultDisplaySync().width; } catch (err) { console.error(`get screen width error: ${JSON.stringify(err)}`); } return screenWidth; }*/

@Component
struct TextItem {
  @State message: string = ''
  @Prop fontSizeData: number
  build() {
    Text(this.message)
      .fontSize(this.fontSizeData)
      .margin({ left: 10, top: 10 })
      .backgroundColor('#c4c2cc')
      .constraintSize({ maxWidth: childMaxWidth + 'px' })
      .maxLines(1)
      .textOverflow({ overflow: TextOverflow.Ellipsis })
  }
}

@Entry
@Component
struct Flex_overNumber {
  @State @Watch('IndexChange') index: number = 0
  @State @Watch('textChange') message: string = ''
  @State FlexWidth: string = '80%';
  @State newIndex: number = 0;
  @State heightControl: number | string = 100;
  @State ButtonText: string = '∨';
  @State AllData: string[] =
    ['1', '22', '333', '44444', '55', '666', 'dsds', '8888888888888', '99', '3434', '5656', '7878', '141414141',
      '68681']
  @State SomeData: string[] = []
  @State ShowData: string[] = []
  @State fontSizeData: number = 30
  @State AllWidth: number = 0
  @State textWidth: number = 0
  @State restrictWidth: number = 0;

  IndexChange() {
    if (this.AllWidth >= (this.restrictWidth - childMaxWidth) && this.AllWidth <= (this.restrictWidth)) {
      this.newIndex = this.index
      console.info('Flex_overNumber text1 newIndex', this.newIndex)
      console.info('Flex_overNumber text1 change', this.newIndex)
    }
  }

  textChange() {
    let content: string = this.message
    this.textWidth = measure.measureText({ textContent: content, fontSize: this.fontSizeData })
    if (this.textWidth > childMaxWidth) {
      this.AllWidth += childMaxWidth
    } else {
      this.AllWidth += this.textWidth
    }
    console.info('Flex_overNumber text1 content', content)
    console.info('Flex_overNumber text1 Width', this.textWidth)
  }

  aboutToAppear(): void {
    // componentWidth 1260
    if (componentWidth != 0) {
      // this.restrictWidth = Math.floor((parseFloat(this.FlexWidth) * componentWidth) * 1.3 * 0.01) //1310
      this.restrictWidth = componentWidth * 1.2 // 0.8 1008
      console.info('Flex_overNumber text1 componentWidth', componentWidth)
      console.info('Flex_overNumber text1 restrictWidth', this.restrictWidth)
    }
    for (let i = 0; i < this.AllData.length; i++) {
      this.message = this.AllData[i]
      this.index = i
    }
    console.log('text1 change newIndex', this.newIndex)
    this.SomeData = this.AllData.slice(0, this.newIndex + 1)
    this.ShowData = this.SomeData
  }

  build() {
    Row() {
      Column() {
        Flex({ wrap: FlexWrap.Wrap }) {
          ForEach(this.ShowData, (item: string) => {
            TextItem({ message: item, fontSizeData: this.fontSizeData })
          })
          Button(this.ButtonText).onClick(() => {
            if (this.heightControl === 100) {
              this.heightControl = '100%'
              this.ButtonText = '^'
              this.ShowData = this.AllData
            } else {
              this.heightControl = 100
              this.ButtonText = 'v'
              this.ShowData = this.SomeData
            }
          }).width(40).height(30).margin({ left: 10, top: 10 })
        }
        .constraintSize({ maxHeight: this.heightControl })
        .border({ width: 1 })
        .width(this.FlexWidth)
        .margin({ left: '5%' })
        .clip(true)
      }.width('100%')
    }.height('100%')
  }
}