【HarmonyOS6】简易计数器开发

一、案例介绍

本教程将引导您使用HarmonyOS 6的ArkUI框架，开发一个简单的计数器应用。该应用具备增加、减少和重置计数功能，非常适合初学者入门，帮助您掌握组件开发、状态管理和事件处理的核心概念。

二、知识点概览

本案例将涵盖以下知识点：

@Entry装饰器：标记页面入口组件
@Component装饰器：定义自定义组件
@State装饰器：响应式状态管理
struct结构体：定义组件结构
build()方法：构建UI界面
Button组件：按钮交互
Text组件：文本显示
Flex布局：弹性布局管理
onClick事件：点击事件处理

三、开发步骤

3.1 创建新项目

可参考我之前写的文章：从零开始创建你的第一个HarmonyOS6项目-CSDN博客

3.2 基本知识点

3.2.1 @Entry装饰器

@Entry是一个特殊的装饰器，它告诉HarmonyOS这个组件是页面的入口。在单个UI页面中，仅允许存在一个由@Entry装饰的自定义组件作为页面的入口。

3.2.2 @Component装饰器

@Component用于定义一个自定义组件。有了这个装饰器，我们就可以创建自己的UI组件。

3.2.3 @State装饰器

@State用于定义响应式状态变量。当这个变量的值发生变化时，使用它的UI组件会自动重新渲染。

3.2.4 Text组件

Text组件是用于显示文本的基本组件。例如：

TypeScript 复制代码

Text('Hello World')

这将在屏幕上显示"Hello World"文字。

官方文档参考：Text-文本与输入-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

3.2.5 Button组件

Button组件是用于创建按钮的组件，用户可以点击它来触发某些操作：

TypeScript 复制代码

Button('点击我')

这将创建一个显示"点击我"的按钮。

官方文档参考：Button-按钮与选择-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

3.2.6 Flex布局

可以灵活排列、对齐和分配容器内的子组件空间，使元素根据可用空间扩展或收缩，以满足不同屏幕尺寸下的响应式布局。

官方文档参考：Flex-行列与堆叠-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

3.3 编写代码

TypeScript 复制代码

@Entry
@Component
struct Index {
  @State counter: number = 0;

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text(`计数: ${this.counter}`)
        .fontSize(50)
        .margin({ bottom: 30 } as Padding)
      
      Row({ space: 20 }) {
        Button('减少')
          .width(100)
          .height(60)
          .onClick(() => {
            this.decreaseCounter();
          })
        
        Button('重置')
          .width(100)
          .height(60)
          .onClick(() => {
            this.resetCounter();
          })
        
        Button('增加')
          .width(100)
          .height(60)
          .onClick(() => {
            this.increaseCounter();
          })
      }
    }
    .height('100%')
    .width('100%')
  }

  private increaseCounter(): void {
    this.counter += 1;
  }

  private decreaseCounter(): void {
    if (this.counter > 0) {
      this.counter -= 1;
    }
  }

  private resetCounter(): void {
    this.counter = 0;
  }
}

3.4 代码逐行解析

结构定义

TypeScript 复制代码

@Entry
@Component
struct Index {

这里我们定义了一个名为Index的组件，它是页面的入口。

状态变量

TypeScript 复制代码

@State counter: number = 0;

这定义了一个名为counter的状态变量，初始值为0，类型为number。

构建UI

TypeScript 复制代码

build() {

build()方法用于构建组件的UI界面。

Flex布局

TypeScript 复制代码

Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

Flex是一种弹性布局组件，我们设置了：

direction: FlexDirection.Column - 子元素垂直排列
alignItems: ItemAlign.Center - 子元素水平居中对齐
justifyContent: FlexAlign.Center - 子元素垂直居中对齐

显示计数的文本

TypeScript 复制代码

Text(`计数: ${this.counter}`)
  .fontSize(50)
  .margin({ bottom: 30 })

Text() ：创建文本组件

使用模板字符串 `计数: ${this.counter}`可以动态显示counter变量的值
当counter变化时，文本内容会自动更新

.fontSize(50) - 字体大小属性，设置文字大小为50

.margin() - 外边距属性，设置组件四周的外部空间，{ bottom: 30 }表示只设置底部外边距为30单位

按钮行

TypeScript 复制代码

Row({ space: 20 }) {
  Button('减少')
    .width(100)
    .height(60)
    .onClick(() => {
      this.decreaseCounter();
    })
  
  Button('重置')
    .width(100)
    .height(60)
    .onClick(() => {
      this.resetCounter();
    })
  
  Button('增加')
    .width(100)
    .height(60)
    .onClick(() => {
      this.increaseCounter();
    })
}

这创建了一行三个按钮，每个按钮有固定的宽高，并绑定了点击事件。

Row组件：水平排列的布局容器

{ space: 20 }参数设置子组件之间的间距为20单位
Row专门用于水平布局

Button组件：

Button('减少') - 创建按钮，显示文字"减少"
.width(100) - 设置组件宽度
可以是具体数值：100，也可以是百分比：'50%'
.height(60) - 设置组件高度
.onClick() - 点击事件监听器，参数是一个箭头函数：() => { ... }，当按钮被点击时，执行函数内的代码，这里分别调用的是三个不同的方法

事件处理方法

TypeScript 复制代码

private increaseCounter(): void {  // 私有方法，增加计数器
  this.counter += 1;  // 将counter的值加1
}

方法定义语法：

private- 访问修饰符，表示这个方法只能在当前类（struct）内部访问
increaseCounter- 方法名称，使用驼峰命名法
(): void- 表示这个方法没有返回值
{ this.counter += 1; }- 方法体，执行计数器加1操作

三个核心方法的功能：

1. increaseCounter() - 增加计数

TypeScript 复制代码

private increaseCounter(): void {
  this.counter += 1;  // 每次点击，counter值增加1
}

+=是复合赋值运算符，等同于 this.counter = this.counter + 1

2. decreaseCounter() - 减少计数

TypeScript 复制代码

private decreaseCounter(): void {
  if (this.counter > 0) {  // 条件判断：只有当counter大于0时
    this.counter -= 1;     // 才执行减1操作
  }
}

if语句：条件判断结构
this.counter > 0是判断条件
这样可以防止计数器变成负数

3. resetCounter() - 重置计数

TypeScript 复制代码

private resetCounter(): void {
  this.counter = 0;  // 直接将counter设为0
}

事件绑定流程：

按钮被点击 → 触发onClick事件 → 执行箭头函数 → 调用对应方法 → 更新counter值 → UI自动重新渲染

3.5 运行应用

点击"增加"按钮，数字会实时增加。

按两次"减少"按钮，数字每次减少1。

点击重置，数字归0

四、详解

4.1 响应式

在HarmonyOS中，当@State装饰的变量发生变化时，使用该变量的UI组件会自动重新渲染。这就是为什么当我们修改this.counter的值时，界面上显示的计数会自动更新。

4.2 事件

onClick事件处理函数采用了箭头函数。形式是：

TypeScript 复制代码

.onClick(() => {
  // 处理逻辑
})

五、总结

通过这个简单的计数器应用，我们初步了解了HarmonyOS开发的核心概念：

组件定义(@Entry、@Component)
状态管理(@State)
UI构建(build方法)
基础组件(Text、Button)
布局系统(Flex、Row)
事件处理(onClick)