使用Grid 组件实现选座场景

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