从零到一构建计数器应用：探索 HarmonyOS 鸿蒙Next基础开发流程

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

关键词

• 计数器应用
• 组件操作
• 事件响应
• 状态管理
• 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 {
  @State count: number = 0;

  build() {
    Column() {
      Text('计数器应用')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20 })
        .alignSelf(ItemAlign.Center)

      Text(this.count.toString())
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20, bottom: 20 })
        .alignSelf(ItemAlign.Center)

      Row() {
        Button('加') 
          .onClick(() => { this.count += 1; })
          .fontSize(20)
          .width('40%')
          .margin({ right: 10 })

        Button('减') 
          .onClick(() => { if (this.count > 0) { this.count -= 1; } })
          .fontSize(20)
          .width('40%')
          .margin({ left: 10 })
      }
      .justifyContent(FlexAlign.Center)

      Button('重置') 
        .onClick(() => { this.count = 0; })
        .fontSize(20)
        .width('100%')
        .margin({ top: 20 })
        .alignSelf(ItemAlign.Center)
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

1.3 界面说明

• count 是一个状态变量，显示当前的计数值。
• 加 和 减 按钮通过 onClick 事件监听点击，分别控制计数器增减。
• 使用 Column 和 Row 组件布局，以保持界面居中和对齐。

二、运行计数器应用

2.1 选择运行设备

• 在 DevEco Studio 中选择模拟器或连接真实设备。
• 点击 Run 按钮，应用将在设备上启动，并显示计数器界面。

2.2 操作说明

• 点击“加”按钮，计数器数值递增。
• 点击“减”按钮，计数器数值递减。
• 通过此交互体验，熟悉 @State 状态更新和界面实时刷新效果。

三、增强计数器功能

3.1 添加重置按钮

在 Row 组件下方，增加一个“重置”按钮，点击时将 count 重置为 0：

Button('重置')
  .onClick(() => {
    this.count = 0;
  })
  .fontSize(20)
  .width('100%')
  .margin({ top: 20 })
  .alignSelf(ItemAlign.Center)

3.2 设置边界条件

为 count 设置上下限，计数器数值不能小于 0：

Button('减')
  .onClick(() => {
    if (this.count > 0) {
      this.count -= 1;
    }
  })
  .fontSize(20)
  .width('40%')
  .margin({ left: 10 })

3.3 添加动态提示

在数值显示下方，增加一个文本提示，显示当前的计数状态：

Text(this.count > 10 ? '计数已达上限' : '')
  .fontSize(16)
  .fontColor(Color.Red)
  .alignSelf(ItemAlign.Center)
  .margin({ top: 10 })

四、项目结构管理

4.1 创建单独的组件文件

将计数器代码从 Index.ets 文件中提取出来，创建 Counter.ets 文件，以便项目结构清晰，利于维护。

@Component
export struct CounterTest {
  @State count: number = 0

  build() {
    Column() {
      Text('计数器应用')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20 })
        .alignSelf(ItemAlign.Center)

      Text(this.count.toString())
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 20, bottom: 20 })
        .alignSelf(ItemAlign.Center)

      Text(this.count > 10 ? '计数已达上限' : '')
        .fontSize(16)
        .fontColor(Color.Red)
        .alignSelf(ItemAlign.Center)
        .margin({ top: 10 })

      Row() {
        Button('加')
          .onClick(() => { this.count += 1 })
          .fontSize(20)
          .width('40%')
          .margin({ right: 10 })

        Button('减')
          .onClick(() => { if (this.count > 0) this.count -= 1 })
          .fontSize(20)
          .width('40%')
          .margin({ left: 10 })
      }
      .justifyContent(FlexAlign.Center)

      Button('重置')
        .onClick(() => { this.count = 0 })
        .fontSize(20)
        .width('100%')
        .margin({ top: 20 })
        .alignSelf(ItemAlign.Center)
    }
  }
}

4.2 在 Index.ets 文件中引用 Counter 组件

import { CounterTest } from './Counter'

@Entry
@Component
struct Index {
  build() {
    Column() {
      CounterTest()
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

4.3 代码模块化

通过模块化管理，项目结构更清晰，组件之间的耦合度更低，有助于后期维护和功能拓展。

五、常见开发问题与调试

1. 状态更新不及时：确保使用 @State 修饰变量，避免状态更改后界面不刷新问题。
2. 事件未响应：检查 onClick 回调函数是否在按钮组件中正确设置，确保事件能被正确触发。
3. 布局异常：使用 Column、Row 等布局组件时，注意 alignSelf 和 justifyContent 的使用，以保证界面元素正确对齐。

小结

本篇通过计数器项目演示了从界面设计、事件响应到状态管理的完整操作流程，帮助开发者熟悉鸿蒙开发的基础技能。通过组件化和模块化管理，项目结构更加清晰、扩展性更强，为后续开发打下了坚实的基础。

首发链接

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