第九节HarmonyOS 常用基础组件20-Divider

1、描述

提供分割器组件，分割不同内容块或内容元素。

2、接口

Divider()

3、属性

名称	参数类型	描述
vertical	boolean	使用水平分割线还是垂直分割线。 false：水平分割线 true：垂直分割线
color	ResourceColor	分割线颜色 默认值：“#33182431”
strokeWidth	number | string	分割线宽度（不支持百分比） 默认值：1 单位：vp
lineCap	LineCapStyle	分割线的端点样式 默认值：LineCapStyle.Butt

4、LineCapStyle枚举说明

名称	描述
Butt	线条两端为平行线，不额外扩展。
Round	在线条两端延伸半个圆，直径等于线宽。
Square	在线条两端延伸一个矩形，宽度等于线宽的一半，高度等于线宽。

5、示例

import router from '@ohos.router'

@Entry
@Component
struct DividerPage {
  @State message: string = '提供分隔器组件，分隔不同内容块/内容元素。'

  build() {
    Row() {
      Scroll() {
        Column() {
          Text(this.message)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .width("96%")

          Blank(12)
          Text("Text001").fontSize(20).width("96%")
          // 默认
          Divider()
            .width("90%")
            .vertical(false)
            .color(Color.Green)
            .strokeWidth(20)
            .lineCap(LineCapStyle.Butt)
          Text("Text001").fontSize(20).width("96%")
          // 两端向外延伸一个半圆
          Divider()
            .width("90%")
            .vertical(false)
            .color(Color.Red)
            .strokeWidth(20)
            .lineCap(LineCapStyle.Round)
          Text("Text001").fontSize(20).width("96%")
          // 两端向外延伸一个矩形，宽度等于线宽的一半，高度等于线宽。
          Divider()
            .width("90%")
            .vertical(false)
            .color(Color.Blue)
            .strokeWidth(20)
            .lineCap(LineCapStyle.Square)

          Blank(12)
          Button("CheckboxGroup文本文档")
            .fontSize(20)
            .backgroundColor('#007DFF')
            .width('96%')
            .onClick(() => {
              // 处理点击事件逻辑
              router.pushUrl({
                url: "pages/baseComponent/divider/DividerDesc",
              })
            })
          Blank(12)

        }
        .width('100%')
      }
    }
    .padding({ top: 12, bottom: 12 })
  }
}

6、效果图