HarmonyOS 鸿蒙Next学习例程2：简单互动九宫格 之一 掰持了一晚上，终于把这个简单互动逻辑搞明白。

涉及到状态管理 @Sate @Observed @ObjectLink 自定义组件

先上图，再说学习痛点

代码如下：

@Entry
@Component
struct Index {
  [@State](/user/State) message: string = '鸿蒙开发初探 → 互动 九宫格';
  [@State](/user/State)
  cells:Array<JiuGongGe>=
    [
      new JiuGongGe('1'),new JiuGongGe('2'),new JiuGongGe('3'),
      new JiuGongGe('4'),new JiuGongGe('5'),new JiuGongGe('6'),
      new JiuGongGe('7'),new JiuGongGe('8'),new JiuGongGe('9')
    ]
  build() {
    Column() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .fontColor('#080888')
        .width('100%')
        .textAlign(TextAlign.Start)
        .padding({top:5,left:15})

      Grid() {
        ForEach(this.cells, (item: JiuGongGe, index: number) => {
          GridItem() {
            JiuGongGeComponent({cell:item})
          }
        },)
      }
      .columnsTemplate('1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .height(300)
      .margin({top:10,left:10,right:10})
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

[@Observed](/user/Observed)
class JiuGongGe
{
  text:string='Cell'
  selected:boolean=false
  constructor(text:string) {
    this.text=text
  }
}


@Component
struct JiuGongGeComponent {
  [@ObjectLink](/user/ObjectLink) cell:JiuGongGe
  build() {
    Text(this.cell.text)
      .fontSize(16)
      .fontColor(Color.White)
      .backgroundColor(this.cell.selected? 0x007DFF:0x0000)
      .width('100%')
      .height('100%')
      .textAlign(TextAlign.Center)
      .borderRadius(15)
      .onClick((event:ClickEvent)=>{
        this.cell.selected=!this.cell.selected
      })
  }
}

重要参考： 如何解决使用@State修饰对象数组，数据变化时页面不刷新问题 https://developer.huawei.com/consumer/cn/doc/architecture-guides/develop-arkui-44-0000002069443792

**痛点1：**如何使用 Grid控件，想批量生成单元格就要用到 ForEach , 用到数组。

**痛点2：**直接使用数组，点击 【单元格】 中的 【Text控件】 后，onClick事件修改状态无法被记录，界面不刷新

**痛点3：**查了好久，才知道需要将【自定义类】打上 @Observed 标记；然后自定义组件，在组件中声明类实例，打上 @ObjectLink标

走了一大圈冤枉路。好在搞定！