HarmonyOS flex容器布局

// Import necessary modules
import { Column, Flex, Text, Button, View, Stack } from 'ohos_component';
import { Rect } from 'ohos_struct';

@Entry
@Component
struct MainComponent {
  private items: string[] = ['Item1', 'Item2', 'Item3', 'Item4', 'Item5', 'Item6', 'Item7'];
  private maxVisibleRows: number = 3;
  private showAll: boolean = false;
  private containerWidth: number = 0;

  build() {
    Column() {
      // Container for search history items and fold button
      View() {
        Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {  
          this.items.map((item, index) => {
            if (this.showAll || this.isWithinMaxVisibleRows(index)) {
              Text(item)
                .padding(10)
                .backgroundColor(Color.Gray)
                .margin({ right: 10, bottom: 10 })
                .width('auto')
                .onLayout((event: LayoutEvent) => {
                  // Capture the width of the container
                  if (index === 0) {
                    this.containerWidth = event.layout.width;
                  }
                });
            }
          });
          
          // Only show fold button when necessary
          if (!this.showAll && this.moreItemsThanMaxVisibleRows()) {
            Button('Fold')
              .onClick(() => {
                this.showAll = true;
              })
              .margin({ right: 10, bottom: 10 })
              .width('auto');
          }
        }
        .width('100%')
        .onLayout((event: LayoutEvent) => {
          this.adjustLastRow();
        });
      }
    }
    .padding(16);
  }

  private isWithinMaxVisibleRows(index: number): boolean {
    const itemsPerRow = Math.floor(this.containerWidth / 100); // Assuming each item ~100px wide
    return Math.floor(index / itemsPerRow) < this.maxVisibleRows;
  }

  private moreItemsThanMaxVisibleRows(): boolean {
    const itemsPerRow = Math.floor(this.containerWidth / 100); // Assuming each item ~100px wide
    return this.items.length > itemsPerRow * this.maxVisibleRows;
  }

  private adjustLastRow() {
    const itemsPerRow = Math.floor(this.containerWidth / 100); // Assuming each item ~100px wide
    const visibleItemsCount = itemsPerRow * this.maxVisibleRows;
    if (this.items.length > visibleItemsCount) {
      // Hide the last item in the third row
      const lastVisibleIndex = visibleItemsCount - 1;
      this.items[lastVisibleIndex].visible = false; 
    }
  }
}

@Entry  
@Component  
struct FlexTest {  
  @State message: string = 'Hello World';  
  @State allDataList: string[] = ['1', '222', '33333', '44', '1', '222', '33333', '44', '1', '222', '33333', '44']  
  @State showDataList: string[] = []  
  @State isShowAll: boolean = true  
  private cutIndex: number = 0  
  private flexWidth: number = 0  
  private itemWidthList: number[] = []  
  private isInit: boolean = false  
  aboutToAppear(): void {  
    this.initItemList()  
  }  
  initItemList() {  
    this.showDataList = this.allDataList  
    this.itemWidthList = new Array<number>(this.allDataList.length)  
    for (let i = 0; i < this.itemWidthList.length; i++) {  
      this.itemWidthList[i] = 0  
    }  
    this.isInit = false  
  }  
  isDrawFinish() {  
    let isFinish = true;  
    for (let i = 0; i < this.itemWidthList.length; i++) {  
      if (this.itemWidthList[i] == 0) {  
        isFinish = false  
      }  
    }  
    if (this.flexWidth == 0) {  
      isFinish = false;  
    }  
if (isFinish) {  
  this.isInit = true  
  this.calculateCutIndex(3)  
  this.transformExpendList(false)  
}  
  }  
  transformExpendList(showAll: boolean) {  
    if (showAll) {  
      this.isShowAll = true  
      this.showDataList = this.allDataList  
    } else {  
      this.isShowAll = false  
      this.showDataList = this.allDataList.slice(0, this.cutIndex)  
    }  
  }  
  // maxLine指布局需要保留的最大行数  
  calculateCutIndex(maxLine: number) {  
    let layer = 1;  
    let curLength = 0;  
    for (let i = 0; i < this.itemWidthList.length; i++) {  
      curLength += this.itemWidthList[i]  
      if (curLength > this.flexWidth) {  
        if (layer == maxLine) {  
          curLength -= this.itemWidthList[i]  
          this.cutIndex = i  
          break  
        } else {  
          layer += 1  
          curLength = this.itemWidthList[i]  
        }  
      }  
    }  
let buttonWidth = 40  
let empty = this.flexWidth - curLength  
while (empty <= buttonWidth) {  
  empty += this.itemWidthList[this.cutIndex]  
  this.cutIndex--  
}  
  }  
  build() {  
    RelativeContainer() {  
      Flex({wrap: FlexWrap.Wrap, alignItems: ItemAlign.Center}) {  
        ForEach(this.showDataList, (item: string, index: number) => {  
          Text(item)  
            .fontSize(20)  
            .fontWeight(FontWeight.Bold)  
            .fontColor(Color.Black)  
            .backgroundColor(Color.Gray)  
            .borderRadius(10)  
            .padding(8)  
            .margin(5)  
            .id(item_${index})  
            .onAreaChange((oldValue: Area, newValue: Area) => {  
              if (!this.isInit && newValue.width != 0) {  
                this.itemWidthList[index] = Number(newValue.width) + 10 // item宽度加上两边margin  
                this.isDrawFinish()  
              }  
            })  
        })  
    Button() {  
      Text(this.isShowAll ? '^' : 'v')  
        .padding(10)  
        .fontColor(Color.White)  
        .borderRadius(5)  
    }  
    .width(40)  
    .onClick(() => {  
      this.transformExpendList(!this.isShowAll)  
    })  
  }  
  .onAreaChange((oldValue: Area, newValue: Area) => {  
    if (!this.isInit && newValue.width != 0) {  
      this.flexWidth = Number(newValue.width)  
      this.isDrawFinish()  
    }  
  })  
  .backgroundColor(Color.Red)  
  .id("flex")  
  .width("50%")  
}  
.height('100%')  
.width('100%')  
  }  
}