希望提供一键切换首页视频列表单列展示和双列展示的实现方式

希望提供一键切换首页视频列表单列展示和双列展示的实现方式。

HarmonyOS
2024-06-03 22:43:24
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
PinkFish

使用Grid布局可以实现。

@Entry 
@Component 
struct GridExample1 { 
  @State numbers: string[] = [] 
  @State inputValue: string = 'click me' 
  @State columnsTemplateStr: string = '2fr 2fr' 
  @State widthNum: string = '50%' 
 
  aboutToAppear() { 
 
    for (let i = 1; i <= 5; i++) { 
      this.numbers.push(i + '') 
    } 
  } 
 
  build() { 
    Column({ space: 5 }) { 
 
      Button(this.inputValue) 
        .onClick(() => { 
          if (this.columnsTemplateStr == '2fr' && this.widthNum == '100%') { 
            this.columnsTemplateStr = '2fr 2fr' 
            this.widthNum = '50%' 
          } else { 
            this.columnsTemplateStr = '2fr' 
            this.widthNum = '100%' 
          } 
        }).backgroundColor(0x317aff) 
      Grid() { 
        ForEach(this.numbers, (day: string) => { 
          GridItem() { 
            Text(day) 
              .fontSize(16) 
              .backgroundColor(0xF9CF93) 
              .width(this.widthNum)// .width(130) 
              .height(80) 
              .textAlign(TextAlign.Center) 
          } 
          .selected(true) 
          .hitTestBehavior(HitTestMode.Transparent) 
          .onTouch((event?: TouchEvent) => { 
            console.log(`dzy>onTouch>item: ${day}, event.type: ${event.type}`) 
          }) 
        }) 
      } 
      // .columnsTemplate('2fr 2fr') 
      .columnsTemplate(this.columnsTemplateStr) 
      .columnsGap(10) 
      .rowsGap(10) 
      .width('90%') 
      .backgroundColor(0xFAEEE0) 
      .height('100%') 
      .multiSelectable(true) 
    }.width('100%').margin({ top: 5 }) 
  } 
}
分享
微博
QQ
微信
回复
2024-06-04 21:56:56
相关问题
IconFont图标展示方式
234浏览 • 1回复 待解决
openharmony怎么在app上实现一键关机?
1045浏览 • 2回复 待解决
如何使应用一键变灰,你会吗?
929浏览 • 1回复 待解决
如何禁止应用分屏小窗展示
663浏览 • 1回复 待解决
arkui怎么展示接口返回富文本?
1493浏览 • 1回复 待解决
Scroll子组件展示位置如何调整
714浏览 • 1回复 待解决
页面列表嵌套滚动,实现列表吸顶
456浏览 • 1回复 待解决