使用Grid 组件实现选座场景

编译一个页面,实现选座场景

要求:通过Gird组件组件,实现选中位置,颜色叠加

HarmonyOS
2024-05-26 15:14:21
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
netos

使用的 OS 能力及相关的核心 API

  •  Grid 组件
  •  colorBlend 方法
  •  color属性

核心代码解释

build() { 
  Row() { 
    Column({ space: 6 }) { 
      Text(this.message) 
        .fontSize(50) 
        .fontWeight(FontWeight.Bold) 
      Grid() { 
        ForEach(this.Number, (day: string, index1: number) => { 
          GridItem() { 
            Column() { 
              Stack() { 
                Text(day) 
                  .zIndex(999) 
                  .fontSize(16) 
                  .fontColor(Color.Black) 
                  .backgroundColor(this.color) 
                  .width('100%') 
                  .height('100%') 
                  .textAlign(TextAlign.Center) 
                  .clip(true) 
                  .borderRadius(10) 
                  .onClick(() => { 
                    if (this.num1 != index1) { 
                      this.num1 = index1 
                    } else { 
                      this.num1 = -1 
                    } 
                    this.num2 = Math.floor(this.num1 / 6) 
                    console.info(JSON.stringify(this.num1)) 
                    console.info(JSON.stringify(this.num2)) 
                  }) 
                if (index1 == this.num1) { 
                  Text() 
                    .fontSize(16) 
                    .fontColor(Color.Black) 
                    .backgroundColor(Color.Green) 
                    .width('100%') 
                    .height('100%') 
                    .textAlign(TextAlign.Center) 
                    .colorBlend(false ? this.StartColor[this.num2] : this.StartColor[this.num2]) 
                    .clip(true) 
                    .borderRadius(10) 
                    .width('100%') 
                    .margin({ top: 0 }) 
                    .position({}) 
                } 
              } 
            } 
          } 
        }, (day: string) => day) 
      } 
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr') 
      .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr') 
      .columnsGap(10) 
      .rowsGap(10) 
      .width('90%') 
      .backgroundColor(0xFAEEE0) 
      .height(500) 
    } 
    .width('100%') 
    .margin({ top: 5 }) 
  } 
  .height('100%') 
}

实现效果

分享
微博
QQ
微信
回复
2024-05-27 20:16:13
相关问题
编译一个页面,实现场景
363浏览 • 1回复 待解决
Grid组件如何实现高度自适应
1509浏览 • 1回复 待解决
grid如何怎么实现拖拽功能
385浏览 • 1回复 待解决
grid组件及数据懒加载
476浏览 • 1回复 待解决
Grid如何实现拖拽功能
1115浏览 • 1回复 待解决
Grid组件的scrollBar是否支持自定义
1003浏览 • 1回复 待解决
关于Grid容器和WaterFlow使用上的问题
473浏览 • 1回复 待解决
使用swiper组件实现viewPager效果
536浏览 • 1回复 待解决
在哪些场景使用MongoDB?
2310浏览 • 1回复 待解决
AppGallery Connect使用的问题场景
719浏览 • 1回复 待解决
TextInput组件获取焦点的几种场景
934浏览 • 1回复 待解决
napi 基本使用场景示例
488浏览 • 1回复 待解决
瀑布流场景的推荐实现方案
748浏览 • 1回复 待解决
使用web组件实现预览沙箱中pdf
731浏览 • 1回复 待解决
如何使用Swiper组件实现下拉刷新
202浏览 • 1回复 待解决