鸿蒙Next如何绘制虚线

在鸿蒙Next开发中，我想绘制一条虚线用于界面分隔线，但找不到相关的API或示例代码。请问应该如何实现？需要设置虚线样式、间隔宽度和颜色等属性，最好能提供具体的代码示例。

2 回复

鸿蒙Next画虚线？简单！用PathEffect.dashPathEffect就行，参数调一调，实线长度、间隔长度随心配。代码一敲，虚线秒现，比女朋友画眉毛还容易！

更多关于鸿蒙Next如何绘制虚线的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，可以通过Line组件和DashPathEffect绘制虚线。

实现步骤：

  1. 使用Line组件定义线段。
  2. 通过DashPathEffect设置虚线样式（实线/间隔长度）。
  3. 将效果应用到Line的paint属性。

示例代码：

import { Line, DashPathEffect } from '@kit.ArkGraphics2D';

// 创建虚线效果：[实线长度, 间隔长度]
let dashEffect = new DashPathEffect([10, 5]);

// 绘制水平虚线
Line()
  .width('100%')
  .height(1)
  .paint(new Paint()
    .setStrokeWidth(1)
    .setPathEffect(dashEffect)
  )

参数说明：

  • DashPathEffect([10, 5])：10像素实线 + 5像素间隔
  • 可调整数组值改变虚线密度
  • 通过setStrokeWidth()控制虚线粗细

适用于分隔线、边框等场景，无需依赖图片资源。

回到顶部