SwiftUI中如何让PreferenceKey配合Canvas正确更新坐标？

我有一个需要随内容（如文本、DynamicType）响应式调整尺寸的卡片View，底层是占满卡片区域的Canvas视图，上层有一个任意位置的Button。需求是在Canvas中绘制从Button位置发射的粒子效果，核心问题是获取Button在Canvas本地坐标系中的坐标。

我用GeometryReader和PreferenceKey存储Button与Canvas的全局坐标，绘制时转换为Canvas本地坐标（示例中用绿色框表示）。示例里点击按钮会生成随机文本触发布局变化，测试响应性。但现在的问题是首次Canvas绘制时，canvasRect和buttonRect始终是默认值.zero，只有点击按钮后才会更新为有效坐标。目前可以通过.onAppear更新内容强制刷新，但复杂场景下不想用这种方式，请问怎么让PreferenceKey正确更新？

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


struct ResponsiveCanvasView: View {
    
    @State private var title: String = "Title"
    @State private var subtitle: String = "Subtitle"

    @State private var buttonFrame: CGRect = .zero
    @State private var canvasFrame: CGRect = .zero
    
    private func randomString() -> String {
        return (0..<Int.random(in: 1...5))
            .map { _ in UUID().uuidString }
            .joined(separator: " ")
    }
    
    var body: some View {
    
        VStack(alignment: .leading, spacing: 22) {
        
            VStack(alignment: .leading, spacing: 8) {
                Text(title)
                    .font(.headline)
                    .foregroundColor(.primary)
                Text(subtitle)
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }
            
            // Push out to fill the available width regardless of contents.
            .frame(maxWidth: .infinity, alignment: .leading)
            
            VStack {
                Button("Press Me") {
                    withAnimation(nil) { subtitle = randomString() }
                }
                .tint(.orange)
                .background {
                    GeometryReader { geo in
                        Color.clear
                            .preference(key: ButtonFrameKey.self, value: geo.frame(in: .global))
                    }
                }
                .onPreferenceChange(ButtonFrameKey.self) { newFrame in
                    buttonFrame = newFrame
                }
            }
            .frame(maxWidth: .infinity, alignment: .center)
        }
        .padding()
        .onAppear {
            // FIXME: We must force a geometry update by setting the subtitle to a new value
            // otherwise canvasRect and buttonRect will remain .zero!
            // subtitle = randomString()
        }
        .background {

            Canvas { context, canvasSize in
                
                // FIXME: unless we force a geometry update in onAppear, buttonRect and canvasRect will be .zero
                // at this point.
                
                // Convert the global button frame to local canvas coords.
                let x = buttonFrame.origin.x - canvasFrame.origin.x
                let y = buttonFrame.origin.y - canvasFrame.origin.y
                let origin = CGPoint(x: x, y: y)
                let rect = CGRect(origin: origin, size: buttonFrame.size).insetBy(dx: -6, dy: -6)
                                     
                let path = Path(roundedRect: rect, cornerRadius: 0)
                context.stroke(path, with: .color(.green))
            }
            .background {
                GeometryReader { geo in
                    Color.clear
                        .preference(key: CanvasFrameKey.self, value: geo.frame(in: .global))
                }
            }
            .onPreferenceChange(CanvasFrameKey.self) { newFrame in
                canvasFrame = newFrame
            }
        }
        .background(Color(uiColor: .secondarySystemBackground), in: .rect(cornerRadius: 8))
    }
}

#Preview {
    ResponsiveCanvasView()
}

问题根源在于PreferenceKey的更新时机和Canvas首次绘制时机不匹配——首次绘制时偏好值还未完成传递。以下是两种可靠的修复方式：

方式一：让Canvas绑定状态依赖 #

给Canvas添加状态监听，确保buttonFrame或canvasFrame更新时触发重绘，同时在绘制前判断坐标有效性：

