HarmonyOS ArkUI 实战：从零打造一个精美的计数器应用

在移动应用开发中，“计数器（Counter）” 永远是检验 UI 框架能力的“Hello World”。它不仅涉及基础的 UI
渲染，还涵盖了状态管理（State Management）、布局嵌套（Nested Layout）
以及用户交互（Event Handling） 三大核心知识点。

今天，我们将通过解析一个完整的 ArkUI 计数器代码，带你深入理解如何构建一个既美观又具有交互性的 HarmonyOS 应用。
完整效果

核心功能与界面概览

我们最终实现的界面如下图所示：

• 顶部：页面标题。
• 中部：一个醒目的数字显示区域（当前计数）。
• 底部：三个操作按钮（减、重置、加），呈水平排列。
• 底部提示：根据计数状态显示不同的提示文字。

整个界面布局清晰，色彩鲜明，是一个非常典型的卡片式设计。

代码深度解析

我们将代码拆解为三个部分进行讲解：状态定义、UI 结构 和 交互逻辑。

1. 状态管理：@State 装饰器

在 ArkUI 中，数据驱动视图是核心思想。我们使用 @State 装饰器来声明一个组件内部的状态变量。

@State count: number = 0;

• 作用：count 变量用于存储当前的计数值，初始值为 0。
• 响应式：一旦 count 的值发生变化（例如用户点击了“+”），框架会自动检测到数据变化，并重新渲染所有依赖于 count 的 UI 组件（如显示数字的 Text 和底部的提示文字），无需手动操作 DOM。

2. UI 布局结构：Column 与 Row 的嵌套

整个页面的最外层是一个 Column，它负责将页面内容垂直分为三个部分：标题、显示区、操作区。

外层容器设置：

Column({ space: 24 }) {
  // ... 子组件 ...
}
.width('100%')
.height('100%')
.padding(24)
.backgroundColor('#F5F5F5')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)

• space: 24：这是 Column 的构造参数，用于设置其直接子组件之间的垂直间距为 24vp（视觉像素）。
• 全屏适配：通过 .width('100%') 和 .height('100%') 让容器撑满屏幕。
• 居中对齐：.justifyContent(FlexAlign.Center)（垂直居中）和 .alignItems(HorizontalAlign.Center)（水平居中）确保了整个计数器卡片在屏幕中央显示。

3. 中间显示区：带样式的 Column

这一部分是视觉焦点，用于展示当前的计数值。

Column() {
  Text(this.count.toString())
    .fontSize(64)
    .fontWeight(FontWeight.Medium)
    .fontColor('#007AFF')
    .padding(20)
}
.width(200)
.height(200)
.border({ width: 2, color: '#007AFF', radius: 16 })
.justifyContent(FlexAlign.Center)
.backgroundColor('#F0F8FF')

• 布局与样式：这里使用了一个内层的 Column 来包裹数字 Text。通过设置宽高（200x200）、圆角边框（radius: 16）和背景色，我们创建了一个漂亮的卡片。
• 内容居中：.justifyContent(FlexAlign.Center) 确保了大号数字在卡片内部垂直居中。
• 数据绑定：this.count.toString() 实时将状态变量转换为字符串并显示。

4. 底部操作区：Row 与按钮交互

这是用户进行操作的区域，包含三个按钮。

Row({ space: 16 }) {
  Button('-') ... .onClick(() => { this.count-- })
  Button('重置') ... .onClick(() => { this.count = 0 })
  Button('+') ... .onClick(() => { this.count++ })
}
.width('100%')
.justifyContent(FlexAlign.Center)

• 水平排列：使用 Row 容器，并设置 space: 16，使三个按钮之间保持 16vp 的水平间距。
• 按钮样式：每个 Button 都设置了圆角（.borderRadius()）和特定的背景色，以区分功能（红色减、橙色重置、绿色加）。
• 事件处理：
  • 减法：点击 - 按钮，执行 this.count--。
  • 重置：点击“重置”按钮，执行 this.count = 0。
  • 加法：点击 + 按钮，执行 this.count++。

5. 动态提示文字：三元表达式

Text(this.count === 0 ? '计数器已重置' : `当前计数：${this.count}`)
.fontColor(this.count === 0 ? '#999999' : '#666666')

• 动态内容：这里展示了 ArkUI 的灵活性。Text 组件的内容直接使用了 JavaScript 的三元表达式。当计数为 0 时显示“已重置”，否则显示具体数字。
• 动态样式：同理，文字颜色也根据 count 的值动态切换，体现了“数据即样式”的理念。

总结

通过这个简单的计数器示例，我们完整地实践了 HarmonyOS ArkUI 的核心开发流程：

1. 数据驱动：使用 @State 管理组件状态。
2. 声明式 UI：使用 Column 和 Row 搭建界面骨架，通过链式调用设置样式。
3. 事件响应：通过 .onClick 等事件修饰符绑定交互逻辑。

这个项目虽然简单，但它涵盖了构建复杂应用所需的所有基础元素。希望这篇解析能帮助你更好地理解 ArkUI 的开发模式！