Divider

鸿蒙开发以身入局
声明式 UI，内有大乾坤
组件学习开始了
掌握 Divider 组件

  • 分割器组件，分割不同内容快/内容元素

参数

  • 无

属性

名称参数类型默认值描述
verticalbooleanfalse使用水平分割线还是垂直分割线（false ： 水平分割线；true ： 垂直分割线）
colorResourceColor-设置分割线颜色
strokeWidthnumber ｜ string1设置分割线宽度
lineCapLineCapStyleLineCapStyle.Butt设置分割线的端点样式

LineCapStyle

名称描述
Butt分割线两端为 无端点
Round分割线两端为 圆角端点
Square分割线两端为 直角端点

事件

  • 无
  • 不支持通用事件

示例 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@Entry
@Component
struct Index {
  @State values: number[] = [ 10, 20, 30, 40, 50, 60, 70, 80, 90 ]
  build() {
    Column() {
      Text('文本内容')

      Divider().strokeWidth(10).lineCap(LineCapStyle.Butt)

      Text('文本内容')

      Divider().strokeWidth(10).lineCap(LineCapStyle.Round)

      Text('文本内容')

      Divider().strokeWidth(10).lineCap(LineCapStyle.Square)

      Text('文本内容')
    }.padding(50)
  }
}

示例 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
@Entry
@Component
struct Index {
  @State values: number[] = [ 10, 20, 30, 40, 50, 60, 70, 80, 90 ]
  build() {
    Column() {
      Text('文本内容')

      Divider().strokeWidth(10).lineCap(LineCapStyle.Butt)

      Text('文本内容')

      Divider().strokeWidth(10).lineCap(LineCapStyle.Round)

      Text('文本内容')

      Divider().strokeWidth(10).lineCap(LineCapStyle.Square)

      Text('文本内容')

      Row() {
        Text('文本')

        Divider().strokeWidth(10).vertical(true)

        Text('文本')

        Divider().strokeWidth(10).vertical(true)

        Text('文本')

        Divider().strokeWidth(10).vertical(true)

        Text('文本')
      }.height(50)
    }.padding(50)
  }
}

示例 3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@Entry
@Component
struct Index {
  @State values: number[] = [ 10, 20, 30, 40, 50, 60, 70, 80, 90 ]
  build() {
    Column() {
      Text('文本内容')

      Divider().strokeWidth(10).lineCap(LineCapStyle.Butt).color(Color.Pink)

      Text('文本内容')

      Divider().strokeWidth(10).lineCap(LineCapStyle.Round).color(Color.Brown)

      Text('文本内容')

      Divider().strokeWidth(10).lineCap(LineCapStyle.Square).color(Color.Orange)

      Text('文本内容')
    }.padding(50)
  }
}