SwiftUI：为按钮嵌套VStack后onPreferenceChange不触发的原因

问题根源 #

给按钮嵌套VStack后，这个内层VStack默认采用紧凑布局（仅包裹按钮内容），导致外层VStack的布局依赖逻辑发生变化。SwiftUI的更新优化机制会判定绿色视图的overlay部分无需重新计算，因此仅在初始布局时发送一次默认的(0,0,0,0) frame，后续点击按钮改变expanded状态时，不会触发onPreferenceChange。

修复方案 #

有两种简单的解决方式：

方案1：强制绿色视图重建

给绿色视图绑定id，让SwiftUI在expanded状态变化时重新创建该视图，确保GeometryReader能重新计算最新的frame：

Color
    .green
    .frame(height: expanded ? 50 : 10)
    .id(expanded) // 绑定状态，强制视图重建
    .overlay {
        GeometryReader { proxy in
            Color.clear.preference(key: RectChangedPreferenceKey.self, value: proxy.frame(in: .global))
        }
    }

方案2：修正内层VStack的布局约束

给内层VStack设置maxWidth: .infinity，让它占据外层VStack的全部宽度，修正布局依赖关系，确保绿色视图的frame变化能被正确捕捉：

VStack {
    Button("Another button") { expanded.toggle() }
}
.frame(maxWidth: .infinity) // 让内层VStack充满宽度

原理说明 #

• 方案1通过id触发视图重建，绕过SwiftUI的更新优化，强制GeometryReader重新计算视图的全局frame。
• 方案2调整内层VStack的布局，让外层VStack的垂直布局变化能正确传递到绿色视图，触发PreferenceKey的更新逻辑。

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