SwiftUI 如何用线连接对象？

Question

我有三个圆圈，想画一条连接 1<->2 和 2<->3 的线。似乎没有线形状，即使有，我将如何指定连接。有任何想法吗？

我当前的代码如下所示

struct ConnectedCircles: View {
    var body: some View {
        VStack {
            Circle()
            .strokeBorder(Color.blue,lineWidth: 4)
                .background(Circle().foregroundColor(Color(.systemBackground)))
                .frame(width: 30, height: 30)
                
            Circle()
            .strokeBorder(Color.blue,lineWidth: 4)
                .background(Circle().foregroundColor(Color(.systemBackground)))
                .frame(width: 30, height: 30)
            
            Circle()
            .strokeBorder(Color.blue,lineWidth: 4)
                .background(Circle().foregroundColor(Color(.systemBackground)))
                .frame(width: 30, height: 30)
            
        }
    }
}

并产生三个不相连的圆圈。

虽然我想制作这样的东西

Answer 1

实现你想要的最简单的方法之一是使用 a 在 sRectangle下方画Circle一个作为连接线ZStack。像这样：

struct ConnectedCircles: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color.blue)
                .frame(width: 2, height: 100)
            VStack {
                Circle()
                .strokeBorder(Color.blue,lineWidth: 4)
                    .background(Circle().foregroundColor(Color(.systemBackground)))
                    .frame(width: 30, height: 30)
                    
                Circle()
                .strokeBorder(Color.blue,lineWidth: 4)
                    .background(Circle().foregroundColor(Color(.systemBackground)))
                    .frame(width: 30, height: 30)
                
                Circle()
                .strokeBorder(Color.blue,lineWidth: 4)
                    .background(Circle().foregroundColor(Color(.systemBackground)))
                    .frame(width: 30, height: 30)
                
            }
        }
    }
}

另一个解决方案是创建一个自定义的产品Shape线：

struct VerticalLine: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: CGPoint(x: rect.midX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY))
        return path
    }
}

struct ConnectedCircles: View {
    var body: some View {
        ZStack {
            Line()
            VerticalLine()
                .stroke(Color.blue, lineWidth: 4)
                .frame(width: 20, height: 100)
            VStack {
                Circle()
                .strokeBorder(Color.blue,lineWidth: 4)
                    .background(Circle().foregroundColor(Color(.systemBackground)))
                    .frame(width: 30, height: 30)
                    
                Circle()
                .strokeBorder(Color.blue,lineWidth: 4)
                    .background(Circle().foregroundColor(Color(.systemBackground)))
                    .frame(width: 30, height: 30)
                
                Circle()
                .strokeBorder(Color.blue,lineWidth: 4)
                    .background(Circle().foregroundColor(Color(.systemBackground)))
                    .frame(width: 30, height: 30)
                
            }
        }
    }
}

即使不使用ZStack. 您应该将VStacks设置spacing为0并在 s 之间画线Circle。

struct VerticalLine: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: CGPoint(x: rect.midX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY))
        return path
    }
}

struct ConnectedCircles: View {
    var body: some View {
            
        VStack(spacing: 0) {
            Circle()
            .strokeBorder(Color.blue,lineWidth: 4)
                .frame(width: 30, height: 30)
            Line()
            VerticalLine()
                .stroke(Color.blue, lineWidth: 4)
                .frame(width: 20, height: 10)
            Circle()
            .strokeBorder(Color.blue,lineWidth: 4)
                .frame(width: 30, height: 30)
            Line()
            VerticalLine()
                .stroke(Color.blue, lineWidth: 4)
                .frame(width: 20, height: 10)
            Circle()
            .strokeBorder(Color.blue,lineWidth: 4)
                .frame(width: 30, height: 30)
            
        }
    }
}