【HarmonyOS next】ArkUI-X休闲益智连连看【进阶】

// 跨平台UI组件示例 - 在双端自动适配原生控件
Grid() {
  ForEach(this.gridData, (row: Cell[], i: number) => {
    ForEach(row, (cell: Cell, j: number) => {
      GridItem() {
        this.cellView(cell, i, j) // 自动转为iOS UICollectionViewCell或HarmonyOS GridItem
      }
    })
  })
}

# 安装DevEco Studio 5.0.4后只需：
npm install -g @arkui-x/cli 
arkui-x init LinkGame

@ObservedV2 
class Cell {
  @Trace value: number = 0 // 数据变更自动触发双端UI更新
}

// 棋盘数据变更后，iOS/HarmonyOS同时重绘网格
removeIcons(): void {
  const newGrid = [...this.gridData] // 使用响应式更新
  newGrid[r1][c1].value = 0
  this.gridData = newGrid // 触发双端UI同步
}

// BFS核心算法在双端完全一致
private bfsCheck(): boolean {
  const queue: QueueItem[] = [] // 使用标准TypeScript语法
  while (queue.length > 0) {
    // 路径计算逻辑无需平台适配
    if (current.row === r2 && current.col === c2) {
      return current.turns <= 2 // 直接返回计算结果
    }
  }
}

// 使用逻辑像素确保双端显示一致
GridItem()
  .width(`${600/this.COLS}lpx`) // lpx自动适配屏幕密度
  .height(`${600/this.COLS}lpx`)

// 图标组件根据平台自动选择渲染引擎
@Builder
cellView() {
  Text(`${value.value}`)
    // 在HarmonyOS使用ArkUI渲染，在iOS转为UILabel
}