HarmonyOS应用开发实战：萌宠日记 - 基本信息列表与 Divider 分隔线
前言
在萌宠日记的宠物档案页中，基本信息列表以标签-值的键值对形式展示宠物的生日、到家日、体重、性格、绝育情况等核心数据。列表项之间使用Divider 分隔线进行视觉分割，既保持了信息的清晰度，又维持了卡片布局的简洁性。
本文将从萌宠日记的基本信息列表实现出发，深入解析 Divider 组件的使用、列表项布局、数据驱动渲染，以及分隔线设计的视觉原则。
一、基本信息列表整体设计
1.1 数据模型
// PetProfilePage.ets — 基本信息数据结构 interface BasicInfoItem { label: string // 标签名（如"生日"） value: string // 标签值（如"2022-02-14"） } private basicInfo: BasicInfoItem[] = [ { label: '生日', value: '2022-02-14' }, { label: '到家日', value: '2022-04-20' }, { label: '体重', value: '4.5 kg' }, { label: '性格', value: '活泼、黏人、贪吃' }, { label: '绝育情况', value: '已绝育' } ]1.2 列表渲染
// 基本信息卡片 Column({ space: 12 }) { // 标题 Text('基本信息') .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor('#333333') .width('100%') // 列表项 ForEach(this.basicInfo, (item: BasicInfoItem) => { Row() { Text(item.label) .fontSize(14) .fontColor('#999999') .width(80) Blank() Text(item.value) .fontSize(14) .fontColor('#333333') .textAlign(TextAlign.End) } .width('100%') .padding({ top: 12, bottom: 12 }) // 分隔线（除最后一项外） if (this.basicInfo.indexOf(item) < this.basicInfo.length - 1) { Divider() .color('#F0EBE3') } }) } .width('100%') .backgroundColor('#FFFFFF') .borderRadius(16) .padding({ left: 16, right: 16, top: 16, bottom: 8 }) .shadow({ radius: 4, color: '#10000000', offsetY: 2 })提示：Divider 分隔线使用条件渲染— 通过
indexOf判断当前项是否为最后一项，只有非最后一项才渲染分隔线。这样最后一项下方就不会有多余的分隔线，保持了卡片底部的整洁。
二、列表项布局
2.1 标签-值布局
Row() { Text(item.label) // 左侧标签 .fontSize(14) .fontColor('#999999') .width(80) // 固定宽度，保证对齐 Blank() // 弹性占位 Text(item.value) // 右侧值 .fontSize(14) .fontColor('#333333') .textAlign(TextAlign.End) } .width('100%') .padding({ top: 12, bottom: 12 })2.2 布局结构
┌─────────────────────────────────────┐ │ 生日 2022-02-14 │ │ 到家日 2022-04-20 │ │ 体重 4.5 kg │ │ 性格 活泼、黏人、贪吃 │ │ 绝育情况 已绝育 │ └─────────────────────────────────────┘三、Divider 组件详解
3.1 核心属性
Divider() .color('#F0EBE3') // 分隔线颜色：米色 .height(1) // 分隔线高度：1vp（默认） .width('100%') // 宽度：100%（默认） .margin({ top: 0, bottom: 0 }) // 外边距（默认 0）3.2 Divider 属性对照表
| 属性 | 类型 | 默认值 | 萌宠日记配置 | 说明 |
|---|---|---|---|---|
color | Color | 系统默认 | '#F0EBE3' | 米色，与主题色系协调 |
height | Length | 1 | 未配置（默认 1vp） | 线条粗细 |
width | Length | '100%' | 未配置（默认 100%） | 线条宽度 |
margin | Margin | { top: 0, bottom: 0 } | 未配置 | 外边距 |
vertical | boolean | false | 未配置 | 是否垂直方向 |
3.3 Divider 颜色选择
// 分隔线颜色应与背景色协调 Divider().color('#F0EBE3') // 米色，与白色背景和暖色主题协调四、条件渲染分隔线
4.1 条件判断
ForEach(this.basicInfo, (item: BasicInfoItem) => { // 列表项内容 Row() { ... } // 条件渲染分隔线 if (this.basicInfo.indexOf(item) < this.basicInfo.length - 1) { Divider().color('#F0EBE3') } })4.2 渲染效果
生日 2022-02-14 ────────────────────────────────────── ← 分隔线（有） 到家日 2022-04-20 ────────────────────────────────────── ← 分隔线（有） 体重 4.5 kg ────────────────────────────────────── ← 分隔线（有） 性格 活泼、黏人、贪吃 ────────────────────────────────────── ← 分隔线（有） 绝育情况 已绝育 ← 无分隔线（最后一项）五、标签宽度对齐
5.1 固定宽度对齐
Text(item.label) .width(80) // 标签固定宽度 80vp，保证所有标签左对齐5.2 对齐方式对比
| 对齐方式 | 代码 | 效果 | 适用场景 |
|---|---|---|---|
| 固定宽度 | width(80) | 标签宽度一致，值右对齐 | 标签文字长度差异不大 |
| 百分比 | width('30%') | 按比例分配 | 大屏设备 |
| 自适应 | 不设宽度 | 内容宽度 | 标签文字长度相近 |
六、卡片标题设计
6.1 标题样式
Text('基本信息') .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor('#333333') .width('100%')6.2 卡片标题规范
| 卡片标题 | 字号 | 字重 | 颜色 | 说明 |
|---|---|---|---|---|
| 基本信息 | 16fp | Bold | 深灰 | 档案页 |
| 成长记录 | 16fp | Bold | 深灰 | 档案页 |
| 今日记录 | 16fp | Bold | 深灰 | 首页 |
| 健康提醒 | 16fp | Bold | 深灰 | 首页 |
| 体重变化 | 16fp | Bold | 深灰 | 健康记录页 |
七、卡片内边距
7.1 内边距设计
.padding({ left: 16, right: 16, top: 16, bottom: 8 })| 方向 | 值 | 说明 |
|---|---|---|
| 左 | 16vp | 与卡片左边框距离 |
| 右 | 16vp | 与卡片右边框距离 |
| 上 | 16vp | 标题与卡片上边框距离 |
| 下 | 8vp | 最后一项与卡片下边框距离 |
7.2 底部留白
底部padding: 8vp而非16vp，是因为最后一项的padding-bottom已经提供了 12vp 的间距，加上 8vp 的卡片内边距，总间距为 20vp，视觉上刚好合适。
八、数据驱动渲染
8.1 ForEach 渲染
ForEach(this.basicInfo, (item: BasicInfoItem) => { // 列表项内容 })8.2 数据修改
// 修改基本信息数据 updatePetInfo(label: string, newValue: string): void { const index = this.basicInfo.findIndex(item => item.label === label) if (index !== -1) { this.basicInfo[index] = { ...this.basicInfo[index], value: newValue } // @State 驱动 UI 自动更新 } }九、其他 Divider 使用场景
9.1 萌宠日记中的 Divider 使用
| 页面 | 使用位置 | 颜色 |
|---|---|---|
| 宠物档案页 | 基本信息列表项之间 | #F0EBE3 |
| 首页 | 日记标题和内容之间 | #F0EBE3 |
| 个人中心 | 菜单项之间 | #F0EBE3 |
| 健康记录 | 记录列表项之间 | #F0EBE3 |
9.2 分隔线设计原则
// 水平分隔线（默认） Divider().color('#F0EBE3') // 垂直分隔线 Divider() .vertical(true) .height(20) .color('#F0EBE3')十、最佳实践
10.1 分隔线设计原则
有序列表 — Divider 使用的 5 个原则：
- 颜色柔和：分隔线颜色不宜过深，使用
#F0EBE3等浅色 - 细线为主：默认高度 1vp 即可，过粗会显得笨重
- 最后一项不分隔：最后一项下方不渲染分隔线
- 间距适当时不用分隔线：如果间距足够区分，可以省略分隔线
- 与背景色协调：分隔线颜色应与背景色和主题色协调
10.2 萌宠日记基本信息列表总结
| 设计要素 | 值 | 说明 |
|---|---|---|
| 标签宽度 | 80vp | 固定宽度，左对齐 |
| 值对齐 | 右对齐 | textAlign(TextAlign.End) |
| 标签字号 | 14fp | 灰色 |
| 值字号 | 14fp | 深灰色 |
| 列表项间距 | 上下 12vp | padding top/bottom |
| 分隔线颜色 | #F0EBE3 | 米色 |
| 分隔线高度 | 1vp | 细线 |
总结
本文从萌宠日记的基本信息列表实现出发，深入解析了 Divider 分隔线和列表项布局的完整方法：
- 数据模型：BasicInfoItem 接口定义标签-值结构
- 列表渲染：ForEach 动态渲染 5 项基本信息
- 标签-值布局：Row + Blank + 固定宽度实现左右分布
- Divider 组件：color、height、width、vertical 属性
- 条件渲染：indexOf 判断最后一项，避免多余的 Divider
- 卡片标题：16fp Bold 的卡片标题样式规范
- 内边距设计：左右 16vp，上下差异化
- 数据驱动：@State 驱动 UI 自动更新
Divider 虽小，但在列表布局中起着重要的视觉分割作用，合理使用能让界面更加清晰有序。
下一篇我们将深入成长记录卡片网格布局，解析档案页中成长记录区块的实现。
如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！
相关资源：
- Divider 组件参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-divider
- ForEach 使用：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-foreach
- Blank 组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-blank
- Row 组件参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row
- Text 组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-text
- @State 装饰器：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-state
- 卡片设计指南：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/design-cards
- 布局基础：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkui-layout
)
 agent和组件)