// 修改原Canvas部分代码
Canvas { context, canvasSize in
    // 首次加载时坐标为空，直接跳过绘制
    guard !buttonFrame.isEmpty, !canvasFrame.isEmpty else { return }
    
    // 转换全局坐标到Canvas本地坐标系
    let localOrigin = CGPoint(
        x: buttonFrame.minX - canvasFrame.minX,
        y: buttonFrame.minY - canvasFrame.minY
    )
    let rect = CGRect(origin: localOrigin, size: buttonFrame.size).insetBy(dx: -6, dy: -6)
    context.stroke(Path(roundedRect: rect, cornerRadius: 0), with: .color(.green))
}
.background {
    GeometryReader { geo in
        Color.clear.preference(key: CanvasFrameKey.self, value: geo.frame(in: .global))
    }
}
.onPreferenceChange(CanvasFrameKey.self) { newFrame in
    canvasFrame = newFrame
}
// 新增：监听buttonFrame变化，确保状态更新时Canvas重绘
.onChange(of: buttonFrame) { _ in }

方式二：合并偏好值传递逻辑 #

将Canvas和Button的坐标通过同一个PreferenceKey传递，统一处理状态更新，避免同步延迟：

// 替换原两个PreferenceKey为合并版本
struct FramePreferenceKey: PreferenceKey {
    static var defaultValue: (canvas: CGRect, button: CGRect) = (.zero, .zero)
    static func reduce(value: inout (canvas: CGRect, button: CGRect), nextValue: () -> (canvas: CGRect, button: CGRect)) {
        let next = nextValue()
        // 只更新非空的坐标值
        if !next.canvas.isEmpty { value.canvas = next.canvas }
        if !next.button.isEmpty { value.button = next.button }
    }
}

struct ResponsiveCanvasView: View {
    @State private var title: String = "Title"
    @State private var subtitle: String = "Subtitle"
    // 用单个状态存储两个坐标
    @State private var frames: (canvas: CGRect, button: CGRect) = (.zero, .zero)
    
    private func randomString() -> String {
        return (0..<Int.random(in: 1...5))
            .map { _ in UUID().uuidString }
            .joined(separator: " ")
    }
    
    var body: some View {
        VStack(alignment: .leading, spacing: 22) {
            VStack(alignment: .leading, spacing: 8) {
                Text(title)
                    .font(.headline)
                    .foregroundColor(.primary)
                Text(subtitle)
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            
            Button("Press Me") {
                withAnimation(nil) { subtitle = randomString() }
            }
            .tint(.orange)
            .background {
                GeometryReader { geo in
                    Color.clear.preference(key: FramePreferenceKey.self, value: (.zero, geo.frame(in: .global)))
                }
            }
            .frame(maxWidth: .infinity, alignment: .center)
        }
        .padding()
        .background {
            GeometryReader { canvasGeo in
                Canvas { context, canvasSize in
                    guard !frames.canvas.isEmpty, !frames.button.isEmpty else { return }
                    let localOrigin = CGPoint(
                        x: frames.button.minX - frames.canvas.minX,
                        y: frames.button.minY - frames.canvas.minY
                    )
                    let rect = CGRect(origin: localOrigin, size: frames.button.size).insetBy(dx: -6, dy: -6)
                    context.stroke(Path(roundedRect: rect, cornerRadius: 0), with: .color(.green))
                }
                .preference(key: FramePreferenceKey.self, value: (canvasGeo.frame(in: .global), .zero))
            }
        }
        .onPreferenceChange(FramePreferenceKey.self) { newFrames in
            if !newFrames.canvas.isEmpty { frames.canvas = newFrames.canvas }
            if !newFrames.button.isEmpty { frames.button = newFrames.button }
        }
        .background(Color(uiColor: .secondarySystemBackground), in: .rect(cornerRadius: 8))
    }
}

核心逻辑说明 #

SwiftUI中PreferenceKey的传递发生在布局阶段，而Canvas首次绘制可能早于偏好值传递完成。通过让Canvas明确依赖状态变化，或合并偏好值传递路径，能确保首次布局完成后Canvas能获取到有效坐标，无需强制刷新内容。

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