HarmonyOS Divider组件,如何能显示虚线

HarmonyOS
2024-12-26 15:13:13
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
aquaa

可以使用Canvas画布,这边可以自定义线条的粗细和间隔:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-drawing-customization-on-canvas-V5#场景示例

参考demo:

@Entry
@Component
struct CanvasExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D =
    new CanvasRenderingContext2D(this.settings)
  /* * text: 绘制的文本内容 * x: 开始位置的x坐标 * y: 开始位置的y坐标 * maxWidth: 最大换行宽度 * lineHeight: 行高 */
  wrapText(text: string, x: number, y: number, maxWidth?: number, lineHeight?: number) {
    if (typeof maxWidth == 'undefined') {
      maxWidth = 300;
    }
    if (typeof lineHeight == 'undefined') {
      lineHeight = 20
    }
    this.context.beginPath();
    this.context.moveTo(x, y + 10);
    this.context.lineTo(maxWidth, y + 10);
    this.context.stroke();
    this.context.closePath();
  }
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context).width('100%').height('100%').onReady(() => {
        //设置线条粗细
        this.context.lineWidth = 1
        // 设置线条宽度
        this.context.strokeStyle = "black" // 设置线条颜色
        this.context.setLineDash([25, 10]) // 设置虚线间隔
        this.wrapText("",
          0, 40, this.context.width, 30)
      })
    }.width('100%').height('100%')
  }
}
分享
微博
QQ
微信
回复
2024-12-26 16:57:47
相关问题
Divider组件是否存在虚线属性
1171浏览 • 1回复 待解决
List组件divider颜色显示透List组件颜色
517浏览 • 0回复 待解决
HarmonyOS 如何实现虚线
1004浏览 • 1回复 待解决
Divider组件如何设置分割线宽度
3116浏览 • 1回复 待解决
HarmonyOS 如何使用canvas绘制虚线
237浏览 • 1回复 待解决
实现一个虚线边框的组件
1036浏览 • 1回复 待解决
HarmonyOS List的divider使用
834浏览 • 0回复 待解决
HarmonyOS 如何绘制一条虚线
436浏览 • 1回复 待解决
现在如何能在onload中使用到组件的Area
1702浏览 • 0回复 待解决
HarmonyOS list的divider bug
166浏览 • 1回复 待解决
HarmonyOS 虚线功能的实现
405浏览 • 1回复 待解决
如何能够设置禁止分屏
629浏览 • 1回复 待解决
单元测试文件如何能运行起来
2802浏览 • 1回复 待解决
如何能够让 DevEco studio连接Internet
8032浏览 • 4回复 待解决
HarmonyOS 虚线下划线的实现方式
551浏览 • 1回复 待解决