本文展示了一个使用ArkUI框架实现的数字卡片游戏界面。代码定义了一个Index46组件，包含3x3的网格布局，共9个GridItem。初始状态显示背面图片（kapian），点击后翻转为数字图片（1）。通过@State管理的n1变量记录当前翻开的卡片索引，isWinning标记游戏胜利状态。网格采用响应式布局（columnsTemplate和rowsTemplate均为'1fr1fr1fr'），图片填充模式为ImageFit.Fill，并带有1像素边框。该组件实现了基础的卡片翻转交互逻辑。
@Entry
@Component
struct Index46 {
  @State n1: number = -1
  @State isWinning: boolean = false
  build() {
    Column() {
      Grid() {
        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item: number, index: number) => {
          GridItem() {
            if(index==this.n1){
              Image($r('app.media.1'))
                .objectFit(ImageFit.Fill)
                .border({width:1})
            }else {
              Image($r('app.media.kapian'))
                .objectFit(ImageFit.Fill)
                .border({width:1})
                .onClick(()=>{
                  this.n1=index
                })
            }
          }
        })
      }
      .columnsTemplate('1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr')
    }.width('100%')
    .height('100%')
  }
}