视频列表的不规则排列

     WaterFlow() { 
        LazyForEach(this.datasource, (item: number,index:number) => { 
          FlowItem() { 
            Column() { 
              if(this.itemWidthArray[index]>100){ 
                Grid() { 
                  GridItem() { 
                    Text("N" + item) 
                      .fontSize(16) 
                      .width('100%') 
                      .height('100%') 
                      .textAlign(TextAlign.Center) 
                  }.columnStart(1).columnEnd(2) 
                } 
              }else{ 
                Grid() { 
                  GridItem() { 
                    Text("N" + item) 
                      .fontSize(16) 
                      .width('100%') 
                      .height('100%') 
                      .textAlign(TextAlign.Center) 
                      .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(Color.Red).borderRadius(10) 
                  } 
                  GridItem() { 
                    Text("N1" + item) 
                      .fontSize(16) 
                      .width('100%') 
                      .height('100%') 
                      .textAlign(TextAlign.Center) 
                      .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(Color.Green).borderRadius(10) 
                  } 
                } 
                .columnsTemplate('1fr 1fr') 
              } 
            } 
          } 
          .onAppear(() => { 
            // 即将触底时提前增加数据 
            if (item + 20 == this.datasource.totalCount()) { 
              for (let i = 0; i < 100; i++) { 
                this.datasource.AddLastItem() 
              } 
            } 
          }) 
          .width('100%') 
          .height(this.itemHeightArray[item % 100]) 
          .backgroundColor(this.colors[item % 5]) 
        }, (item: string) => item) 
      } 
      .columnsTemplate("1fr") 
      .columnsGap(10) 
      .rowsGap(5) 
      .backgroundColor(0xFAEEE0) 
      .width('100%') 
      .height('100%')