1# Divider 2 3提供分隔器组件，分隔不同内容块/内容元素。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12无 13 14 15## 接口 16 17Divider() 18 19从API version 9开始，该接口支持在ArkTS卡片中使用。 20 21## 属性 22 23除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 24 25| 名称 | 参数类型 | 描述 | 26| ----------- | ---------- | ------------------ | 27| vertical | boolean | 使用水平分割线还是垂直分割线。false：水平分割线；true：垂直分割线。<br/>默认值：false<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 28| color | [ResourceColor](ts-types.md#resourcecolor) | 分割线颜色。<br/>默认值：'\#33182431'<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 29| strokeWidth | number \| string | 分割线宽度。<br/>默认值：1<br/>单位：vp<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br>分割线的宽度不支持百分比设置。优先级低于[通用属性height](ts-universal-attributes-size.md)，超过通用属性设置大小时，按照通用属性进行裁切。 | 30| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | 分割线的端点样式。<br/>默认值：LineCapStyle.Butt<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 31 32 33## 示例 34 35```ts 36// xxx.ets 37@Entry 38@Component 39struct DividerExample { 40 build() { 41 Column() { 42 // 使用横向分割线场景 43 Text('Horizontal divider').fontSize(9).fontColor(0xCCCCCC) 44 List() { 45 ForEach([1, 2, 3], (item) => { 46 ListItem() { 47 Text('list' + item).width('100%').fontSize(14).fontColor('#182431').textAlign(TextAlign.Start) 48 }.width(244).height(48) 49 }, item => item.toString()) 50 }.padding({ left: 24, bottom: 8 }) 51 52 Divider().strokeWidth(8).color('#F1F3F5') 53 List() { 54 ForEach([4, 5], (item) => { 55 ListItem() { 56 Text('list' + item).width('100%').fontSize(14).fontColor('#182431').textAlign(TextAlign.Start) 57 }.width(244).height(48) 58 }, item => item.toString()) 59 }.padding({ left: 24, top: 8 }) 60 61 // 使用纵向分割线场景 62 Text('Vertical divider').fontSize(9).fontColor(0xCCCCCC) 63 Column() { 64 Column() { 65 Row().width(288).height(64).backgroundColor('#30C9F0').opacity(0.3) 66 Row() { 67 Button('Button') 68 .width(136) 69 .height(22) 70 .fontSize(16) 71 .fontColor('#007DFF') 72 .fontWeight(500) 73 .backgroundColor(Color.Transparent) 74 Divider().vertical(true).height(22).color('#182431').opacity(0.6).margin({ left: 8, right: 8 }) 75 Button('Button') 76 .width(136) 77 .height(22) 78 .fontSize(16) 79 .fontColor('#007DFF') 80 .fontWeight(500) 81 .backgroundColor(Color.Transparent) 82 }.margin({ top: 17 }) 83 } 84 .width(336) 85 .height(152) 86 .backgroundColor('#FFFFFF') 87 .borderRadius(24) 88 .padding(24) 89 } 90 .width('100%') 91 .height(168) 92 .backgroundColor('#F1F3F5') 93 .justifyContent(FlexAlign.Center) 94 .margin({ top: 8 }) 95 }.width('100%').padding({ top: 24 }) 96 } 97} 98``` 99 100 101
