Fatal编程技术网
  • swiftui/
  • SwiftUI如何用线连接对象？

SwiftUI如何用线连接对象？

swiftui

SwiftUI如何用线连接对象？,swiftui,Swiftui,我有三个圆，想画连接12和23的线。似乎没有线型，即使有，我如何指定连接。有什么想法吗 我当前的代码如下所示 struct ConnectedCircles: View { var body: some View { VStack { Circle() .strokeBorder(Color.blue,lineWidth: 4) .background(Circle().foregroundC

我有三个圆，想画连接12和23的线。似乎没有线型，即使有，我如何指定连接。有什么想法吗

我当前的代码如下所示

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)
            
        }
    }
}
并产生三个不相连的圆

而我想制作这样的东西

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)
            
        }
    }
}

实现所需功能的最简单方法之一是使用
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)
                
            }
        }
    }
}


另一个解决方案是创建一个自定义的
形状作为我们的产品线：


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
，您也可以这样做。您应该将
VStack
的
间距设置为
0
，并在
圆圈之间画线


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)
            
        }
    }
}



实现所需功能的最简单方法之一是使用
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)
                
            }
        }
    }
}


另一个解决方案是创建一个自定义的
形状作为我们的产品线：


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
，您也可以这样做。您应该将
VStack
的
间距设置为
0
，并在
圆圈之间画线


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)
            
        }
    }
}



只是出于好奇-你为什么要用第二个圆圈作为背景？@Losiowaty我只是不希望它们基本上是实心的只是出于好奇-你为什么要用第二个圆圈作为背景？@Losiowaty我只是不希望它们基本上是实心的