HarmonyOS应用开发实战：萌宠日记 - 基本信息列表与 Divider 分隔线

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 属性对照表

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 对齐方式对比

六、卡片标题设计

6.1 标题样式

Text('基本信息') .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor('#333333') .width('100%')

6.2 卡片标题规范

七、卡片内边距

7.1 内边距设计

.padding({ left: 16, right: 16, top: 16, bottom: 8 })

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 使用

9.2 分隔线设计原则

// 水平分隔线（默认） Divider().color('#F0EBE3') // 垂直分隔线 Divider() .vertical(true) .height(20) .color('#F0EBE3')

十、最佳实践

10.1 分隔线设计原则

有序列表 — Divider 使用的 5 个原则：

1. 颜色柔和：分隔线颜色不宜过深，使用#F0EBE3等浅色
2. 细线为主：默认高度 1vp 即可，过粗会显得笨重
3. 最后一项不分隔：最后一项下方不渲染分隔线
4. 间距适当时不用分隔线：如果间距足够区分，可以省略分隔线
5. 与背景色协调：分隔线颜色应与背景色和主题色协调

10.2 萌宠日记基本信息列表总结

总结

本文从萌宠日记的基本信息列表实现出发，深入解析了 Divider 分隔线和列表项布局的完整方法：

1. 数据模型：BasicInfoItem 接口定义标签-值结构
2. 列表渲染：ForEach 动态渲染 5 项基本信息
3. 标签-值布局：Row + Blank + 固定宽度实现左右分布
4. Divider 组件：color、height、width、vertical 属性
5. 条件渲染：indexOf 判断最后一项，避免多余的 Divider
6. 卡片标题：16fp Bold 的卡片标题样式规范
7. 内边距设计：左右 16vp，上下差异化
8. 数据驱动：@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