分隔器组件

2024-01-22 17:09 更新

提供分隔器组件,分隔不同内容块/内容元素。

说明

该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

接口

Divider()

从API version 9开始,该接口支持在ArkTS卡片中使用。

属性

除支持通用属性外,还支持以下属性:

名称

参数类型

描述

vertical

boolean

使用水平分割线还是垂直分割线。false:水平分割线;true:垂直分割线。

默认值:false

从API version 9开始,该接口支持在ArkTS卡片中使用。

color

ResourceColor

分割线颜色。

默认值:'#33182431'

从API version 9开始,该接口支持在ArkTS卡片中使用。

strokeWidth

number | string

分割线宽度。

默认值:1

单位:vp

从API version 9开始,该接口支持在ArkTS卡片中使用。

说明:

分割线的宽度不支持百分比设置。优先级低于通用属性height,超过通用属性设置大小时,按照通用属性进行裁切。

lineCap

LineCapStyle

分割线的端点样式。

默认值:LineCapStyle.Butt

从API version 9开始,该接口支持在ArkTS卡片中使用。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct DividerExample {
  5. build() {
  6. Column() {
  7. // 使用横向分割线场景
  8. Text('Horizontal divider').fontSize(9).fontColor(0xCCCCCC)
  9. List() {
  10. ForEach([1, 2, 3], (item) => {
  11. ListItem() {
  12. Text('list' + item).width('100%').fontSize(14).fontColor('#182431').textAlign(TextAlign.Start)
  13. }.width(244).height(48)
  14. }, item => item.toString())
  15. }.padding({ left: 24, bottom: 8 })
  16. Divider().strokeWidth(8).color('#F1F3F5')
  17. List() {
  18. ForEach([4, 5], (item) => {
  19. ListItem() {
  20. Text('list' + item).width('100%').fontSize(14).fontColor('#182431').textAlign(TextAlign.Start)
  21. }.width(244).height(48)
  22. }, item => item.toString())
  23. }.padding({ left: 24, top: 8 })
  24. // 使用纵向分割线场景
  25. Text('Vertical divider').fontSize(9).fontColor(0xCCCCCC)
  26. Column() {
  27. Column() {
  28. Row().width(288).height(64).backgroundColor('#30C9F0').opacity(0.3)
  29. Row() {
  30. Button('Button')
  31. .width(136)
  32. .height(22)
  33. .fontSize(16)
  34. .fontColor('#007DFF')
  35. .fontWeight(500)
  36. .backgroundColor(Color.Transparent)
  37. Divider().vertical(true).height(22).color('#182431').opacity(0.6).margin({ left: 8, right: 8 })
  38. Button('Button')
  39. .width(136)
  40. .height(22)
  41. .fontSize(16)
  42. .fontColor('#007DFF')
  43. .fontWeight(500)
  44. .backgroundColor(Color.Transparent)
  45. }.margin({ top: 17 })
  46. }
  47. .width(336)
  48. .height(152)
  49. .backgroundColor('#FFFFFF')
  50. .borderRadius(24)
  51. .padding(24)
  52. }
  53. .width('100%')
  54. .height(168)
  55. .backgroundColor('#F1F3F5')
  56. .justifyContent(FlexAlign.Center)
  57. .margin({ top: 8 })
  58. }.width('100%').padding({ top: 24 })
  59. }
  60. }

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号