SwiftUI

Question

struct DottedLine: Shape {
        
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: rect.width, y: 0))
        return path
    }
}

DottedLine()
                .stroke(style: StrokeStyle(lineWidth: 1, dash: [2]))
                .frame(height: 1)
                .foregroundColor(Color.red)

这将创建一条水平虚线。但是如何让它垂直呢？如果我将 Divider() 放在 HStack 中，那么它会变成垂直的，但是如何使用虚线实现相同的效果？

Answer 1

使 DottedLine 对宽度和高度都做出反应，并根据需要进行配置以代替使用：

struct DottedLine: Shape {
        
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: rect.width, y: rect.height))
        return path
    }
}

struct TestDottedLineView: View {
    var body: some View {
        DottedLine()
            .stroke(style: StrokeStyle(lineWidth: 1, dash: [2]))
            .frame(width: 1, height: 100)
            .foregroundColor(Color.red)
    }
}

backup

SwiftUI - 如何使用 Shape 制作垂直虚线？

SwiftUI - How to make a vertical dotted line using Shape?

shapes

ios

ios14