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 }) // 外边距默认 03.2 Divider 属性对照表属性类型默认值萌宠日记配置说明colorColor系统默认#F0EBE3米色与主题色系协调heightLength1未配置默认 1vp线条粗细widthLength100%未配置默认 100%线条宽度marginMargin{ top: 0, bottom: 0 }未配置外边距verticalbooleanfalse未配置是否垂直方向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 卡片标题规范卡片标题字号字重颜色说明基本信息16fpBold深灰档案页成长记录16fpBold深灰档案页今日记录16fpBold深灰首页健康提醒16fpBold深灰首页体重变化16fpBold深灰健康记录页七、卡片内边距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健康记录记录列表项之间#F0EBE39.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深灰色列表项间距上下 12vppadding 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-dividerForEach 使用https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-foreachBlank 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-blankRow 组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-rowText 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textState 装饰器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