Grid实现单双列展示,谁有好的方案吗?

Grid实现单双列展示

HarmonyOS
2024-05-26 14:40:56
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
失望的满天星

核心代码如下:

@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('#36D') 
              .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('#bfc') 
      .height('100%') 
      .multiSelectable(true) 
    }.width('100%').margin({ top: 5 }) 
  } 
}

实现效果

分享
微博
QQ
微信
回复
2024-05-27 19:53:24
相关问题
转场动画,谁有方案
190浏览 • 1回复 待解决
taskpool使用 ,谁有方案
236浏览 • 1回复 待解决
本地收发消息实践,谁有方案
261浏览 • 1回复 待解决
Scrollerfling实现有什么方案
410浏览 • 1回复 待解决
Text模拟隐私协议,有方案
409浏览 • 1回复 待解决
连接网络信息获取有方案
295浏览 • 1回复 待解决
har和hsp转换,有方案
276浏览 • 1回复 待解决
SM4 CBC模式加解密,有方案
480浏览 • 1回复 待解决
屏幕旋转计算,有什么方案
442浏览 • 1回复 待解决
grid如何怎么实现拖拽功能
373浏览 • 1回复 待解决
实现例模式下数据存储
437浏览 • 1回复 待解决
Grid如何实现拖拽功能
1071浏览 • 1回复 待解决
oceanbase支持节点副本部署
3074浏览 • 1回复 待解决
使用Grid 组件实现选座场景
380浏览 • 1回复 待解决
Grid组件如何实现高度自适应
1459浏览 • 1回复 待解决
Grid嵌套滚动问题有知道
1377浏览 • 1回复 待解决
瀑布流场景推荐实现方案
715浏览 • 1回复 待解决