「Mac畅玩鸿蒙与硬件10」鸿蒙开发环境配置篇10 - 项目实战：计数器应用

本篇将通过一个简单的计数器应用，带你体验鸿蒙开发环境的实际操作流程。本项目主要练习组件的使用、事件响应和状态管理，帮助开发者熟悉基本的应用构建流程。

关键词

• 计数器应用
• 组件操作
• 事件响应
• 状态管理
• HarmonyOS 应用开发

---

一、创建计数器项目

1.1 在 DevEco Studio 中新建项目

• 打开 DevEco Studio，选择 File > New > Create Project。
• 选择适合的模板，填写项目名称为 CounterApp，确认创建项目。项目结构文件将在 src/main/ets/pages/Index.ets 文件中生成。

1.2 设计 Index.ets 初始代码

在 Index.ets 文件中，实现简单的界面设计，包括标题、计数器数字显示和两个按钮（“加”和“减”）：

// 入口组件定义，用于指定应用的启动页面
@Entry
@Component
struct Index {// 定义一个状态变量 count，用 @State 修饰符管理其状态变化@State count: number = 0;// build() 方法构建页面布局和组件build() {// 使用 Column 组件作为垂直布局容器Column() {// 应用标题文本Text('计数器应用').fontSize(24) // 设置标题字体大小为 24.fontWeight(FontWeight.Bold) // 设置字体为粗体.margin({ top: 20 }) // 顶部边距为 20.alignSelf(ItemAlign.Center) // 水平居中对齐// 显示当前计数值的文本组件Text(this.count.toString()) // 将 count 数值转换为字符串显示.fontSize(50) // 设置字体大小为 50.fontWeight(FontWeight.Bold) // 字体加粗.margin({ top: 20, bottom: 20 }) // 上下边距分别为 20.alignSelf(ItemAlign.Center) // 水平居中对齐// 使用 Row 组件实现水平布局，包含“加”和“减”按钮Row() {// "加"按钮，点击后计数值增加Button('加') .onClick(() => { // 添加点击事件处理函数this.count += 1; // 点击时，count 变量加 1}).fontSize(20) // 设置按钮字体大小为 20.