Нарисуйте прямую линию между двумя кругами в SwiftUI

Вы можете использовать GeometryReader для чтения рамок кругов в координатном пространстве ZStack (которое является координатным пространством, в котором нарисован Path).

Вместо использования onAppear для обновления словаря для отслеживания центров кругов поместите словарь в PreferenceKey:

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

Предпочтением каждого круга будет одна пара ключ-значение. Реализация reduce объединяет словари предпочтений всех кругов вместе, так что мы получаем весь словарь в overlayPreferenceValue, где мы можем нарисовать путь в виде наложения.

В представлении вы можете сделать:

let rows = 10
let columns = 5

var body: some View {
    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("DrawingSpace"))
                // 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)
    .overlayPreferenceValue(CirclePositionsKey.self) { value in
        // draw the path as an overlay, based on the preference value
        if let p1 = value[0], let p2 = value[1] {
            Path { path in
                path.move(to: p1)
                path.addLine(to: p2)
            }.stroke(Color.red, lineWidth: 2)
        }
    }
    .coordinateSpace(.named("DrawingSpace"))
}

Тем не менее, вместо этого я бы использовал Canvas, чтобы рисовать круги и линии. Canvas дает вам гораздо больше контроля над тем, где именно рисовать.

Например:

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

Как прокомментировал Sweeper, более простой способ нарисовать сетку — использовать Canvas.

Однако, если вы действительно хотите использовать LazyVGrid, то линии можно просто нарисовать, наложив их на круги. Таким образом, позиционирование происходит автоматически и вычисления полностью исключаются.

• Знак GeometryReader можно использовать, чтобы найти размер каждой ячейки сетки.
• Смещение можно использовать для перекрытия с предыдущим кругом в строке или столбце.
• Необходимо внести корректировку в шаг сетки. В качестве альтернативы вы можете установить интервал равным 0 и вместо этого использовать отступы вокруг кругов.

struct CircleGridView: View {
    let rows = 10
    let columns = 5
    let spacing: CGFloat = 10

    var body: some View {
        ZStack {
            LazyVGrid(
                columns: Array(
                    repeating: GridItem(.flexible(), spacing: spacing),
                    count: columns
                ),
                spacing: spacing
            ) {
                ForEach(0..<rows * columns, id: \.self) { index in
                    Circle()
                        .foregroundColor(.blue)
                        .frame(width: 50, height: 50)
                        .frame(maxWidth: .infinity)
                        .overlay {
                            GeometryReader { proxy in
                                ZStack {
                                    if (index / columns) > 0 {
                                        Color.orange
                                            .frame(width: 2)
                                            .offset(y: -(proxy.size.height + spacing) / 2)
                                    }
                                    if !index.isMultiple(of: columns) {
                                        Color.red
                                            .frame(height: 2)
                                            .offset(x: -(proxy.size.width + spacing) / 2)
                                    }
                                }
                                .frame(maxWidth: .infinity, maxHeight: .infinity)
                            }
                        }
                }
            }
            .padding(10)
        }
    }
}