HarmonyOS 鸿蒙Next求问如何用Line或者Divider自定义虚线？
HarmonyOS 鸿蒙Next求问如何用Line或者Divider自定义虚线？
Column()
.height(1)
.width(100)
.border({
width: { top: 1 },
style: BorderStyle.Dashed,
color: '#FFDDE4F3',
dashGap: { value: 5, unit: LengthUnit.VP },
dashWidth: { value: 5, unit: LengthUnit.VP }
})
canvas自定义画呗
this.context2D.setLineDash([5, 3]); // [虚线长度, 间隙长度]
this.context2D.beginPath()
this.context2D.moveTo(this.positions[this.index].x, padding / 2)
this.context2D.lineTo(this.positions[this.index].x, chartHeight + padding / 2)
this.context2D.strokeStyle = 'gray' // 线条颜色
this.context2D.lineWidth = 1 // 线条宽度
this.context2D.stroke()
this.context2D.setLineDash([]) // 重置虚线样式
以下是一个简单的示例代码，用于创建水平排列的虚线:
```xml
<!–在你的布局文件中，例如activity_main.xml -->
<LinearLayout
android:id="@+id/linearLayout"
android:layout_width=“wrap_content”
android:layout_height=“1dp”
android:background="@drawable/line_background"
android:orientation=“horizontal”
android:padding=“0dp”>
<!–在这里添加你的ImageView -->
<ImageView
android:id="@+id/imageView1"
android:layout_width=“1dp”
android:layout_height=“1dp”
android:background="@drawable/虚线"
android:padding=“0dp”
android:src="@drawable/dot" />
< ImageView
android:id="@+id/imageView2"
android:layout_width=“1dp”
android:layout_height=“1dp”
android:background="@drawable/虚线"
可以使用Line或者Divider来自定义虚线，具体步骤如下：
1.创建一个ViewGroup，例如LinearLayout。
2.在LinearLayout中添加多个View，例如ImageView。
3.设置ImageView的背景颜色为透明，并设置宽高相等。
4.设置ImageView的padding为0，这样就可以让虚线的间隔为0了。
5.将所有的ImageView添加到LinearLayout中。
6.设置LinearLayout的属性，例如android:orientation=“horizontal”，这样就可以让所有的ImageView水平排列了。
7.最后，通过代码来控制每个ImageView的位置和大小，实现自定义虚线效果。
找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17
[@Preview](/user/Preview)
[@Component](/user/Component)
export struct DashedLine{
// 虚线个数
[@Prop](/user/Prop) count : number = 10
//默认创建占位数组
[@State](/user/State) dashes : Array<number> = new Array(this.count).fill(0)
// 虚线宽度
[@State](/user/State) lineWidth:number = 5
// 虚线高度
[@State](/user/State) lineHeight:number = 1
// 虚线间距
[@State](/user/State) dashSpace:number = 3
build(){
Row(){
ForEach(this.dashes,()=>{
Blank().width(this.dashSpace)
Blank().width(this.lineWidth).height(this.lineHeight).backgroundColor(Color.Red)
Blank().width(this.dashSpace)
})
}.backgroundColor(Color.White)
}
}
Line是可以实现虚线，但是必须要指定startPoint和endPoint才行。另外，Divider是可以通过设置border的BorderStyle来实现虚线，只是没办法设置虚线的间隙大小。
