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