鸿蒙入门12-Divider

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

参数

• 无

属性

名称	参数类型	默认值	描述
vertical	boolean	false	使用水平分割线还是垂直分割线 false ： 水平分割线 true ： 垂直分割线
color	ResourceColor	-	设置分割线颜色
strokeWidth	number ｜ string	1	设置分割线宽度
lineCap	LineCapStyle	LineCapStyle.Butt	设置分割线的端点样式

LineCapStyle

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

事件

• 无
• 不支持通用事件

示例 1

@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

@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

@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)
  }
}