SwiftUI中不使用坐标在两视图间画线（二叉树可视化需求）

我需要实现一个二叉树图形化视图，核心限制是不能使用GeometryReader为单个视图设置坐标，必须完全依靠HStack和VStack进行自动布局，避免元素重叠或超出屏幕边界。

当前已实现递归绘制节点的函数，但无法动态绘制父节点与子节点之间的连接线：

func drawNode(_ node: TreeNode<Int>?) -> some View {
    if let currentNode = node {
        return AnyView(VStack {
            ZStack{
                Circle()
                    .foregroundColor(.accentColor)
                Text("\(currentNode.value)")
                    .foregroundColor(.white)
            }
            .frame(width: 30, height: 30)
            
            HStack(spacing: 12){
                if let leftNode = currentNode.leftChild{
                    drawNode(leftNode)
                    // TODO: 绘制当前节点与左子节点的连接线
                    // 难点：必须通过Stack动态布局实现，否则节点会重叠或超出屏幕
                }
                if let rightNode = currentNode.rightChild{
                    drawNode(rightNode)
                    // TODO: 绘制当前节点与右子节点的连接线
                }
            }
        })
    }
    else
    {
        return AnyView(EmptyView())
    }
}

我曾尝试用GeometryReader获取视图frame，再通过Path绘制连线，但frame始终为nil，无法实现需求。求解决方案：如何在不手动设置坐标的前提下，基于Stack布局动态绘制父子节点的连接线？

核心思路是利用视图偏好（Preference）收集节点位置，结合ZStack叠加绘制连接线，完全依赖Stack的自动布局逻辑，无需手动计算坐标：

1. 扩展TreeNode类，添加位置存储属性 #

在节点模型中新增center属性，用于存储节点视图的中心位置：

class TreeNode<Value> {
    var value: Value
    var leftChild: TreeNode?
    var rightChild: TreeNode?
    var center: CGPoint = .zero // 存储节点视图的中心坐标
    
    init(value: Value) {
        self.value = value
    }
}

2. 定义偏好键收集节点位置 #

创建自定义PreferenceKey，用于传递节点视图的中心位置：

struct NodeCenterPreference: PreferenceKey {
    static var defaultValue: CGPoint = .zero
    static func reduce(value: inout CGPoint, nextValue: () -> CGPoint) {
        value = nextValue()
    }
}

3. 修改drawNode函数，实现动态连线 #

通过ZStack将连接线与节点布局叠加，利用偏好获取的位置绘制路径：

func drawNode(_ node: TreeNode<Int>?) -> some View {
    if let currentNode = node {
        return AnyView(
            ZStack {
                // 优先绘制连接线（避免被节点遮挡）
                Path { path in
                    let parentBottomCenter = CGPoint(x: 15, y: 30) // 当前节点底部中心（节点尺寸30x30）
                    
                    // 绘制左子节点连线
                    if let leftCenter = currentNode.leftChild?.center {
                        path.move(to: parentBottomCenter)
                        path.addLine(to: CGPoint(x: leftCenter.x, y: leftCenter.y - 15)) // 左子节点顶部中心
                    }
                    
                    // 绘制右子节点连线
                    if let rightCenter = currentNode.rightChild?.center {
                        path.move(to: parentBottomCenter)
                        path.addLine(to: CGPoint(x: rightCenter.x, y: rightCenter.y - 15)) // 右子节点顶部中心
                    }
                }
                .stroke(.black, lineWidth: 2)
                
                // 节点布局（VStack+HStack自动排列）
                VStack {
                    ZStack{
                        Circle()
                            .foregroundColor(.accentColor)
                            .background(
                                // 利用GeometryReader获取节点中心位置，通过偏好传递
                                GeometryReader { geo in
                                    Color.clear
                                        .preference(key: NodeCenterPreference.self, value: geo.frame(in: .local).center)
                                        .onPreferenceChange(NodeCenterPreference.self) { center in
                                            currentNode.center = center
                                        }
                                }
                            )
                        Text("\(currentNode.value)")
                            .foregroundColor(.white)
                    }
                    .frame(width: 30, height: 30)
                    
                    HStack(spacing: 12){
                        if let leftNode = currentNode.leftChild {
                            drawNode(leftNode)
                        }
                        if let rightNode = currentNode.rightChild {
                            drawNode(rightNode)
                        }
                    }
                }
            }
        )
    } else {
        return AnyView(EmptyView())
    }
}

原理说明 #

• 利用GeometryReader获取节点视图的中心位置，通过PreferenceKey传递到节点模型的center属性中（仅用于获取位置，不参与视图定位）
• 在ZStack中先绘制连接线，再渲染节点布局，确保连线不会被节点遮挡
• 连接线的起点和终点基于节点的相对位置计算（如当前节点底部中心是自身VStack内的(15,30)，子节点顶部中心是其子节点center.y-15），完全跟随Stack的自动布局调整，不会出现重叠或超出屏幕的问题

内容的提问来源于stack exchange，提问作者Bruno De Vivo