HarmonyOS 寻求GridItem方案？

Question

Grid 中有很多 GridItem，每个 GridItem 由一个 Image 和 Text构成的，现在有个效果需要实现，某个 GridItem 被选中时，其他 GridItem 取消选中，但是 GridItem 中的 Image有四种可能的状态（未选中未修改、未选中已修改、已选中未修改、已选中已修改），不同状态有不同的图片。

Answer 1

如下是一个简单的实现

@Component
export struct OtherPage {
  pageInfos: NavPathStack = new NavPathStack()
  @State gridIndexSelect: number = 0

  build() {
    NavDestination() {
      Column() {
        Grid() {
          GridItemBuilder({ gridIndexSelect: this.gridIndexSelect, index: 0 })
          GridItemBuilder({ gridIndexSelect: this.gridIndexSelect, index: 1 })
          GridItemBuilder({ gridIndexSelect: this.gridIndexSelect, index: 2 })
        }
      }
    }
  }
}

@Component
export struct GridItemBuilder {
  @Link gridIndexSelect: number;
  @Prop index: number;
  paths: ResourceStr[] = [$r('app.media.backImage1'), $r('app.media.backImage2'), $r('app.media.background')]
  paths2: ResourceStr[] = [$r('app.media.ic_public_tv_border'), $r('app.media.default'), $r('app.media.foreground')]
  private colorSelect: Color = Color.Blue;
  private colorUnSelect: Color = Color.Red;

  build() {
    GridItem() {
      Image(this.gridIndexSelect === this.index ? this.paths2[this.index] : this.paths[this.index])
        .width(100)
        .height(100)
    }
    .width(200)
    .height(200)
    .backgroundColor(this.gridIndexSelect === this.index ? this.colorSelect : this.colorUnSelect)
    .selected(this.gridIndexSelect === this.index)
    .onClick(() => {
      console.log('select true ' + this.index)
      this.gridIndexSelect = this.index;
    })
  }
}