一、应用概述喝水提醒Water Reminder是一款健康辅助类应用帮助用户记录每日饮水量并以可视化水杯的形式直观展示饮水进度。用户每点击一次「喝一杯」按钮水杯中的水位就会上升一格同时显示累计饮水量毫升和鼓励性文字提示。从健康角度看每日饮用 8 杯水约 2000ml是广为流传的健康建议。该应用以此为目标通过视觉反馈和正向鼓励两个心理机制激励用户达成每日饮水目标。从技术角度看这是一个展示Stack 层叠中动态高度变化、条件文字渲染和响应式布局的绝佳案例。二、技术架构与组件树2.1 整体架构Entry Component struct index33 ├── Column (根容器) │ ├── Row (顶部导航栏) │ └── Column (主内容区, 居中) │ ├── Text (目标: 8 杯) │ ├── Stack (水杯可视化) │ │ ├── Column (水杯容器, 180×200, 圆角边框) │ │ │ └── Column (水位填充, 动态高度) │ │ └── Column (水杯文字叠加层) │ │ ├── Text () │ │ └── Text ({count}/{target}) │ ├── Text ({totalMl}ml / {target*glassSize}ml) │ ├── Text (鼓励语, 条件变化) │ ├── Button ( 喝一杯) │ └── Row (辅助按钮) │ ├── Button (重置) │ └── Button (目标)2.2 状态变量设计State count: number 0; // 已饮杯数 State target: number 8; // 日目标杯数 State glassSize: number 200; // 每杯毫升数三个State变量构成了应用的全部状态。其中glassSize被标记为State虽然当前未通过 UI 修改它但保留为状态变量意味着未来可以轻松添加用户自定义杯量功能。三、核心代码深度解析3.1 喝水逻辑与边界保护addWater() { if (this.count this.target) { this.count; } }addWater()方法包含明确的边界检查只有当前杯数小于目标杯数时才递增。这防止了用户过度点击导致进度超过 100% 的异常情况。当count target时点击按钮不再产生任何效果——这是一种软锁止设计比禁用按钮更温和用户仍然可以感受到点击反馈。3.2 计算属性进度、水量与鼓励语get progress(): number { return (this.count / this.target) * 100; } get totalMl(): number { return this.count * this.glassSize; } get encouragement(): string { if (this.count this.target) return 达标了很棒; if (this.count this.target * 0.75) return 快达标了; if (this.count this.target * 0.5) return 继续加油; if (this.count this.target * 0.25) return 多喝点水; return 记得喝水; }三个计算属性将原始数据count、target转化为用户友好的显示信息progress以百分比形式返回进度值可用于替代传统的环形进度条totalMl根据杯数和杯量计算总毫升数encouragement基于不同进度区间返回不同的鼓励文字配合对应的 emoji 表情鼓励语的区间设计合理在 0%、25%、50%、75%、100% 五个关键节点切换文字避免了过于频繁的变化也让用户在每个进步阶段都能获得正向反馈。3.3 水杯可视化——Stack 层叠的核心Stack() { // 水杯背景和动态水位 Column() { Text().width(160) .height(this.count 0 ? 160 * (this.count / this.target) : 0) .backgroundColor(#4FC3F7) .borderRadius({ bottomLeft: 20, bottomRight: 20 }) .alignSelf(ItemAlign.Center) } .width(180).height(200).backgroundColor(#E1F5FE) .borderRadius(20).justifyContent(FlexAlign.End) .border({ width: 3, color: #81D4FA }) // 水杯上的文字叠加 Column() { Text().fontSize(24) Text(${this.count}/${this.target}).fontSize(16) .fontWeight(FontWeight.Bold).fontColor(#0277BD) } .width(100%).height(100%) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) }水杯渲染的核心逻辑分为两层第一层杯体 水位外层 Column 代表整个水杯180×200使用#E1F5FE极浅蓝色作为空杯颜色borderRadius(20)创建圆角杯体border添加 3px 的边框模拟玻璃质感。内层 Column 代表水位它的height根据count/target比例动态计算160 * (this.count / this.target)。当count 0时高度为 0——水杯看起来是空的。这里有一个重要的布局细节外层 Column 设置了justifyContent(FlexAlign.End)这意味着内层水位 Column 会从底部开始排列。结合alignSelf(ItemAlign.Center)让水位水平居中水的填充效果就是从杯底逐渐上升到杯顶——完美模拟了真实倒水的视觉效果。borderRadius({ bottomLeft: 20, bottomRight: 20 })为水位底部添加圆角与水杯的底部圆角匹配。水位顶部是平的这与真实透明玻璃杯中水的视觉效果一致。第二层文字叠加第二个 Column 使用position叠加在水杯之上Stack 的特性显示 表情和count/target计数。justifyContent(Center)和alignItems(Center)确保文字在杯体中央显示。3.4 激励按钮与辅助操作Button( 喝一杯).width(200).height(56).borderRadius(28) .backgroundColor(#4FC3F7).fontSize(22).margin({ top: 12 }) .onClick(() this.addWater()) Row({ space: 8 }) { Button(重置).width(90).height(40).borderRadius(20) .backgroundColor(#9E9E9E) .onClick(() { this.count 0 }) Button(目标).width(90).height(40).borderRadius(20) .backgroundColor(#FF9800) .onClick(() { this.target }) }.margin({ top: 8 })三个按钮的设计体现了清晰的信息层级主按钮「 喝一杯」最大的尺寸200×56最醒目的颜色蓝色系是用户最频繁的操作次按钮「重置」中等大小灰色用于重置杯数次按钮「目标」橙色用于增加每日目标「目标」按钮允许用户灵活调整目标——如果某天想多喝水可以增加目标杯数。但需要注意的是当前版本没有「目标-」按钮这可以作为一个改进点。四、HarmonyOS 特性分析4.1 动态高度的响应式渲染本例最值得关注的技术点是基于State的动态高度变化。当count递增时.height(this.count 0 ? 160 * (this.count / this.target) : 0)ArkTS 的响应式系统会自动重新计算高度值并重新渲染。这种数据驱动高度的模式适用于进度条/进度环可伸缩面板加载动画数据可视化的柱状图4.2 borderRadius 的精细控制.borderRadius({ bottomLeft: 20, bottomRight: 20 })ArkTS 的borderRadius支持对象参数可以对四个角分别设置圆角值。这是 CSS 中border-radius的增强版本比传统的四值简写更直观。4.3 语义化颜色系统应用使用了统一的蓝色系配色背景#E1F5FE极浅蓝水位#4FC3F7中蓝与主按钮一致边框#81D4FA浅蓝文字#0277BD深蓝这种单色系设计让视觉风格高度统一用户看到蓝色系就能联想到水的主题。在 HarmonyOS 中颜色值支持六位十六进制#RRGGBB或八位#AARRGGBB格式。五、UI/UX 设计与最佳实践5.1 视觉反馈的心理学应用应用的核心理念是通过即时视觉反馈激励用户行为水位上升的满足感每次点击蓝色水位都会增高这种可视化的进步给人成就感计数实时更新水杯中央的count/target数字实时变化鼓励语的阶段性变化从「记得喝水」到「达标了很棒」五种文字对应五个进步阶段5.2 交互反馈的细节按钮溢出保护当达到目标后点击主按钮无效而不是报错温和的视觉风格圆角按钮、柔和的蓝色系、大号字体给人友好的感觉重置安全重置仅清空杯数count不影响目标target和杯量glassSize避免用户误操作导致所有设置丢失5.3 无障碍设计建议对于喝水提醒这类高频使用的健康应用建议增加系统通知提醒通过ohos.notification定时发送喝水通知振动反馈每次喝水时提供短暂振动语音播报鼓励语通过 TTS 语音读出来六、可扩展思路历史记录与统计使用ohos.data.preferences持久化每日饮水数据显示周/月趋势图。自定义杯量允许用户设置不同的杯量如 250ml、300ml适配不同水杯。定时提醒利用后台任务定时发送喝水通知每隔 1-2 小时提醒一次。多主题支持不同的水杯样式和背景主题增加趣味性。喝水挑战加入连续达标天数的统计用游戏化方式激励用户。七、总结喝水提醒应用以 83 行简洁代码实现了一个完整的健康追踪工具。它的核心价值在于Stack 层叠实现复杂视觉水杯 水位 文字的叠加展示了 Stack 在可视化组件中的强大能力动态高度驱动进度显示用State控制 Column 高度替代了传统的 Progress 组件计算属性简化业务逻辑progress、totalMl、encouragement三个 getter 将原始数据转化为展示信息正向激励设计通过鼓励语和可视化进度利用心理学原理帮助用户养成好习惯这个应用的代码模式——状态驱动的动态尺寸变化 层叠布局的可视化——可以轻松复用到电池电量显示、存储空间指示器、技能升级条等场景。下一期我们将继续健康主题探讨一个更具互动性的应用——计步器Pedometer学习如何使用Progress的环形样式和Ring类型打造精美的运动数据看板。本文是 HarmonyOS 应用开发实战系列第 33 期更多内容请关注专栏。