前言健康提醒列表是萌宠日记首页底部的重要功能模块它展示宠物即将到来的驱虫、疫苗、体检等健康事项。通过ForEach 动态渲染数据列表每个提醒项包含图标、标题、日期、倒计时等要素用户可以一目了然地掌握宠物的健康管理状态。本文将从萌宠日记的健康提醒列表实现出发深入解析 ForEach 动态渲染、列表项布局、数据绑定、以及交互反馈的设计。一、健康提醒列表整体设计1.1 数据模型// HomePage.ets — 健康提醒数据结构 interface HealthReminder { icon: string // 图标Emoji title: string // 提醒标题 date: string // 提醒日期 daysLeft: string // 倒计时文字 color: string // 图标背景色 } private healthReminders: HealthReminder[] [ { icon: ️, title: 驱虫, date: 2024.05.20, daysLeft: 还有15天, color: #FFF3E0 } ]1.2 列表渲染// 健康提醒区域 Column({ space: 12 }) { // 标题行 Row() { Text(健康提醒) .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor(#333333) Blank() Text() .fontSize(24) .fontColor(#F5A623) } .width(100%) // 列表项 ForEach(this.healthReminders, (reminder: HealthReminder) { Row({ space: 12 }) { // 图标 Column() { Text(reminder.icon).fontSize(24) } .width(44).height(44) .backgroundColor(reminder.color) .borderRadius(12) .justifyContent(FlexAlign.Center) // 标题和日期 Column({ space: 4 }) { Text(reminder.title) .fontSize(14) .fontWeight(FontWeight.Medium) .fontColor(#333333) Text(reminder.date) .fontSize(12) .fontColor(#999999) } .alignItems(HorizontalAlign.Start) Blank() // 倒计时 Text(reminder.daysLeft) .fontSize(12) .fontColor(#F5A623) // 右箭头 Text(›) .fontSize(18) .fontColor(#CCCCCC) } .width(100%) .padding(12) .backgroundColor(#FFFFFF) .borderRadius(12) }) } .width(100%) .padding({ left: 16, right: 16, bottom: 16 })提示健康提醒列表使用ForEach 动态渲染数据驱动 UI。当提醒数据发生变化时如新增、删除、更新倒计时UI 会自动同步更新这是 ArkTS 声明式编程的核心优势。二、列表项布局详解2.1 每行布局结构┌─────────────────────────────────────────┐ │ ┌────┐ ┌──────────────┐ 还有15天 › │ │ │️ │ │ 驱虫 │ │ │ │ │ │ 2024.05.20 │ │ │ └────┘ └──────────────┘ │ └─────────────────────────────────────────┘2.2 布局分解位置组件内容说明左侧Column图标 Emoji44×44vp 圆角容器左中Column标题 日期垂直排列间距 4vp右中Blank弹性占位将内容推到两端右侧Text倒计时橙色文字引人注意最右Text›右箭头暗示可点击三、标题行设计3.1 标题 添加按钮Row() { Text(健康提醒) .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor(#333333) Blank() Text() // 添加按钮 .fontSize(24) .fontColor(#F5A623) }3.2 添加按钮交互Text() .fontSize(24) .fontColor(#F5A623) .onClick(() { // 跳转到添加提醒页面 console.log(Add new reminder) })四、动态数据绑定4.1 数据驱动 UI// 数据变化时UI 自动更新 State healthReminders: HealthReminder[] [ { icon: ️, title: 驱虫, date: 2024.05.20, daysLeft: 还有15天, color: #FFF3E0 } ] // 添加新提醒 addReminder(reminder: HealthReminder): void { this.healthReminders.push(reminder) // State 装饰的数组变化后UI 自动重新渲染 } // 删除提醒 removeReminder(index: number): void { this.healthReminders.splice(index, 1) } // 更新倒计时 updateDaysLeft(): void { this.healthReminders this.healthReminders.map(item { // 重新计算倒计时 return { ...item, daysLeft: this.calculateDaysLeft(item.date) } }) }4.2 State 与数组变化数组操作UI 是否更新说明push()✅ 更新新增元素splice()✅ 更新删除/替换元素pop()✅ 更新移除末尾元素直接赋值✅ 更新this.arr newArr修改元素属性⚠️ 需解构使用...展开运算符创建新对象五、倒计时计算5.1 倒计时逻辑// 计算倒计时 calculateDaysLeft(targetDate: string): string { const today new Date() const target new Date(targetDate) const diffTime target.getTime() - today.getTime() const diffDays Math.ceil(diffTime / (1000 * 60 * 60 * 24)) if (diffDays 0) { return 还有${diffDays}天 } else if (diffDays 0) { return 今天 } else { return 已过期${Math.abs(diffDays)}天 } }5.2 倒计时样式// 根据剩余天数显示不同颜色 getDaysLeftColor(daysLeft: string): string { if (daysLeft.includes(今天)) { return #F44336 // 红色 — 紧急 } else if (daysLeft.includes(已过期)) { return #F44336 // 红色 — 已过期 } else { return #F5A623 // 橙色 — 正常 } }六、列表项交互6.1 点击事件Row({ space: 12 }) { // 列表项内容... } .width(100%) .padding(12) .backgroundColor(#FFFFFF) .borderRadius(12) .onClick(() { // 跳转到提醒详情/编辑页 console.log(Reminder clicked:, reminder.title) })6.2 完整交互设计交互元素行为实现列表项点击跳转详情onClick添加按钮跳转添加页onClick右箭头视觉提示可点击Text(›)倒计时状态指示颜色变化七、ForEach 渲染优化7.1 key 生成器// 为 ForEach 提供 key 生成器提高渲染效率 ForEach( this.healthReminders, (item: HealthReminder) { ListItem() { // 列表项内容 } }, (item: HealthReminder) item.title // key 生成器 )7.2 带 key 与不带 key 的对比对比维度不带 key带 key渲染效率重新渲染所有项只更新变化的项动画过渡不支持支持 item 动画数据变化全部重建精准更新推荐度小列表可用推荐使用八、列表项样式统一8.1 列表项容器// 列表项的统一样式 Row({ space: 12 }) { // 内容... } .width(100%) .padding(12) // 内边距 12vp .backgroundColor(#FFFFFF) // 白色背景 .borderRadius(12) // 12vp 圆角8.2 列表项间距// 列表项之间的间距由外层 Column 的 space 控制 Column({ space: 12 }) { // 标题行 // 列表项 1 // 列表项 2如果有 }九、空状态与加载状态9.1 空状态// 当没有提醒时显示空状态 if (this.healthReminders.length 0) { Column() { Text() .fontSize(48) Text(暂无健康提醒) .fontSize(14) .fontColor(#999999) .margin({ top: 8 }) Text(点击 添加提醒) .fontSize(12) .fontColor(#F5A623) .margin({ top: 4 }) } .width(100%) .padding(24) .alignItems(HorizontalAlign.Center) }9.2 加载状态State isLoading: boolean true aboutToAppear(): void { // 模拟加载数据 setTimeout(() { this.isLoading false }, 1000) } // 加载中显示 Loading if (this.isLoading) { LoadingProgress() .width(32).height(32) .color(#F5A623) }十、最佳实践10.1 列表设计原则有序列表 — 列表设计的 5 个原则数据驱动使用 ForEach 动态渲染数据变化 UI 自动更新信息层级图标 标题 日期 辅助信息从左到右重要性递减交互反馈可点击的列表项提供点击反馈状态指示倒计时使用颜色区分紧急程度空状态友好列表为空时展示引导文案10.2 萌宠日记健康提醒列表总结设计要素值说明布局Row Column 嵌套水平布局 垂直布局图标容器44×44vp圆角 12vp标题字号14fp中等强调日期字号12fp辅助信息倒计时色#F5A623橙色引人注意背景色#FFFFFF白色圆角12vp柔和总结本文从萌宠日记的健康提醒列表实现出发深入解析了列表动态渲染和数据绑定的完整方法数据模型HealthReminder 接口定义提醒数据结构列表渲染ForEach 动态渲染提醒列表列表项布局图标 标题 日期 倒计时 右箭头标题行设计标题 添加按钮动态数据绑定State 驱动 UI 自动更新倒计时计算日期计算与颜色状态指示交互反馈点击跳转、添加按钮空状态处理无提醒时的引导展示健康提醒列表展示了 ArkTS 中数据驱动 UI 的典型模式理解这一模式能为构建更复杂的列表页面打下基础。下一篇我们将深入图标与 Emoji 在 UI 中的应用解析 Emoji 作为 UI 图标的优势和选择策略。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源ForEach 使用https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-foreachState 装饰器https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-stateRow 组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-rowColumn 组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-columnBlank 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-blank文本溢出处理https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-text列表性能优化https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/list-optimization点击效果https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-click-effect