• 文档
• 知识库
• 教程
• OpenHarmony

本文基于 OpenHarmony 仓颉（Cangjie）应用开发参考文档，系统讲解 ArkUI(CJ) 中Divider分隔器组件的创建方式、四个核心组件属性（color、lineCap、strokeWidth、vertical）的完整用法与默认值，并结合横向/纵向分割线的完整可运行示例，帮助开发者掌握在仓颉声明式 UI 中分隔不同内容块、内容元素的实战能力。

组件概述

Divider是 ArkUI(CJ) 框架提供的分隔器组件，用于分隔不同的内容块或内容元素，是列表分组、按钮间隔、卡片内容划分等场景的基础构建单元。组件特性如下：

由于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。

关于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。

LineCapStyle是一个实现Equatable<LineCapStyle>的枚举，定义于 cj-common-types.md，包含三种取值：

端点样式在较粗的分割线上才容易观察差异：例如strokeWidth(8)的粗横线若使用LineCapStyle.Round，两端会呈现圆角半圆效果。

strokeWidth：设置分割线宽度

public func strokeWidth(value: ?Length): This

功能：设置当前在容器中的分割线宽度。系统能力SystemCapability.ArkUI.ArkUI.Full，起始版本 22。

这里有三个关键实现细节值得注意：

1. 单位规则：Length接口由Float64、Int64、AppResource实现（参见 Length 定义），因此strokeWidth(8)直接写数值即可；不指定单位时默认按vp解析，也可通过.px、.fp、.lpx等后缀指定显式单位。
2. 优先级裁切：strokeWidth的优先级低于通用属性 height。例如横向分割线若被父容器布局或height通用属性约束了高度，当strokeWidth大于该高度时，会按通用属性值裁切显示。
3. 硬件像素取整坑：官方明确提示，部分设备硬件上 1px 分割线经取整后可能完全不显示，因此实际业务中建议使用不小于 2 的宽度，或者按 vp 设置以保证跨设备可见性。

vertical：设置分割线方向

public func vertical(value: ?Bool): This

功能：设置分割线的方向。系统能力SystemCapability.ArkUI.ArkUI.Full，起始版本 22。

• false（默认）：横向分割线，沿父容器宽度方向延展，适合在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) } }

示例要点解析：

1. 横向分割线：页面中部Divider().strokeWidth(8).color(0xF1F3F5)将上下两个List列表块分隔开。这里使用了 8vp 的较粗分割线与浅灰底色0xF1F3F5，视觉上形成“分组带”效果，同时验证了strokeWidth数值参数（默认 vp）与color整型色值的直接传参方式。
2. 纵向分割线：在Row容器内，两个Button之间插入Divider().vertical(true)，并用通用属性.height(22)控制纵向长度、.color(0x182431)与.opacity(0.6)控制颜色深浅、.margin(left: 8, right: 8)控制与两侧按钮的间距。这体现了“组件属性 + 通用属性”组合定制的模式——vertical决定方向，其余尺寸、颜色、位置均由通用属性完成。
3. 布局配合：外层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