Ios swift – Draw a straight line between 2 circles in SwiftUI

You can use a GeometryReader to read the circles’ frames, in the coordinate space of the ZStack (which is the coordinate space in which the Path is drawn).

Instead of using onAppear to update the dictionary to track the circles’ centres, put the dictionary in a PreferenceKey:

struct CirclePositionsKey: PreferenceKey {
    static var defaultValue: [Int: CGPoint] { [:] }
    
    static func reduce(value: inout [Int : CGPoint], nextValue: () -> [Int : CGPoint]) {
        value.merge(nextValue(), uniquingKeysWith: { $1 })
    }
}

Each circle’s preference will be a single key-value pair. The reduce implementation merges all the circles’ preference dictionaries together, so that we get the whole dictionary in onPreferenceChange.

n the view, you can do:

let rows = 10
let columns = 5

// use a state to track the start and end points of the line
@State private var line = Line()

var body: some View {
    ZStack {
        LazyVGrid(columns: Array(repeating: GridItem(.flexible()), count: columns)) {
            ForEach(0..<rows * columns, id: .self) { index in
                GeometryReader { geo in
                    let frame = geo.frame(in: .named("ZStack"))
                    // read the circle centre here
                    let center = CGPoint(x: frame.midX, y: frame.midY)
                    Circle()
                        .foregroundColor(.blue)
                        .preference(key: CirclePositionsKey.self, value: [
                            index: center
                        ])
                }
                .frame(width: 50, height: 50)
            }
        }
        .padding(10)
        .onPreferenceChange(CirclePositionsKey.self) { value in
            if let p1 = value[0], let p2 = value[1] {
                // update the line's points in onPreferenceChange
                line.start = p1
                line.end = p2
            }
        }
        
        Path { path in
            path.move(to: line.start)
            path.addLine(to: line.end)
        }.stroke(Color.red, lineWidth: 2)
    }
    .coordinateSpace(.named("ZStack"))
}

struct Line {
    var start: CGPoint = .zero
    var end: CGPoint = .zero
}

That said, I would use a Canvas to draw the circles and lines instead. Canvas gives you much more control over where exactly to draw things.

For example:

let rows = 10
let columns = 5

var body: some View {
    Canvas { gc, size in
        let radius: CGFloat = 25
        let spacing: CGFloat = 10
        
        // calculate size of the things to draw...
        let totalWidth = CGFloat(columns) * (radius * 2 + spacing) - spacing
        let totalHeight = CGFloat(rows) * (radius * 2 + spacing) - spacing
        // so that we can calculate some offsets in order to center-align the whole drawing
        let xOffset = (size.width - totalWidth) / 2
        let yOffset = (size.height - totalHeight) / 2
        gc.translateBy(x: xOffset, y: yOffset)
        
        for i in 0..<rows {
            for j in 0..<columns {
                let frame = CGRect(
                    x: CGFloat(j) * (radius * 2 + spacing),
                    y: CGFloat(i) * (radius * 2 + spacing),
                    width: radius * 2,
                    height: radius * 2
                )
                gc.fill(Path(ellipseIn: frame), with: .color(.blue))
            }
        }
        
        func centerOfCircle(atColumn col: Int, row: Int) -> CGPoint {
            let x = CGFloat(col) * (radius * 2 + spacing) + radius
            let y = CGFloat(row) * (radius * 2 + spacing) + radius
            return CGPoint(x: x, y: y)
        }
        
        let line = Path {
            $0.move(to: centerOfCircle(atColumn: 0, row: 0))
            $0.addLine(to: centerOfCircle(atColumn: 1, row: 0))
        }
        
        gc.stroke(line, with: .color(.red), lineWidth: 2)
    }
}