HarmonyOS ArkUI 实战：从零打造计数器应用

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 的开发模式！