文章目录Divider 核心API介绍完整示例代码代码功能模块解析1 默认水平分割线2 自定义颜色与线条宽度3 带边距缩进分割线4 垂直方向分割线运行效果说明总结Divider 核心API介绍vertical(boolean)设置分割线方向true为垂直分割线false为水平分割线默认。color()设置分割线颜色支持十六进制色值、Color 枚举等格式。strokeWidth()设置分割线线条粗细单位 vp默认宽度为 1。margin()设置分割线外边距实现缩进、居中分隔效果。组件特性纯视觉分割组件无交互事件、无内容渲染仅用于布局分隔。完整示例代码// xxx.ets // xxx.ets Entry Component struct DividerDemo { build() { Column({ space: 20 }) { // 标题 Text(Divider 组件官方完整演示) .fontSize(24) .fontWeight(FontWeight.Bold) .width(100%) .textAlign(TextAlign.Center) .margin({ top: 20 }); // 1. 默认水平分割线 Text(1. 默认水平分割线).fontSize(16).fontColor(#666666).width(90%); Text(内容区域); // 默认分割线 Divider() Text(内容区域); // 2. 自定义颜色和宽度 Text(2. 自定义颜色 线条宽度).fontSize(16).fontColor(#666666).width(90%); Text(上部分内容); Divider() .color(#007DFF) // 分割线颜色 .strokeWidth(3) // 分割线宽度 Text(下部分内容); // 3. 设置左右边距 margin Text(3. 带边距的分割线居中效果).fontSize(16).fontColor(#666666).width(90%); Text(标题文字); Divider() .margin({ left: 20, right: 20 }) // 边距 .color(#999999) .strokeWidth(2); Text(内容文字); // 4. 垂直分割线需配合 Row 使用 Text(4. 垂直分割线).fontSize(16).fontColor(#666666).width(90%); Row() { Text(左侧) .padding(10); // 垂直分割线 Divider() .vertical(true) // 开启垂直方向 .strokeWidth(2) .color(#FF6F3D); Text(右侧) .padding(10); } } .width(100%) .backgroundColor(#FFFFFF) .height(100%) .padding({ bottom: 20 }); } }运行效果如图代码功能模块解析1 默认水平分割线无需配置任何属性直接使用Divider()采用系统默认灰色细线样式快速实现基础内容分隔满足极简分割需求。2 自定义颜色与线条宽度通过color自定义分割线主题色搭配strokeWidth调整线条粗细适配项目 UI 风格定制强化模块视觉区分度。3 带边距缩进分割线利用margin属性设置左右边距让分割线不铺满全屏实现缩进分隔效果常用于标题与正文、卡片内部分隔场景UI 更精致。4 垂直方向分割线搭配 Row 横向布局开启vertical(true)转为垂直分割线适用于左右布局、按钮分组、图文并排等横向元素分隔场景。运行效果说明页面以垂直 Column 布局排列六大演示案例结构清晰展示默认原生水平分割线、彩色粗分割线、缩进分割线、垂直分割线等多种样式横向 Row 容器内正常渲染垂直分割线布局适配无错乱列表案例模拟真实项目开发场景分割线缩进统一符合鸿蒙设计规范整体页面配色简洁层级分明可直接作为开发参考模板。总结Divider是鸿蒙开发中必备的基础布局分隔组件API 简洁、上手简单支持水平/垂直双向分割颜色、粗细、边距可灵活定制覆盖绝大多数UI分隔场景本文示例代码贴合官方文档规范包含基础用法与项目实战案例可直接复制复用合理使用 Divider 替代固定间距与背景色块分隔能够有效提升页面规范性与开发效率。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力