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

Ne0inhk

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

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 的核心开发流程：

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

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

Could not load content