SwiftUI中如何创建连接两个视图的弧形箭头？

要实现SwiftUI中两个视图间的动态箭头连接，不需要预先硬编码位置，可以借助PreferenceKey获取视图的实时坐标，再用Path绘制箭头。以下是完整适配声明式语法的实现方案：

1. 定义视图坐标收集工具 #

首先创建一个PreferenceKey，用来收集子视图在统一坐标系中的框架信息：

struct ViewFramePreferenceKey: PreferenceKey {
    static var defaultValue: [String: CGRect] = [:]
    
    static func reduce(value: inout [String: CGRect], nextValue: () -> [String: CGRect]) {
        value.merge(nextValue()) { $1 }
    }
}

2. 修改原视图并添加箭头绘制 #

改造你的ProfileIconWithPointer视图，通过GeometryReader收集视图坐标，再用自定义Shape绘制箭头：

struct ProfileIconWithPointer: View {
    @State private var viewFrames: [String: CGRect] = [:]
    
    var body: some View {
        ZStack {
            // 动态绘制箭头（仅当获取到两个视图坐标时渲染）
            if let imageFrame = viewFrames["image"], let textFrame = viewFrames["text"] {
                ArrowPath(start: imageFrame.bottomCenter, end: textFrame.topCenter)
                    .stroke(Color.black, lineWidth: 1.5)
            }
            
            // 原有视图结构
            VStack {
                Image(systemName: "person.circle.fill")
                    .padding()
                    .font(.title)
                    .background(
                        // 收集Image视图的坐标
                        GeometryReader { proxy in
                            Color.clear.preference(
                                key: ViewFramePreferenceKey.self,
                                value: ["image": proxy.frame(in: .named("arrowSpace"))]
                            )
                        }
                    )
                
                Text("You")
                    .offset(x: -20)
                    .background(
                        // 收集Text视图的坐标
                        GeometryReader { proxy in
                            Color.clear.preference(
                                key: ViewFramePreferenceKey.self,
                                value: ["text": proxy.frame(in: .named("arrowSpace"))]
                            )
                        }
                    )
            }
        }
        .coordinateSpace(name: "arrowSpace") // 设置统一坐标系
        .onPreferenceChange(ViewFramePreferenceKey.self) { newFrames in
            viewFrames = newFrames // 更新收集到的坐标
        }
    }
}

3. 辅助工具与箭头绘制逻辑 #

添加扩展和自定义Shape，简化坐标计算并实现箭头绘制：

// 扩展CGRect，快速获取视图的顶部/底部中心坐标
extension CGRect {
    var bottomCenter: CGPoint {
        CGPoint(x: midX, y: maxY)
    }
    
    var topCenter: CGPoint {
        CGPoint(x: midX, y: minY)
    }
}

// 自定义Shape，绘制带箭头的连线
struct ArrowPath: Shape {
    let start: CGPoint
    let end: CGPoint
    let arrowLength: CGFloat = 8 // 箭头长度
    let arrowAngle: CGFloat = .pi / 6 // 箭头张开角度
    
    func path(in rect: CGRect) -> Path {
        var path = Path()
        // 绘制主连线
        path.move(to: start)
        path.addLine(to: end)
        
        // 计算箭头方向向量
        let direction = CGPoint(x: end.x - start.x, y: end.y - start.y)
        let length = sqrt(direction.x * direction.x + direction.y * direction.y)
        let unitDirection = CGPoint(x: direction.x / length, y: direction.y / length)
        
        // 计算箭头两侧端点
        let leftArrowPoint = CGPoint(
            x: end.x - unitDirection.x * arrowLength + unitDirection.y * arrowLength * tan(arrowAngle),
            y: end.y - unitDirection.y * arrowLength - unitDirection.x * arrowLength * tan(arrowAngle)
        )
        let rightArrowPoint = CGPoint(
            x: end.x - unitDirection.x * arrowLength - unitDirection.y * arrowLength * tan(arrowAngle),
            y: end.y - unitDirection.y * arrowLength + unitDirection.x * arrowLength * tan(arrowAngle)
        )
        
        // 绘制箭头
        path.addLine(to: leftArrowPoint)
        path.move(to: end)
        path.addLine(to: rightArrowPoint)
        
        return path
    }
}

方案说明 #

• 全程基于SwiftUI声明式特性，视图位置变化（如屏幕旋转、布局调整）时箭头会自动更新
• 通过PreferenceKey和GeometryReader实现无侵入式的坐标收集，不需要修改原有视图结构
• 箭头的样式（颜色、粗细、长度、角度）可通过参数自由调整

内容的提问来源于stack exchange，提问作者Saul Aryeh Kohn