鸿蒙开发-Divider 组件

在 ArkTS 中，Divider组件是用于在界面上显示分割线的组件，以下是其详细介绍：

基本功能

Divider组件主要用于将页面中的不同部分进行视觉上的分隔，使页面布局更加清晰和有条理，增强用户界面的可读性和美观性。

常用属性

color：用于设置分割线的颜色，接受ResourceColor类型的值，可以是系统预定义的颜色资源，也可以是自定义的颜色值。例如：

Divider().color(Color.Gray)

strokeWidth：用于设置分割线的宽度，接受number类型的值，单位为逻辑像素。例如：

Divider().strokeWidth(2)

startMargin和endMargin：分别用于设置分割线起始和结束位置的外边距，接受number类型的值，单位为逻辑像素。可以通过设置这两个属性来调整分割线在水平方向上的位置。例如：

Divider().startMargin(10).endMargin(10)

布局方式

Divider

组件在布局中通常以水平或垂直方向排列，具体取决于其所在父容器的布局方式。

在水平布局的容器中，Divider组件默认以水平方向显示分割线，将容器中的内容在垂直方向上进行分隔。

在垂直布局的容器中，Divider组件默认以垂直方向显示分割线，将容器中的内容在水平方向上进行分隔。

颜色自定义

除了使用color属性设置单一颜色外，还可以通过linearGradient或radialGradient来实现渐变颜色效果。示例代码如下：

// 线性渐变
let linearGradient = new LinearGradient({
  startPoint: { x: 0, y: 0 },
  endPoint: { x: 1, y: 0 },
  colors: [Color.Red, Color.Yellow]
})
Divider().linearGradient(linearGradient)

// 径向渐变
let radialGradient = new RadialGradient({
  center: { x: 0.5, y: 0.5 },
  radius: 0.5,
  colors: [Color.Blue, Color.Green]
})
Divider().radialGradient(radialGradient)

虚线样式自定义

可以使用dashArray和dashOffset属性来设置分割线为虚线样式并进行自定义。其中，dashArray用于指定虚线的线段长度和间隔长度数组，dashOffset用于设置虚线的偏移量。示例代码如下：

Divider().strokeWidth(2).dashArray([5, 3]).dashOffset(2)

两端样式自定义

添加箭头：可以在分割线的两端添加箭头等装饰元素来丰富其样式。这通常需要结合自定义绘制来实现。例如，可以使用Canvas绘制一个带有箭头的分割线。

@Entry
@Component
struct MyComponent {
  build() {
    Column() {
      CustomDivider().width('100%').height(10)
      Text('这是另一部分内容').fontSize(16)
    }.width('100%').height('100%')
  }
}

@Component
struct CustomDivider extends Divider {
  drawCanvas(ctx: CanvasRenderingContext2D) {
    super.drawCanvas(ctx);
    ctx.beginPath();
    ctx.moveTo(0, 5);
    ctx.lineTo(100, 5);
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#FF0000';
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(0, 5);
    ctx.lineTo(10, 0);
    ctx.lineTo(10, 10);
    ctx.closePath();
    ctx.fillStyle = '#FF0000';
    ctx.fill();
    ctx.beginPath();
    ctx.moveTo(100, 5);
    ctx.lineTo(90, 0);
    ctx.lineTo(90, 10);
    ctx.closePath();
    ctx.fillStyle = '#FF0000';
    ctx.fill();
  }
}

自定义形状：通过继承Divider组件并重写drawCanvas方法，可以实现完全自定义的分割线形状。例如，绘制一个波浪线形状的分割线。

@Component
struct WaveDivider extends Divider {
  drawCanvas(ctx: CanvasRenderingContext2D) {
    super.drawCanvas(ctx);
    let width = 100;
    let height = 10;
    let offset = 0;
    let amplitude = 3;
    ctx.beginPath();
    for (let x = 0; x <= width; x++) {
      let y = height / 2 + Math.sin((x + offset) * (2 * Math.PI / width)) * amplitude;
      if (x === 0) {
        ctx.moveTo(x, y);
      } else {
        ctx.lineTo(x, y);
      }
    }
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#00FF00';
    ctx.stroke();
  }
}

与其他组件组合自定义

可以将Divider组件与其他组件如Image、Text等组合使用，实现更丰富的样式效果。例如，在分割线上添加文字说明或图标。

Row() {
  Divider().width('50%').strokeWidth(1).color(Color.Gray)
  Text('分割线中间的文字').fontSize(14).margin({ left: 10, right: 10 })
  Divider().width('50%').strokeWidth(1).color(Color.Gray)
}

示例代码

以下是一个简单的示例，展示了Divider组件在不同场景下的使用：

@Entry
@Component
struct MyComponent {
  build() {
    Column() {
      Text('这是一部分内容').fontSize(16)
      Divider().color(Color.Green).strokeWidth(3).startMargin(20).endMargin(20)
      Text('这是另一部分内容').fontSize(16)
    }.width('100%').height('100%')
  }
}