2. 乘法表探险

• 这是一个基于 HarmonyOS (ArkTS) 开发的教学应用项目，旨在将抽象的乘法算式转化为直观的几何图形。
  本应用通过交互式九九乘法表，帮助学生建立“数形结合”的思维。用户点击乘法表中的任意格子（如“3×4”），屏幕下方会动态生成一个 3行 4列的彩色方块矩阵。通过动画效果，学生可以清晰地看到乘法结果“12”是由 12 个小方块组成的，直观理解乘法就是求“几个相同加数的和”，以及“面积=长×宽”的几何意义。
  

完整代码

@Entry
@Component
struct MultiplicationAreaModel {
  // 状态变量：选中的行数（乘数1）
  @State selectedRow: number = 0
  // 状态变量：选中的列数（乘数2）
  @State selectedCol: number = 0
  // 是否显示结果
  @State showResult: boolean = false

  // 颜色数组，用于生成多彩的方块
  private colors: string[] = ['#FFCDD2', '#F8BBD0', '#E1BEE7', '#D1C4E9', '#C5CAE9', '#BBDEFB', '#B3E5FC', '#B2EBF2', '#B2DFDB', '#C8E6C9']

  build() {
    Column({ space: 15 }) {
      // 标题
      Text('乘法面积模型演示')
        .fontSize(28)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 10 })

      Text('点击下方格子，查看方块阵列')
        .fontSize(14)
        .fontColor('#666')

      // ================= 九九乘法表区域 =================
      Scroll() {
        Grid() {
          // 生成 9x9 的网格
          ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (row: number) => {
            ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (col: number) => {
              GridItem() {
                Text(`${row * col}`)
                  .fontSize(14)
                  .fontColor(this.selectedRow === row && this.selectedCol === col ? '#FFFFFF' : '#333333')
                  .width(38)
                  .height(38)
                  .textAlign(TextAlign.Center)
                  .borderRadius(4)
                  .backgroundColor(this.selectedRow === row && this.selectedCol === col ? '#FF5722' : '#F5F5F5')
                  .borderWidth(1)
                  .borderColor('#EEEEEE')
                  .onClick(() => {
                    this.updateSelection(row, col)
                  })
              }
            })
          })
        }
        .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr') // 9列
        .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr') // 9行
        .width('100%')
        .height(360)
      }
      .scrollable(ScrollDirection.Vertical) // 如果屏幕小可以滚动
      .scrollBar(BarState.Off)

      // ================= 结果展示与可视化区域 =================
      if (this.showResult) {
        Column({ space: 10 }) {
          // 算式显示
          Text(`${this.selectedRow} × ${this.selectedCol} = ${this.selectedRow * this.selectedCol}`)
            .fontSize(24)
            .fontWeight(FontWeight.Bold)
            .fontColor('#333')

          Text(`含义：${this.selectedRow} 行，每行 ${this.selectedCol} 个`)
            .fontSize(16)
            .fontColor('#666')

          // 动态方块矩阵
          Grid() {
            // 生成 total 个方块
            ForEach(this.generateArray(this.selectedRow * this.selectedCol), (item: number) => {
              GridItem() {
                // 每个小方块带有动画效果
                Row()
                  .width('100%')
                  .height('100%')
                  .backgroundColor(this.colors[item % this.colors.length])
                  .borderRadius(4)
                  .border({ width: 1, color: '#FFFFFF' })
              }
              .transition({ type: TransitionType.All, opacity: 0 })
              .animation({ duration: 500, curve: Curve.EaseOut, delay: item * 20 }) // 依次出现的动画
            })
          }
          // 关键：动态设置列数，决定矩阵的形状
          .columnsTemplate(`1fr `.repeat(this.selectedCol).trim())
          .rowsTemplate(`1fr `.repeat(this.selectedRow).trim())
          .width(this.selectedCol * 30 + 10) // 根据列数动态调整总宽度
          .height(this.selectedRow * 30 + 10) // 根据行数动态调整总高度
          .margin({ top: 10 })
        }
        .width('100%')
        .padding(15)
        .backgroundColor('#FFFFFF')
        .borderRadius(12)
        .shadow({ radius: 10, color: '#EEEEEE', offsetX: 0, offsetY: 2 })
      } else {
        // 占位提示
        Column() {
          Text('👆 请点击上方乘法表')
            .fontSize(16)
            .fontColor('#999')
        }
        .width('100%')
        .height(150)
        .justifyContent(FlexAlign.Center)
      }

    }
    .width('100%')
    .height('100%')
    .padding(15)
    .backgroundColor('#F9F9F9')
  }

  // 更新选择并触发动画
  private updateSelection(row: number, col: number) {
    // 先关闭显示，重置状态（为了重新触发进入动画）
    this.showResult = false

    // 延迟极短时间后重新赋值，形成动画刷新效果
    setTimeout(() => {
      this.selectedRow = row
      this.selectedCol = col
      this.showResult = true
    }, 50)
  }

  // 生成指定长度的数字数组
  private generateArray(length: number): number[] {
    const array: number[] = []
    for (let i = 0; i < length; i++) {
      array.push(i)
    }
    return array
  }
}