SwiftUI网格圆间连线坐标计算错误，求修正方案

我一直在尝试在SwiftUI中为10×5网格里的两个圆（第一个和第二个）之间绘制直线。试过Preference Key和GeometryReader的方案，但都没成功，于是自己写了计算坐标的方法，能运行但结果不符合预期。我的目标是获取每个圆心的CGPoint，以便精准在圆心间画直线，求指出计算逻辑里的错误。

以下是当前实现代码，其中calculateCirclePosition()是自定义的坐标计算方法：

import SwiftUI

struct CircleGridView: View {
    let rows = 10
    let columns = 5
    @State private var coordinates: [Int :CGPoint] = [:]
    
    var body: some View {        
        ZStack {    
            LazyVGrid(columns: Array(repeating: GridItem(.flexible()), count: columns)) {
                ForEach(0..<rows * columns, id: \.self) { index in                    
                    Circle()
                        .foregroundColor(.blue)
                        .frame(width: 50, height: 50)
                        .onAppear {
                            DispatchQueue.main.async {
                                let circlePosition = calculateCirclePosition(for: index)
                                coordinates[index] = circlePosition
                                print("Index \(index): \(circlePosition)")
                            }
                        }
                }
            }
            .padding(10)
            if let startPoint = coordinates[0], let endPoint = coordinates[1] {
                Path { path in 
                path.move(to: startPoint)
                path.addLine(to:  endPoint)
            }.stroke(Color.red, lineWidth: 2)
        }
        }
    }
        
        func calculateCirclePosition(for index: Int) -> CGPoint {
            let row = index / columns
            let column = index % columns
            let circleSize: CGFloat = 50
            let circleSpacing: CGFloat = 10 
            let yOffset: CGFloat = 85
            let xOffset: CGFloat = 15
            
            let x = CGFloat(column) * (circleSize + circleSpacing) + circleSize / 2 + circleSpacing + xOffset
            let y = CGFloat(row) * (circleSize + circleSpacing) + circleSize / 2 + circleSpacing + yOffset
            
            return CGPoint(x: x, y: y)
        }
}

问题分析 #

你的自定义计算逻辑存在三个核心问题：

1. 硬编码偏移值完全不可靠：xOffset和yOffset是固定数值，无法适配不同设备的屏幕尺寸、父容器布局变化，一旦布局环境改变，坐标就会完全错位。
2. 布局逻辑不匹配LazyVGrid设置：你用了.flexible()的GridItem，意味着列宽会根据父视图宽度自动分配，而不是固定的circleSize + circleSpacing，所以x坐标的计算逻辑和实际布局完全脱节。
3. 脱离SwiftUI布局系统：手动计算坐标的方式完全忽略了SwiftUI的自动布局机制，视图的实际位置由布局系统决定，硬算的结果必然和真实位置有偏差。

正确解决方案：使用Preference Key获取精准坐标 #

这是SwiftUI中获取视图实际位置的标准方案，完全适配布局系统的动态变化：

import SwiftUI

// 定义Preference Key用于收集圆心坐标
struct CircleCenterPreferenceKey: PreferenceKey {
    static var defaultValue: [Int: CGPoint] = [:]
    
    static func reduce(value: inout [Int: CGPoint], nextValue: () -> [Int: CGPoint]) {
        value.merge(nextValue()) { $1 }
    }
}

struct CircleGridView: View {
    let rows = 10
    let columns = 5
    @State private var coordinates: [Int: CGPoint] = [:]
    
    var body: some View {
        ZStack {
            LazyVGrid(columns: Array(repeating: GridItem(.flexible()), count: columns)) {
                ForEach(0..<rows * columns, id: \.self) { index in
                    Circle()
                        .foregroundColor(.blue)
                        .frame(width: 50, height: 50)
                        .background(
                            // 用GeometryReader获取视图在全局坐标系下的frame
                            GeometryReader { geo in
                                Color.clear
                                    .preference(
                                        key: CircleCenterPreferenceKey.self,
                                        value: [index: geo.frame(in: .global).center]
                                    )
                            }
                        )
                }
            }
            .padding(10)
            // 监听Preference变化，更新坐标集合
            .onPreferenceChange(CircleCenterPreferenceKey.self) { newCoordinates in
                coordinates = newCoordinates
            }
            
            // 根据真实坐标绘制直线
            if let startPoint = coordinates[0], let endPoint = coordinates[1] {
                Path { path in
                    path.move(to: startPoint)
                    path.addLine(to: endPoint)
                }
                .stroke(Color.red, lineWidth: 2)
            }
        }
    }
}

// 扩展CGRect，快速获取中心点
extension CGRect {
    var center: CGPoint {
        CGPoint(x: midX, y: midY)
    }
}

方案说明 #

1. Preference Key：用于收集所有子视图传递上来的圆心坐标，通过reduce方法合并所有坐标数据。
2. GeometryReader：在每个圆的背景中添加一个透明视图，用GeometryReader获取该视图（即圆）在全局坐标系下的frame，直接取center得到精准的圆心位置。
3. 响应式更新：通过onPreferenceChange监听坐标变化，实时更新coordinates状态，确保绘制的直线始终对应最新的圆心位置。

内容的提问来源于stack exchange，提问作者Jeevan Daniel Mahtani