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: Record<string, 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-row
- Divider 组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-divider
- Button 组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-button
- ForEach 使用：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
