如何实现点击GridItem获取选中内容
====================

#### 问题现象

使用Grid组件，如何实现点击item后高亮，再次点击则需要取消高亮，最后还要收集已选选项。

#### 背景知识

*   [Grid](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-grid)：网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。
*   [GridItem](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-griditem)：网格容器中单项内容容器。

#### 解决方案

1.  实现功能时将GridItem内容抽取为独立组件，为item内容设置点击事件，通过点击时状态变量的变化控制item背景色变化。
2.  想要获取选中的item，则需要通过item的点击事件将点击时获取到的index插入到数组中，并通过indexOf判断点击内容是否已存在数组中，当不存在时，将选中内容插入数组；当存在时，则不做插入操作。

完整示例参考如下：

class ProductInfo {
  public id: string;
  public productName: string;

  constructor(id: string, productName: string) {
    this.id \= id;
    this.productName \= productName;
  }
}

@Entry
@Component
struct GridHighLight {
  @State services: ProductInfo\[\] \= \[
    new ProductInfo('1', 'HUAWEI nova 12'),
    new ProductInfo('2', 'HUAWEI nova 11'),
    new ProductInfo('3', 'HUAWEI nova 13'),
    new ProductInfo('24', 'HUAWEI nova 14')
  \];
  clickThings: Array<string\> = \[\];
  @Provide selectIndexList: Array<string\> = \[\];

  build() {
    Column() {
      Grid() {
        ForEach(this.services, (item: ProductInfo) \=\> {
          GridItem() {
      _      // 父组件中传递数据_
            ToDoItem({ content: item.productName, selectIndex: item.id });
          };
        }, (item: ProductInfo): string \=\> JSON.stringify(item));
      }
      .columnsTemplate('1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .width('90%')
      .height(300);

      Text('选中的');
      Text(\`${this.selectIndexList}\`);
    }
    .width('100%');
  }
}

_//_ _将GridItem内容抽取为独立组件_
@Component
export default struct ToDoItem {
  private content?: string;
  @State isComplete: boolean \= false;
  private selectIndex?: string;
  @Consume selectIndexList: Array<string\>;

  build() {
    Row() {
      Column() {
        Text(this.content);
      }
      .width('30%')
      .height(100)
      .backgroundColor(this.isComplete ? '#0D5AF5' : '#F1F3F5')
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .height(60)
      .onClick(() \=\> {
     _   // 通过状态变量控制背景色变化_
        this.isComplete \= !this.isComplete;
        if (this.selectIndex) {
          if (this.isComplete) {
            this.selectIndexList.push(this.selectIndex);
          } else {
        _    // 利用indexOf判断是否存在selectIndexList中_
            let index \= this.selectIndexList.indexOf(this.selectIndex);
            if (index !== -1) {
              this.selectIndexList.splice(index, 1);
            }
          }
        }
      });
    };
  }
}