HarmonyOS开发实战：九九乘法表应用实现-代码聚汇网

HarmonyOS开发实战：九九乘法表应用实现

蝨孨槑黽·2026-08-09·阅读 22 GEO检测（免费）

HarmonyOSArkUIForEach

|难度：普通|阅读约 15 分钟

1. 项目背景与目标

作为一名长期关注HarmonyOS生态的开发者，最近在社区看到不少关于"如何在HarmonyOS上实现基础教学应用"的讨论。其中，九九乘法表作为数学启蒙的经典案例，特别适合用来演示HarmonyOS的基础UI开发能力。今天我就来分享一个完整的实现方案，这个项目虽然简单，但涵盖了HarmonyOS开发中的几个关键知识点：

基础布局的实现（特别是网格化展示）
数据绑定与动态渲染
样式自定义与适配
性能优化的基础考量

这个案例特别适合刚接触HarmonyOS的开发者练手，也适合作为教学演示。我会从零开始，带你完整实现一个支持横竖屏切换、样式可配置的乘法表应用。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 开发环境准备

2.1 工具安装与配置

首先确保你的开发环境已经就绪。目前HarmonyOS的主流开发工具是DevEco Studio，建议使用3.1或以上版本。安装时注意：

JDK版本要求：OpenJDK 11或以上
Node.js版本：14.19.1或以上
Gradle版本：7.4.2或以上

安装完成后，在Preferences > SDK Manager中确保已安装：

HarmonyOS SDK
JS SDK（如果使用ArkUI开发）
Toolchains

提示：国内开发者建议配置华为镜像源加速下载，在gradle.properties中添加：
code复制systemProp.http.proxyHost=mirrors.huaweicloud.com
systemProp.http.proxyPort=8080

2.2 项目创建

打开DevEco Studio，选择"Create HarmonyOS Project"
模板选择"Empty Ability"，这是最基础的模板
语言选择JS/eTS（本文以eTS为例）
设备类型选择Phone
项目命名为"MultiplicationTable"

创建完成后，项目结构如下：

code复制resources/        # 资源文件
src/main/
  ├── ets/        # 业务逻辑代码
  ├── resources/  # 资源文件
  └── module.json # 模块配置

3. 界面设计与实现

3.1 布局方案选择

九九乘法表本质是一个9x9的网格，在HarmonyOS中有几种实现方案：

Grid容器：最直观的方案，但灵活性较低
Flex布局嵌套：通过行列嵌套实现，控制更精细
ForEach循环：动态生成子组件，代码更简洁

经过实际测试，方案3在代码简洁性和性能上表现最好。核心思路是：

使用两个嵌套的ForEach循环（行和列）
每个单元格用Text组件展示计算式

3.2 核心代码实现

在pages/Index.ets中实现主界面：

typescript复制@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('九九乘法表')
        .fontSize(24)
        .margin({ bottom: 20 })
      
      // 乘法表主体
      Column() {
        ForEach(Array.from({length:9}, (_,i)=>i+1), (i) => {
          Row() {
            ForEach(Array.from({length:i}, (_,j)=>j+1), (j) => {
              Text(`${j}×${i}=${i*j}`)
                .fontSize(16)
                .padding(10)
                .borderRadius(5)
                .backgroundColor('#f5f5f5')
                .margin(2)
            })
          }
        })
      }
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

这段代码的关键点：

外层ForEach生成1-9的行
内层ForEach生成每行的列（列数等于行号）
Text组件显示"a×b=c"格式的算式
添加了简单的样式美化

3.3 样式优化

为了让乘法表更美观，我们可以：

添加交替行背景色：

typescript复制.backgroundColor(i % 2 === 0 ? '#ffffff' : '#f9f9f9')

响应式布局：

typescript复制.width(display.width * 0.9)  // 占屏幕宽度的90%

横竖屏适配：

typescript复制.onAppear(() => {
  display.on('change', () => {
    // 屏幕旋转时重新布局
  })
})

4. 功能扩展

4.1 添加交互功能

基础的乘法表是静态的，我们可以增加一些交互：

点击高亮：

typescript复制@State selected: number[] = []

