HarmonyOS应用开发实战：萌宠日记 - Divider 分割线在表单中的运用

HarmonyOS应用开发实战：萌宠日记 - Divider 分割线在表单中的运用

前言

Divider 分割线是表单布局中重要的视觉分割工具，它在不同功能模块之间形成清晰的视觉边界。在萌宠日记的日记编辑器表单中，Divider 被放置在标题输入区和正文输入区之间，明确划分了“标题“和“正文“两个不同的输入区域。

本文将从萌宠日记中 Divider 在表单中的使用出发，深入解析分割线的设计原则、颜色选择、位置策略，以及与其他布局分隔方式的对比。

一、Divider 在日记编辑器中的位置

1.1 布局中的位置

┌─────────────────────────────────────┐ │ 标题 │ │ ┌───────────────────────────────┐ │ │ │ 快乐的周末 │ │ ← 标题输入区 │ └───────────────────────────────┘ │ │ ───────────────────────────────────│ ← Divider 分割线 │ 正文 │ │ ┌───────────────────────────────┐ │ │ │ 今天阳光很好，带豆豆去公园... │ │ ← 正文输入区 │ └───────────────────────────────┘ │ │ │ │ → 照片附件、心情选择、地点天气... │ └─────────────────────────────────────┘

1.2 代码实现

// WriteDiaryPage.ets — 标题与正文之间的 Divider Column({ space: 20 }) { // 标题输入区 Column({ space: 8 }) { Text('标题') .fontSize(14) .fontColor('#999999') TextInput({ placeholder: '快乐的周末' }) .fontSize(18) .fontWeight(FontWeight.Bold) .backgroundColor(Color.Transparent) .padding(0) } .width('100%') .alignItems(HorizontalAlign.Start) // Divider 分割线 Divider() .color('#F0EBE3') // 正文输入区 TextArea({ placeholder: '今天阳光很好，带豆豆去公园玩了飞盘...' }) .width('100%') .height(120) .fontSize(15) .backgroundColor(Color.Transparent) .padding(0) }

提示：Divider 放置在标题 Column与正文 TextArea之间，作为 Column 的子元素，通过 Column 的space: 20参数控制与上下内容的间距。这种布局方式让 Divider 自然地融入表单结构。

二、Divider 的样式配置

2.1 核心属性

Divider() .color('#F0EBE3') // 米色，与暖色主题协调 .height(1) // 高度 1vp（默认值） .width('100%') // 宽度 100%（默认值）

2.2 属性对照表

三、Divider 的颜色选择

3.1 颜色代码

// 萌宠日记使用的 Divider 颜色 Divider().color('#F0EBE3')

3.2 颜色值分析

3.3 颜色选择原则

萌宠日记选择#F0EBE3的原因：

• 与背景色协调：背景色#FFF8F0为暖白色，#F0EBE3同为暖色系
• 视觉轻柔：极浅的米色，提供分割功能但不抢夺注意力
• 品牌一致：与整体暖色调主题保持一致

四、Divider 在表单中的位置策略

4.1 萌宠日记中的 Divider 位置

4.2 位置设计原则

标题区域 ────────────────── ← Divider（位置在标题与正文之间） 正文区域 （无 Divider） 照片附件 （无 Divider） 心情选择 （无 Divider） 地点天气

在日记编辑器中，只有标题与正文之间使用了 Divider，其他模块之间仅通过 Column 的space: 20间距分隔。这是因为标题和正文是两个不同的输入类型（单行 vs 多行），需要明确的分割；而其他模块属于并列的辅助信息，间距分隔即可。

五、Divider 与间距的对比

5.1 两种分隔方式

5.2 萌宠日记的分隔策略

六、Divider 的垂直方向

6.1 垂直 Divider

// 垂直 Divider（在 Row 中使用） Row() { Text('左侧') Divider() .vertical(true) // 垂直方向 .height(20) // 高度 20vp .color('#F0EBE3') Text('右侧') }

6.2 垂直 vs 水平

七、Divider 的边距控制

7.1 外边距

// 带外边距的 Divider Divider() .color('#F0EBE3') .margin({ left: 16, right: 16 }) // 左右留白

7.2 无外边距 vs 有外边距

// 无外边距（萌宠日记使用）— 撑满宽度 Divider().color('#F0EBE3') // 有外边距 — 不撑满 Divider() .color('#F0EBE3') .margin({ left: 16, right: 16 })

八、Divider 在列表中的运用

8.1 列表项之间的 Divider

// 宠物档案页 — 基本信息列表中的 Divider ForEach(this.basicInfo, (item: BasicInfoItem) => { Row() { Text(item.label).fontSize(14).fontColor('#999999').width(80) Blank() Text(item.value).fontSize(14).fontColor('#333333') } .width('100%') .padding({ top: 12, bottom: 12 }) // 条件渲染 Divider（最后一项不显示） if (this.basicInfo.indexOf(item) < this.basicInfo.length - 1) { Divider().color('#F0EBE3') } })

九、自定义分割线

9.1 自定义样式

// 更明显的分割线 Divider() .color('#E0E0E0') .height(2) // 2vp 高度 // 带渐变色分割线 Divider() .height(1) .linearGradient({ direction: GradientDirection.Right, colors: [['#FFF3E0', 0], ['#F0EBE3', 0.5], ['#FFF3E0', 1]] })

十、最佳实践

10.1 Divider 使用原则

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

1. 颜色柔和：使用#F0EBE3等浅色，避免视觉干扰
2. 细线为主：默认 1vp 高度即可，过粗会显得笨重
3. 位置合理：仅在不同类型内容之间使用，同类型内容用间距隔开
4. 最后一项不显示：列表底部不显示 Divider
5. 与主题协调：颜色与整体色调保持一致

10.2 萌宠日记 Divider 总结

总结

本文从萌宠日记中Divider 分割线在表单中的运用出发，深入解析了分割线的完整使用方法：

1. 位置策略：标题与正文之间，区分不同类型的内容
2. 样式配置：color、height、width、margin 属性
3. 颜色选择：#F0EBE3米色，与暖色主题协调
4. Divider vs 间距：不同分隔强度的选择策略
5. 垂直 Divider：在 Row 中垂直分割
6. 列表中的 Divider：条件渲染避免最后一项显示
7. 自定义分割线：高度、渐变色等变体

Divider 虽小，但在表单布局中起着重要的视觉分割作用，合理使用能显著提升表单的可读性和用户体验。

下一篇我们将深入日记数据模型与状态同步，解析日记数据的完整存储结构和状态管理方案。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• Divider 组件参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-divider
• Column 组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-column
• 表单设计指南：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/form-design
• 布局基础：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkui-layout
• 颜色使用规范：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/color-usage
• 卡片设计指南：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/design-cards
• 用户体验设计：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ux-design
• 无障碍开发：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/accessibility-kit