HarmonyOS应用开发实战萌宠日记 - 记录列表与状态标签前言记录列表是健康记录页中展示历史数据的核心组件。在萌宠日记的 HealthRecordPage 中记录列表以日期、体重值、状态标签三列布局展示每次的体重记录。状态标签使用绿色徽章标识“正常“状态让用户一目了然地掌握健康概况。本文将从萌宠日记的记录列表实现出发深入解析列表布局、状态标签设计、Divider 分割线以及数据驱动的列表渲染。一、记录列表整体设计1.1 数据结构// HealthRecordPage.ets — 体重记录数据结构 interface WeightRecord { date: string // 记录日期 weight: string // 体重值 status: string // 状态文字 statusColor: string // 状态颜色 } private weightRecords: WeightRecord[] [ { date: 2024-05-05, weight: 4.5 kg, status: 正常, statusColor: #4CAF50 }, { date: 2024-04-20, weight: 4.3 kg, status: 正常, statusColor: #4CAF50 }, { date: 2024-03-15, weight: 4.1 kg, status: 正常, statusColor: #4CAF50 } ]1.2 完整渲染// 记录列表 Column({ space: 12 }) { // 标题行 Row() { Text(记录列表) .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor(#333333) Blank() Button( 记录) .fontSize(13) .fontColor(#F5A623) .backgroundColor(#FFF3E0) .borderRadius(16) .padding({ left: 12, right: 12, top: 4, bottom: 4 }) } .width(100%) // 列表项 ForEach(this.weightRecords, (record: WeightRecord) { Row() { Text(record.date) .fontSize(14) .fontColor(#666666) .width(100) Text(record.weight) .fontSize(14) .fontColor(#333333) .layoutWeight(1) Text(record.status) .fontSize(12) .fontColor(record.statusColor) .backgroundColor(#E8F5E9) .padding({ left: 8, right: 8, top: 2, bottom: 2 }) .borderRadius(8) } .width(100%) .padding({ top: 12, bottom: 12 }) // 分隔线 if (this.weightRecords.indexOf(record) this.weightRecords.length - 1) { Divider().color(#F0EBE3) } }) } .width(100%) .backgroundColor(#FFFFFF) .borderRadius(12) .padding({ left: 16, right: 16, top: 12, bottom: 8 })提示记录列表使用三列布局日期、体重、状态标签通过width(100)固定日期列宽度layoutWeight(1)让体重列撑满剩余空间状态标签在右侧固定显示。这是 ArkUI 中实现列表项等分布局的典型模式。二、列表项布局2.1 三列布局┌─────────────────────────────────────┐ │ 2024-05-05 4.5 kg [正常] │ │ 2024-04-20 4.3 kg [正常] │ │ 2024-03-15 4.1 kg [正常] │ └─────────────────────────────────────┘2.2 列宽分配列内容宽度控制说明日期记录日期width(100)固定宽度日期格式统一体重体重值layoutWeight(1)弹性自动撑满状态状态标签自适应内容宽度标签 背景色三、状态标签设计3.1 标签样式Text(record.status) .fontSize(12) // 小字号 .fontColor(record.statusColor) // 动态颜色绿色 .backgroundColor(#E8F5E9) // 浅绿色背景 .padding({ left: 8, right: 8, top: 2, bottom: 2 }) // 内边距 .borderRadius(8) // 圆角3.2 状态颜色方案状态文字色背景色语义正常#4CAF50绿色#E8F5E9浅绿健康偏瘦#FF9800橙色#FFF3E0浅橙注意偏胖#F44336红色#FFEBEE浅红警告四、标题行设计4.1 标题 添加按钮Row() { Text(记录列表) .fontSize(16) .fontWeight(FontWeight.Bold) Blank() Button( 记录) .fontSize(13) .fontColor(#F5A623) .backgroundColor(#FFF3E0) .borderRadius(16) .padding({ left: 12, right: 12, top: 4, bottom: 4 }) }五、列表项间距5.1 垂直间距Row() { // 列表项内容 } .width(100%) .padding({ top: 12, bottom: 12 }) // 上下内边距 12vp5.2 列表容器间距Column({ space: 12 }) { // 标题行 // 列表项 } .padding({ left: 16, right: 16, top: 12, bottom: 8 })六、Divider 分隔线6.1 条件渲染// 最后一项不显示分隔线 if (this.weightRecords.indexOf(record) this.weightRecords.length - 1) { Divider().color(#F0EBE3) }七、数据驱动7.1 添加记录// 添加新的体重记录 addWeightRecord(date: string, weight: string, status: string): void { const newRecord: WeightRecord { date: date, weight: ${weight} kg, status: status, statusColor: this.getStatusColor(weight) } // 插入到列表头部 this.weightRecords [newRecord, ...this.weightRecords] } // 根据体重判断状态 getStatusColor(weight: number): string { if (weight 4.0 weight 5.0) return #4CAF50 // 正常 if (weight 4.0) return #FF9800 // 偏瘦 return #F44336 // 偏胖 }八、状态标签的扩展8.1 多种状态// 根据状态动态生成标签 function getStatusTag(status: string, statusColor: string): void { Text(status) .fontSize(12) .fontColor(statusColor) .backgroundColor(getStatusBgColor(statusColor)) .padding({ left: 8, right: 8, top: 2, bottom: 2 }) .borderRadius(8) } // 获取状态背景色 function getStatusBgColor(color: string): string { const bgMap: Recordstring, string { #4CAF50: #E8F5E9, // 绿色 → 浅绿 #FF9800: #FFF3E0, // 橙色 → 浅橙 #F44336: #FFEBEE, // 红色 → 浅红 } return bgMap[color] || #F5F5F5 }九、无障碍适配Row() { Text(record.date).fontSize(14) Text(record.weight).fontSize(14) Text(record.status).fontSize(12) } .accessibilityText(${record.date}体重${record.weight}状态${record.status})十、最佳实践10.1 记录列表设计原则有序列表 — 记录列表设计的 5 个原则三列清晰日期、数值、状态三列信息层级分明状态可视化使用颜色标签直观标识状态固定列宽日期列固定宽度保证对齐最后一项无分隔线保持列表底部整洁标题 操作按钮标题行包含添加按钮方便操作10.2 萌宠日记记录列表总结设计要素值说明列数3 列日期、体重、状态日期列宽100vp固定体重列layoutWeight(1)弹性状态标签文字 背景色圆角 8vp状态颜色动态绿/橙/红分隔线#F0EBE3最后一项不显示总结本文从萌宠日记的记录列表与状态标签实现出发深入解析了列表展示的完整方法数据模型WeightRecord 接口定义记录数据三列布局日期固定、体重弹性、状态自适应状态标签绿色背景 白色文字圆角徽章标题行记录列表标题 添加按钮列表间距上下 12vp 内边距Divider 分隔线条件渲染最后一项不显示数据驱动添加记录自动更新列表状态扩展多种状态的颜色方案下一篇我们将深入添加记录按钮设计解析健康记录页中添加按钮的样式与交互。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Row 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-rowDivider 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-dividerButton 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-buttonForEach 使用https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-foreach颜色使用规范https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/color-usage列表性能优化https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/list-optimization无障碍开发https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/accessibility-kit交互反馈https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/interaction-feedback