如何将父视图定位为使其指定子视图中心处于父容器目标位置？

要实现移动父视图让其子视图的中心落在目标绝对位置，核心是获取子视图在父视图内的相对位置，再反向计算父视图需要调整的偏移量。以下是基于SwiftUI视图偏好（Preference）的可行方案：

步骤说明 #

1. 定义偏好键，用于传递子视图的几何锚点信息
2. 在目标子视图上添加锚点偏好标记
3. 读取偏好信息，计算父视图所需的偏移量
4. 应用偏移量调整父视图的position

完整代码 #

import SwiftUI

// 传递子视图锚点的偏好键
struct ChildAnchorPreferenceKey: PreferenceKey {
    static var defaultValue: Anchor<CGRect>? = nil
    
    static func reduce(value: inout Anchor<CGRect>?, nextValue: () -> Anchor<CGRect>?) {
        value = nextValue() ?? value
    }
}

// 传递计算后偏移量的偏好键
struct OffsetPreferenceKey: PreferenceKey {
    static var defaultValue: CGPoint = .zero
    
    static func reduce(value: inout CGPoint, nextValue: () -> CGPoint) {
        value = nextValue()
    }
}

struct ContentView: View {
    let childPosition: CGPoint
    @State private var adjustedOffset: CGPoint = .zero
    
    var body: some View {
        Rectangle()
            .fill(.yellow)
            .frame(width: 200, height: 200)
            .overlay(
                ZStack {
                    // 视觉辅助：目标位置参考方块
                    Rectangle()
                        .fill(.green)
                        .frame(width: 10, height: 10)
                        .position(childPosition)
                    
                    AnnotationView(position: childPosition)
                        .overlayPreferenceValue(ChildAnchorPreferenceKey.self) { anchor in
                            GeometryReader { proxy in
                                Color.clear
                                    .preference(
                                        key: OffsetPreferenceKey.self,
                                        value: calculateOffset(
                                            proxy: proxy,
                                            childAnchor: anchor,
                                            targetPoint: childPosition
                                        )
                                    )
                            }
                        }
                        .onPreferenceChange(OffsetPreferenceKey.self) {
                            adjustedOffset = $0
                        }
                        // 用目标位置加上偏移量，调整父视图位置
                        .position(childPosition + adjustedOffset)
                }
            )
    }
    
    /// 计算父视图需要的偏移量
    private func calculateOffset(proxy: GeometryProxy, childAnchor: Anchor<CGRect>?, targetPoint: CGPoint) -> CGPoint {
        guard let childFrame = childAnchor.map(proxy[...]) else { return .zero }
        // 获取子视图在父视图坐标系中的中心位置
        let childCenterInParent = CGPoint(x: childFrame.midX, y: childFrame.midY)
        // 偏移量 = 目标位置 - 子视图在父视图中的中心位置
        return CGPoint(
            x: targetPoint.x - childCenterInParent.x,
            y: targetPoint.y - childCenterInParent.y
        )
    }
}

struct AnnotationView: View {
    let position: CGPoint
    
    var body: some View {
        VStack {
            Text("(\(Int(position.x)), \(Int(position.y)))")
            
            Circle()
                .fill(.red)
                .frame(width: 7, height: 7)
                // 给需要作为定位基准的子视图添加锚点偏好
                .anchorPreference(key: ChildAnchorPreferenceKey.self, value: .bounds) { $0 }
        }
    }
}

// 扩展CGPoint支持加法运算
extension CGPoint {
    static func + (lhs: CGPoint, rhs: CGPoint) -> CGPoint {
        CGPoint(x: lhs.x + rhs.x, y: lhs.y + rhs.y)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView(childPosition: CGPoint(x: 67, y: 45))
    }
}

扩展性说明 #

如果需要更换其他子视图作为定位基准，只需将.anchorPreference(key: ChildAnchorPreferenceKey.self, value: .bounds) { $0 }添加到目标子视图上即可，无需修改其他逻辑，适配任意尺寸和位置的子视图。

内容的提问来源于stack exchange，提问作者ospr