Text(`${j}×${i}=${i*j}`)
  .onClick(() => {
    this.selected = [i, j]
  })
  .backgroundColor(
    this.selected[0] === i && this.selected[1] === j 
    ? '#e6f7ff' 
    : '#f5f5f5'
  )

记忆功能（使用Preferences存储）：

typescript复制import preferences from '@ohos.data.preferences'

// 存储
preferences.put('lastSelected', JSON.stringify(this.selected))

// 读取
const value = await preferences.get('lastSelected', '[]')
this.selected = JSON.parse(value)

4.2 性能优化

当表格规模增大时（比如扩展到19×19），需要注意：

复用组件：确保ForEach的key参数正确设置

typescript复制ForEach(..., (item) => {
  // ...
}, item => item.toString())

懒加载：对于大表格可以使用LazyForEach

typescript复制LazyForEach(this.dataSource, (item) => {
  // ...
})

减少嵌套层级：避免过深的组件嵌套

5. 常见问题与解决方案

5.1 布局错乱问题

现象：横竖屏切换后表格显示不全

解决方案：

使用百分比宽度而非固定值
监听屏幕旋转事件并重新计算布局
添加scrollable属性允许滚动

typescript复制Column() {
  // 表格内容
}
.scrollable(ScrollDirection.Vertical)

5.2 性能卡顿

现象：快速滚动时卡顿

优化方案：

使用更轻量的组件（Text代替复杂的自定义组件）
减少不必要的状态更新
使用@Reusable装饰器复用组件

typescript复制@Reusable
@Component
struct TableCell {
  // ...
}

5.3 样式不一致

现象：不同设备上显示效果差异大

解决方案：

使用vp/fp单位代替px

typescript复制.fontSize(16 * vp)

提取公共样式到CSS文件
使用媒体查询适配不同设备

6. 项目进阶方向

完成基础功能后，可以考虑以下扩展：

语音播报功能：

typescript复制import audio from '@ohos.multimedia.audio'

// 点击时朗读算式
audio.createAudioPlayer().then(player => {
  player.play(`这是${j}乘以${i}等于${i*j}`)
})

测试模式：

随机隐藏部分结果让用户填写
计时挑战模式

多语言支持：

typescript复制$r('app.string.multiply_format')  // "{{a}}×{{b}}={{c}}"

云端同步：

使用HarmonyOS的云函数保存用户进度
跨设备同步学习记录

7. 项目打包与发布

7.1 调试技巧

无线调试（HarmonyOS 4.2.0+）：

bash复制hdc shell bm get -u  # 获取设备UDID
hdc target mount -t  # 无线连接

日志查看：

typescript复制console.log('当前选择:', this.selected)

7.2 打包注意事项

在build-profile.json5中配置应用信息：

json复制"app": {
  "bundleName": "com.example.multitable",
  "vendor": "example",
  "versionCode": 1,
  "versionName": "1.0.0"
}

生成签名证书：

bash复制keytool -genkeypair -alias "multitable" -keyalg RSA -keysize 2048 ...

构建HAP包：

菜单Build > Build Hap(s)/APP(s) > Build Hap(s)

7.3 上架华为应用市场

注册华为开发者账号
在AppGallery Connect创建应用
提交审核材料：

应用截图
隐私政策
应用描述

8. 开发心得与建议

在实际开发这个乘法表应用的过程中，我总结了以下几点经验：

布局选择很重要：最初尝试用Grid布局，发现灵活性不足；改用Flex+ForEach后控制更精准。建议复杂布局先从简单原型开始验证。
性能要早考虑：即使像乘法表这样简单的应用，当扩展到19×19时也会遇到性能问题。建议开发初期就加入性能测试环节。
样式适配是难点：不同设备的显示差异比预期大，特别是字体渲染。建议尽早在不同设备上测试，使用相对单位（vp/fp）。
交互细节影响体验：简单的点击高亮效果大大提升了应用的可玩性。建议基础功能完成后，花时间打磨交互细节。

这个项目虽然简单，但完整走完了HarmonyOS应用开发的全部流程。对于初学者来说，通过实现这类经典案例，可以快速掌握核心开发技能。下一步我计划将其扩展为一个完整的数学学习工具包，加入更多互动元素和个性化学习功能。