HarmonyOS鸿蒙Next中Line组件画线，只能设置绝对值，不能设置百分比

HarmonyOS鸿蒙Next中Line组件画线，只能设置绝对值，不能设置百分比 Line组件画线，只能设置绝对值，不能设置百分比
Line组件自身设置了百分比，里面的endPoint只能设置绝对值，开发时候不知道具体的长度，只能设置屏幕宽度再裁剪，有没有最优方案

Line()
.clip(true)
.height('100%')
.width(1)
.strokeWidth(1)
.startPoint([0, 0])
.endPoint([0,this.stackHeight])
.stroke($r('app.color.CF6F6F6_color'))

如上，Line自身高度占父试图百分百，endPoint只能计算设置具体数值


更多关于HarmonyOS鸿蒙Next中Line组件画线，只能设置绝对值，不能设置百分比的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

可以考虑采用<span class="hljs-selector-tag">Canvas</span>使用画布绘制自定义图形，参考文档：使用画布绘制自定义图形 (Canvas)-显示图形-UI开发 (ArkTS声明式开发范式)-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者 (huawei.com)

参考代码：

Canvas(this.context)
  .width('100%')
  .height('100%')
  .backgroundColor('#F5DC62')
  .onReady(() =>{
    this.context.beginPath();
    this.context.moveTo(50, 50);
    this.context.lineTo(280, 160);
    this.context.stroke();
  })

更多关于HarmonyOS鸿蒙Next中Line组件画线，只能设置绝对值，不能设置百分比的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Line组件用于绘制直线，但其坐标属性（如startX、startY、endX、endY）仅支持绝对值设置，无法直接使用百分比。这意味着开发者必须明确指定线条的起点和终点的具体像素值，而不能基于父容器的宽度或高度进行相对定位。

这种设计可能是为了简化Line组件的实现，确保其在各种场景下的表现一致。如果需要进行百分比布局，开发者可以通过计算父容器的尺寸，然后根据比例转换为具体的像素值，再设置给Line组件。

例如，如果需要在父容器宽度的50%处画一条垂直线，可以先获取父容器的宽度，然后计算50%对应的像素值，最后将该值赋给Line组件的startX和endX属性。

总结来说，Line组件目前不支持直接使用百分比坐标，开发者需要通过计算实现相对布局。

在HarmonyOS鸿蒙Next中，Line组件的起点和终点坐标确实需要设置为绝对值，无法直接使用百分比。这是因为Line组件是基于具体的像素点进行绘制，而不是基于父容器的相对尺寸。如果需要实现百分比布局，可以通过计算父容器的宽高，然后动态调整Line组件的坐标值来实现相对的百分比效果。

回到顶部