在HarmonyOS 中 流式布局折叠效果的方法？

Question

在HarmonyOS 中 流式布局折叠效果的方法？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

没有这样的控件，可以使用List实现，具体实现可以参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-refere...
流式布局在HarmonyOS中可以通过flex布局实现，demo：

import measure from '@ohos.measure' 
import display from '@ohos.display'; 
 
const childMaxWidth:number = 325 //为了方便后续计算，这里的宽度数值为px 
let displayClass: display.Display | null = null; 
let componentWidth:number = 0; 
try { 
  displayClass = display.getDefaultDisplaySync(); 
  componentWidth = displayClass.width 
} catch (exception) { 
  console.error('Failed to obtain the default display object. Code: ' + JSON.stringify(exception)); 
} 
@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 Index2 { 
  @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','7777','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.log('text1 newIndex',this.newIndex) 
      console.log('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.log('text1 content',content) 
    console.log('text1 Width',this.textWidth) 
 
  } 
  aboutToAppear(): void { 
    if(componentWidth != 0){ 
      this.restrictWidth = Math.floor((parseFloat(this.FlexWidth) * componentWidth) * 1.3 * 0.01) 
      console.log('text1 componentWidth',componentWidth) 
      console.log('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%') 
 
  } 
}