1# Divider
2
3提供分隔器组件，分隔不同内容块/内容元素。
4
5>  **说明：**
6>
7>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9## 子组件
10
11无
12
13## 接口
14
15Divider()
16
17**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
18
19**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
20
21**系统能力：** SystemCapability.ArkUI.ArkUI.Full
22
23## 属性
24
25除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
26
27### vertical
28
29vertical(value: boolean)
30
31设置分割线的方向。
32
33**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
34
35**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
36
37**系统能力：** SystemCapability.ArkUI.ArkUI.Full
38
39**参数：**
40
41| 参数名 | 类型    | 必填 | 说明                                                         |
42| ------ | ------- | ---- | ------------------------------------------------------------ |
43| value  | boolean | 是   | 使用水平分割线还是垂直分割线。<br/>false：水平分割线；true：垂直分割线。<br/>默认值：false |
44
45### color
46
47color(value: ResourceColor)
48
49设置分割线的颜色。
50
51**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
52
53**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
54
55**系统能力：** SystemCapability.ArkUI.ArkUI.Full
56
57**参数：**
58
59| 参数名 | 类型                                       | 必填 | 说明                                  |
60| ------ | ------------------------------------------ | ---- | ------------------------------------- |
61| value  | [ResourceColor](ts-types.md#resourcecolor) | 是   | 分割线颜色。<br/>默认值：'\#33182431' <br/>支持通过[WithTheme](ts-container-with-theme.md#withtheme)设置通用分割线颜色|
62
63### strokeWidth
64
65strokeWidth(value: number | string)
66
67设置分割线的宽度。
68
69**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
70
71**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
72
73**系统能力：** SystemCapability.ArkUI.ArkUI.Full
74
75**参数：**
76
77| 参数名 | 类型                       | 必填 | 说明                                                         |
78| ------ | -------------------------- | ---- | ------------------------------------------------------------ |
79| value  | number&nbsp;\|&nbsp;string | 是   | 分割线宽度。<br/>默认值：1px<br/>单位：vp<br/>**说明：**  <br>分割线的宽度不支持百分比设置。优先级低于[通用属性height](ts-universal-attributes-size.md#height)，超过通用属性设置大小时，按照通用属性进行裁切。部分设备硬件中存在1像素取整后分割线不显示问题，建议使用2像素。 |
80
81### lineCap
82
83lineCap(value: LineCapStyle)
84
85设置分割线的端点样式。
86
87**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
88
89**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
90
91**系统能力：** SystemCapability.ArkUI.ArkUI.Full
92
93**参数：**
94
95| 参数名 | 类型                                              | 必填 | 说明                                             |
96| ------ | ------------------------------------------------- | ---- | ------------------------------------------------ |
97| value  | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | 是   | 分割线的端点样式。<br/>默认值：LineCapStyle.Butt |
98
99
100## 示例
101
102定义了Divider的样式，如方向、颜色及宽度。
103
104```ts
105// xxx.ets
106@Entry
107@Component
108struct DividerExample {
109  build() {
110    Column() {
111      // 使用横向分割线场景
112      Text('Horizontal divider').fontSize(9).fontColor(0xCCCCCC)
113      List() {
114        ForEach([1, 2, 3], (item: number) => {
115          ListItem() {
116            Text('list' + item).width('100%').fontSize(14).fontColor('#182431').textAlign(TextAlign.Start)
117          }.width(244).height(48)
118        }, (item: number) => item.toString())
119      }.padding({ left: 24, bottom: 8 })
120
121      Divider().strokeWidth(8).color('#F1F3F5')
122      List() {
123        ForEach([4, 5], (item: number) => {
124          ListItem() {
125            Text('list' + item).width('100%').fontSize(14).fontColor('#182431').textAlign(TextAlign.Start)
126          }.width(244).height(48)
127        }, (item: number) => item.toString())
128      }.padding({ left: 24, top: 8 })
129
130      // 使用纵向分割线场景
131      Text('Vertical divider').fontSize(9).fontColor(0xCCCCCC)
132      Column() {
133        Column() {
134          Row().width(288).height(64).backgroundColor('#30C9F0').opacity(0.3)
135          Row() {
136            Button('Button')
137              .width(136)
138              .height(22)
139              .fontSize(16)
140              .fontColor('#007DFF')
141              .fontWeight(500)
142              .backgroundColor(Color.Transparent)
143            Divider().vertical(true).height(22).color('#182431').opacity(0.6).margin({ left: 8, right: 8 })
144            Button('Button')
145              .width(136)
146              .height(22)
147              .fontSize(16)
148              .fontColor('#007DFF')
149              .fontWeight(500)
150              .backgroundColor(Color.Transparent)
151          }.margin({ top: 17 })
152        }
153        .width(336)
154        .height(152)
155        .backgroundColor('#FFFFFF')
156        .borderRadius(24)
157        .padding(24)
158      }
159      .width('100%')
160      .height(168)
161      .backgroundColor('#F1F3F5')
162      .justifyContent(FlexAlign.Center)
163      .margin({ top: 8 })
164    }.width('100%').padding({ top: 24 })
165  }
166}
167```
168
169![zh-cn_image_0000001174422926](figures/zh-cn_image_0000001174422926.png)
170