视频列表的不规则排列

视频app首页展示视频列表,默认状态下列表内导航占据全部宽度,而短视频需要两个占据全部宽度,且列表内可能存在多个导航模块。

HarmonyOS
2024-05-26 12:10:02
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
liqi399

使用的核心API

瀑布流容器WaterFlow

gird容器组件

核心代码解释

主要是通过元素宽度做一个判断,宽度大于100的整行排列一个元素,否则排列两个元素

     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%')

实现效果

适配版本信息

SDK:4.0.10.10

 IDE:DevEco Studio 4.0.3.600

分享
微博
QQ
微信
回复
2024-05-27 15:59:17
相关问题
编写一个页面,实现不规则列表
393浏览 • 1回复 待解决
如何实现文本竖向排列
1003浏览 • 1回复 待解决
电话拦截规则有知道吗?
1842浏览 • 1回复 待解决
分组列表实践(嵌套列表
538浏览 • 1回复 待解决
ArkTS有哪些语法规则,有懂得吗?
791浏览 • 1回复 待解决
页面和列表嵌套滚动,实现列表吸顶
534浏览 • 1回复 待解决
如何实现列表单选效果
1114浏览 • 0回复 待解决
List列表组件如何改为横向显示
28浏览 • 1回复 待解决