ScrollView中使用matchedGeometryEffect匹配尺寸后布局异常问题

问题原因 #

.matchedGeometryEffect的.size属性仅在渲染阶段修改视图的视觉大小，不会在布局阶段向父容器（比如ScrollView、VStack）传递正确的尺寸信息。布局系统依然会使用目标视图的固有尺寸（这里灰色视图默认是最小尺寸）来计算布局，所以后续视图会“忽略”灰色视图的实际视觉尺寸，导致位置偏移，同时ScrollView也无法正确计算内容高度。

解决方案：手动同步尺寸+保留视觉匹配 #

通过PreferenceKey获取源视图的实际尺寸，直接给目标视图设置frame，同时保留.matchedGeometryEffect维持视觉过渡效果（如果需要动画）。

1. 先定义一个用于传递尺寸的PreferenceKey：

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

2. 修改你的TestView实现：

struct TestView: View {
    @Namespace var namespace
    @State private var sourceSize: CGSize = .zero

    var body: some View {
        ScrollView {
            VStack(spacing: 0) {
                // 源视图：获取尺寸并传递给父视图
                Color.red.frame(width: 200, height: 300)
                    .matchedGeometryEffect(id: "match", in: namespace, properties: .size, isSource: true)
                    .background(
                        GeometryReader { proxy in
                            Color.clear.preference(key: SizePreferenceKey.self, value: proxy.size)
                        }
                    )

                // 目标视图：用获取到的尺寸设置frame，同时保留匹配效果
                Color.gray
                    .frame(width: sourceSize.width, height: sourceSize.height)
                    .matchedGeometryEffect(id: "match", in: namespace, properties: .size, isSource: false)

                Text("This text should be directly below the gray box")
            }
            .onPreferenceChange(SizePreferenceKey.self) { newSize in
                sourceSize = newSize
            }
        }
    }
}

关于是否是SwiftUI Bug #

这不属于Bug，而是.matchedGeometryEffect的设计限制。它的核心定位是用于视图间的过渡动画，而非作为布局同步工具。苹果官方文档也明确说明，该修饰符主要服务于动画场景，不会影响布局阶段的尺寸计算逻辑。

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