文档知识库教程OpenHarmony【免费下载链接】CangjieCorpus本仓库为仓颉编程语言语料库聚焦 仓颉编程语言 核心知识体系整合官方开发指南、API 文档、典型代码示例及语法规范等多维度资源经结构化处理与专业标注构建为支持 RAG检索增强生成技术 的高质量知识基座适配智能编码助手、学习辅助工具等应用开发需求。 欢迎开发者基于本语料库构建仓颉语言智能应用推动鸿蒙开发生态智能化升级项目地址https://gitcode.com/Cangjie/CangjieCorpus点击查看免费下载本文基于 OpenHarmony 仓颉Cangjie应用开发参考文档系统讲解 ArkUI(CJ) 中Divider分隔器组件的创建方式、四个核心组件属性color、lineCap、strokeWidth、vertical的完整用法与默认值并结合横向/纵向分割线的完整可运行示例帮助开发者掌握在仓颉声明式 UI 中分隔不同内容块、内容元素的实战能力。组件概述Divider是 ArkUI(CJ) 框架提供的分隔器组件用于分隔不同的内容块或内容元素是列表分组、按钮间隔、卡片内容划分等场景的基础构建单元。组件特性如下项目说明模块导入import kit.ArkUI.*子组件无系统能力SystemCapability.ArkUI.ArkUI.Full起始版本22通用属性/事件全部支持由于Divider支持全部通用属性与通用事件除了本文介绍的四项组件属性外还可以自由叠加布局如width、height、margin、padding、视觉如opacity、backgroundColor以及交互事件如onClick等能力这也是官方示例中能够用Divider().vertical(true).height(22)...构造纵向细线的原因。创建组件init()Divider通过默认构造方法创建实例无需任何初始化参数public init()功能创建一个分隔器组件。系统能力SystemCapability.ArkUI.ArkUI.Full起始版本22创建之后通常直接在build()声明式语法中实例化并通过链式调用设置组件属性。例如Divider().strokeWidth(8).color(0xF1F3F5)即为“一条 8vp 宽、浅灰色的横向分割线”。组件属性详解color设置分割线颜色public func color(value: ?ResourceColor): This功能设置分割线的颜色。系统能力SystemCapability.ArkUI.ArkUI.Full起始版本 22。参数名类型必填默认值说明value?ResourceColor是-分割线颜色。初始值0x33182431关于ResourceColor类型根据 通用类型定义Color、UInt32、Int64、AppResource均实现了ResourceColor接口因此分割线颜色既可以直接传 32 位整型色值如0xF1F3F5、示例中的0x182431也可以使用Color枚举常量或资源引用。整型色值默认按0xAARRGGBB格式解析例如初始值0x33182431是一个带 33约 20% 不透明透明度的深蓝灰色使默认分割线呈现柔和的“毛玻璃分隔”观感。lineCap设置分割线端点样式public func lineCap(value: ?LineCapStyle): This功能设置当前在容器中的分割线端点样式。系统能力SystemCapability.ArkUI.ArkUI.Full起始版本 22。参数名类型必填默认值说明value?LineCapStyle是-分割线条的端点样式。初始值LineCapStyle.ButtLineCapStyle是一个实现EquatableLineCapStyle的枚举定义于 cj-common-types.md包含三种取值枚举值含义Butt线条两端为平行线不额外扩展默认值Round在线条两端延伸半个圆直径等于线宽Square在线条两端延伸半个圆直径等于线宽官方文档如此描述端点样式在较粗的分割线上才容易观察差异例如strokeWidth(8)的粗横线若使用LineCapStyle.Round两端会呈现圆角半圆效果。strokeWidth设置分割线宽度public func strokeWidth(value: ?Length): This功能设置当前在容器中的分割线宽度。系统能力SystemCapability.ArkUI.ArkUI.Full起始版本 22。参数名类型必填默认值说明value?Length是-分割线宽度。不指定像素单位时默认单位 vp。不支持百分比设置。优先级低于通用属性height超过通用属性设置大小时按照通用属性进行裁切。部分设备硬件中存在 1 像素取整后分割线不显示问题建议使用 2 像素。初始值1.0.px这里有三个关键实现细节值得注意单位规则Length接口由Float64、Int64、AppResource实现参见 Length 定义因此strokeWidth(8)直接写数值即可不指定单位时默认按vp解析也可通过.px、.fp、.lpx等后缀指定显式单位。优先级裁切strokeWidth的优先级低于通用属性 height。例如横向分割线若被父容器布局或height通用属性约束了高度当strokeWidth大于该高度时会按通用属性值裁切显示。硬件像素取整坑官方明确提示部分设备硬件上 1px 分割线经取整后可能完全不显示因此实际业务中建议使用不小于 2 的宽度或者按 vp 设置以保证跨设备可见性。vertical设置分割线方向public func vertical(value: ?Bool): This功能设置分割线的方向。系统能力SystemCapability.ArkUI.ArkUI.Full起始版本 22。参数名类型必填默认值说明value?Bool是-设置分割线的方向。初始值falsefalse默认横向分割线沿父容器宽度方向延展适合在Column中分隔上下两块内容true纵向分割线沿父容器高度方向延展适合在Row中分隔左右元素例如分隔两个按钮。纵向分割线的高度由布局决定通常配合通用属性height控制其显示长度见下方示例中的.height(22)。完整示例横向与纵向分割线以下示例完整继承自官方文档 cj-blank-divider-divider.md定义了Divider的方向、颜色及宽度同时演示横向与纵向两种典型用法package ohos_app_cangjie_entry import kit.ArkUI.* import ohos.arkui.state_macro_manage.* Entry Component class EntryView { func build() { Column() { // 使用横向分割线场景 Text(Horizontal divider) .fontSize(9) .fontColor(0xCCCCCC) List() { ForEach( [1, 2, 3], { item: Int64, idx: Int64 ListItem() { Text(list item.toString()) .width(100.percent) .fontSize(14) .fontColor(0x182431) .textAlign(TextAlign.Start) } .width(244) .height(48) } ) }.padding(left: 24, bottom: 8) Divider() .strokeWidth(8) .color(0xF1F3F5) List() { ForEach( [4, 5], { item: Int64, idx: Int64 ListItem() { Text(list item.toString()) .width(100.percent) .fontSize(14) .fontColor(0x182431) .textAlign(TextAlign.Start) } .width(244) .height(48) } ) }.padding(left: 24, top: 8) // 使用纵向分割线场景 Text(Vertical divider) .fontSize(9) .fontColor(0xCCCCCC) Column() { Column() { Row() .width(288) .height(64) .backgroundColor(0x30C9F0) .opacity(0.3) Row() { Button(Button) .width(136) .height(22) .fontSize(16) .fontColor(0x007DFF) .fontWeight(FontWeight.W500) .backgroundColor(Color.Transparent) Divider() .vertical(true) .height(22) .color(0x182431) .opacity(0.6) .margin(left: 8, right: 8) Button(Button) .width(136) .height(22) .fontSize(16) .fontColor(0x007DFF) .fontWeight(FontWeight.W500) .backgroundColor(Color.Transparent) }.margin(top: 17) } .width(336) .height(152) .backgroundColor(0xFFFFFF) .borderRadius(24) .padding(24) } .width(100.percent) .height(168) .backgroundColor(0xF1F3F5) .justifyContent(FlexAlign.Center) .margin(top: 8) } .width(100.percent) .padding(top: 24) } }示例要点解析横向分割线页面中部Divider().strokeWidth(8).color(0xF1F3F5)将上下两个List列表块分隔开。这里使用了 8vp 的较粗分割线与浅灰底色0xF1F3F5视觉上形成“分组带”效果同时验证了strokeWidth数值参数默认 vp与color整型色值的直接传参方式。纵向分割线在Row容器内两个Button之间插入Divider().vertical(true)并用通用属性.height(22)控制纵向长度、.color(0x182431)与.opacity(0.6)控制颜色深浅、.margin(left: 8, right: 8)控制与两侧按钮的间距。这体现了“组件属性 通用属性”组合定制的模式——vertical决定方向其余尺寸、颜色、位置均由通用属性完成。布局配合外层Column使用.width(100.percent)撑满宽度内层白色卡片使用.borderRadius(24)与.padding(24)构成典型的卡片式分组结构横向Divider恰好承担卡片内部区块间的视觉分隔职责。使用建议细线可见性默认宽度为 1.0.px受硬件取整影响在部分设备上可能不显示生产环境建议使用 2vp 以上的宽度或明确指定 vp 单位。方向与尺寸联动横向分割线宽度由strokeWidth控制、长度由父容器宽度决定纵向分割线高度由通用属性height控制。注意strokeWidth优先级低于height超出部分会被裁切。默认配色初始颜色0x33182431带 20% 透明度与深色主题文字颜色协调浅色主题下通常显式指定更柔和的灰阶色值。与其他空白组件配合若需要的是占位空白而非可见线条可使用同目录下的Blank组件参见 Blank 组件文档Divider与Blank同属空白/分隔类组件可按需选用。相关参考文档Divider 组件官方参考Blank 组件参考通用类型定义ResourceColor / Length / LineCapStyle通用属性尺寸width/height以上 API 均要求系统能力SystemCapability.ArkUI.ArkUI.Full起始版本为 22请在对应版本的 OpenHarmony 仓颉开发环境中验证运行。赞分享文档知识库教程OpenHarmony【免费下载链接】CangjieCorpus本仓库为仓颉编程语言语料库聚焦 仓颉编程语言 核心知识体系整合官方开发指南、API 文档、典型代码示例及语法规范等多维度资源经结构化处理与专业标注构建为支持 RAG检索增强生成技术 的高质量知识基座适配智能编码助手、学习辅助工具等应用开发需求。 欢迎开发者基于本语料库构建仓颉语言智能应用推动鸿蒙开发生态智能化升级项目地址https://gitcode.com/Cangjie/CangjieCorpus点击查看免费下载相关推荐如何用React Native Elements Divider组件打造专业分隔线从基础到高级样式定制全指南如何用React Native Elements Divider组件打造专业分隔线从基础到高级样式定制全指南 React Native Elements是一个UI组件移动开发前端仓颉 ArkUI 文本显示组件详解Text 与 Span 的创建、样式定制与事件响应实战指南仓颉 ArkUI 文本显示组件详解Text 与 Span 的创建、样式定制与事件响应实战指南 本篇技术指南以 OpenHarmony 仓颉CangjieA文档知识库教程OpenHarmonyTDesign Divider 分割线组件详解从基础用法到源码级样式定制TDesign Divider 分割线组件详解从基础用法到源码级样式定制 导读 TDesign 是腾讯开源的企业级设计体系 tdesign miniprog前端UI组件小程序设计系统移动开发上一篇3分钟解决Windows苹果USB驱动问题告别iPhone无法识别的烦恼下一篇如何在3分钟内彻底解决Windows上iPhone USB网络共享驱动问题终极轻量级解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考