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 属性对照表属性类型默认值萌宠日记配置说明colorColor系统默认#F0EBE3米色柔和不刺眼heightLength1未配置默认 1vp细线视觉轻盈widthLength100%未配置默认 100%撑满父容器宽度marginMargin{ top: 0, bottom: 0 }未配置默认 0无外边距verticalbooleanfalse未配置默认水平水平分割线三、Divider 的颜色选择3.1 颜色代码// 萌宠日记使用的 Divider 颜色 Divider().color(#F0EBE3)3.2 颜色值分析色值RGB视觉效果说明#F0EBE3(240, 235, 227)极浅的米色柔和、不显眼#E0E0E0(224, 224, 224)浅灰色中性#D0D0D0(208, 208, 208)灰色较明显#CCCCCC(204, 204, 204)中灰色较突出3.3 颜色选择原则萌宠日记选择#F0EBE3的原因与背景色协调背景色#FFF8F0为暖白色#F0EBE3同为暖色系视觉轻柔极浅的米色提供分割功能但不抢夺注意力品牌一致与整体暖色调主题保持一致四、Divider 在表单中的位置策略4.1 萌宠日记中的 Divider 位置使用位置页面分割的内容效果标题与正文之间日记编辑器标题输入区与正文输入区明确区分两个输入区域基本信息列表项之间宠物档案页生日、体重等信息项逐项分隔清晰可读菜单项之间个人中心设置、收藏、草稿等菜单功能分组4.2 位置设计原则标题区域 ────────────────── ← Divider位置在标题与正文之间 正文区域 无 Divider 照片附件 无 Divider 心情选择 无 Divider 地点天气在日记编辑器中只有标题与正文之间使用了 Divider其他模块之间仅通过 Column 的space: 20间距分隔。这是因为标题和正文是两个不同的输入类型单行 vs 多行需要明确的分割而其他模块属于并列的辅助信息间距分隔即可。五、Divider 与间距的对比5.1 两种分隔方式分隔方式代码视觉强度适用场景DividerDivider().color(#F0EBE3)中等不同类型的内容之间间距Column({ space: 20 })较弱同类型的内容之间卡片白色背景卡片强独立信息模块5.2 萌宠日记的分隔策略分隔强度实现方式使用场景强卡片白色背景 圆角 阴影宠物信息、基本信息中Divider水平线标题与正文之间弱间距Column space 20vp正文、照片、心情、地点六、Divider 的垂直方向6.1 垂直 Divider// 垂直 Divider在 Row 中使用 Row() { Text(左侧) Divider() .vertical(true) // 垂直方向 .height(20) // 高度 20vp .color(#F0EBE3) Text(右侧) }6.2 垂直 vs 水平方向属性适用场景水平默认上下元素之间的分割垂直vertical(true)左右元素之间的分割七、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 个原则颜色柔和使用#F0EBE3等浅色避免视觉干扰细线为主默认 1vp 高度即可过粗会显得笨重位置合理仅在不同类型内容之间使用同类型内容用间距隔开最后一项不显示列表底部不显示 Divider与主题协调颜色与整体色调保持一致10.2 萌宠日记 Divider 总结使用场景颜色高度宽度边距日记编辑器#F0EBE31vp100%无基本信息列表#F0EBE31vp100%无菜单列表#F0EBE31vp100%无总结本文从萌宠日记中Divider 分割线在表单中的运用出发深入解析了分割线的完整使用方法位置策略标题与正文之间区分不同类型的内容样式配置color、height、width、margin 属性颜色选择#F0EBE3米色与暖色主题协调Divider vs 间距不同分隔强度的选择策略垂直 Divider在 Row 中垂直分割列表中的 Divider条件渲染避免最后一项显示自定义分割线高度、渐变色等变体Divider 虽小但在表单布局中起着重要的视觉分割作用合理使用能显著提升表单的可读性和用户体验。下一篇我们将深入日记数据模型与状态同步解析日记数据的完整存储结构和状态管理方案。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Divider 组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-dividerColumn 组件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