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' | 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 \| 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```ts 103// xxx.ets 104@Entry 105@Component 106struct DividerExample { 107 build() { 108 Column() { 109 // 使用横向分割线场景 110 Text('Horizontal divider').fontSize(9).fontColor(0xCCCCCC) 111 List() { 112 ForEach([1, 2, 3], (item: number) => { 113 ListItem() { 114 Text('list' + item).width('100%').fontSize(14).fontColor('#182431').textAlign(TextAlign.Start) 115 }.width(244).height(48) 116 }, (item: number) => item.toString()) 117 }.padding({ left: 24, bottom: 8 }) 118 119 Divider().strokeWidth(8).color('#F1F3F5') 120 List() { 121 ForEach([4, 5], (item: number) => { 122 ListItem() { 123 Text('list' + item).width('100%').fontSize(14).fontColor('#182431').textAlign(TextAlign.Start) 124 }.width(244).height(48) 125 }, (item: number) => item.toString()) 126 }.padding({ left: 24, top: 8 }) 127 128 // 使用纵向分割线场景 129 Text('Vertical divider').fontSize(9).fontColor(0xCCCCCC) 130 Column() { 131 Column() { 132 Row().width(288).height(64).backgroundColor('#30C9F0').opacity(0.3) 133 Row() { 134 Button('Button') 135 .width(136) 136 .height(22) 137 .fontSize(16) 138 .fontColor('#007DFF') 139 .fontWeight(500) 140 .backgroundColor(Color.Transparent) 141 Divider().vertical(true).height(22).color('#182431').opacity(0.6).margin({ left: 8, right: 8 }) 142 Button('Button') 143 .width(136) 144 .height(22) 145 .fontSize(16) 146 .fontColor('#007DFF') 147 .fontWeight(500) 148 .backgroundColor(Color.Transparent) 149 }.margin({ top: 17 }) 150 } 151 .width(336) 152 .height(152) 153 .backgroundColor('#FFFFFF') 154 .borderRadius(24) 155 .padding(24) 156 } 157 .width('100%') 158 .height(168) 159 .backgroundColor('#F1F3F5') 160 .justifyContent(FlexAlign.Center) 161 .margin({ top: 8 }) 162 }.width('100%').padding({ top: 24 }) 163 } 164} 165``` 166 167 168
