SwiftUI中Binding变化时ViewBuilder内容未更新问题

我有一个可选配置isAttending，初始值为nil。点击“+”按钮时，会将该值设置为指定默认值false，期望Picker能立即显示该值为选中状态，但点击后Picker并未高亮选中值。只有当其他UI组件发生变化时，Picker才会在该渲染周期更新到正确的视觉状态。

当前表现：

期望表现：

相关代码：

import SwiftUI

struct QuestionView<Option, Content: View>: View {
    @Binding var option: Option?
    let defaultOption: Option?
    @ViewBuilder let content: () -> Content

    var body: some View {
        VStack {
            if let _ = option {
                content()
            } else {
                Button {
                    option = defaultOption
                } label: {
                    Label("Add Filter Option", systemImage: "plus")
                        .labelStyle(.iconOnly)
                }
            }
        }
    }
}

struct Config {
    var isAttending: Bool?
}

#Preview {
    @Previewable @State var config: Config = Config()
    QuestionView(option: $config.isAttending, defaultOption: false) {
        Picker("RSVP", selection: $config.isAttending) {
            Text("Attending").tag(true)
            Text("Not Attending").tag(false)
        }
        .pickerStyle(.segmented)
    }
}

问题原因 #

原代码使用if-else条件渲染切换视图：当option为nil时显示按钮，非nil时才创建并显示Picker。这种方式下，Picker是在option设置为默认值后才首次初始化渲染，SwiftUI在同一个渲染周期中，无法同步将绑定的最新值传递给刚创建的Picker，导致Picker初始状态未正确匹配选中值。

解决方案 #

方案一：保持Picker在视图层级中（推荐） #

修改QuestionView的视图结构，让Picker始终存在于视图层级中，仅通过隐藏/显示控制可见性，而非销毁重建。这样Picker的绑定会持续监听值的变化，当option被设置为默认值时，Picker能立即响应并高亮选中对应的选项。

修改后的QuestionView代码：

struct QuestionView<Option, Content: View>: View {
    @Binding var option: Option?
    let defaultOption: Option?
    @ViewBuilder let content: () -> Content

    var body: some View {
        VStack {
            // 让Picker始终存在，仅在option为nil时隐藏
            content()
                .hidden(option == nil)
            
            // 仅在option为nil时显示按钮
            if option == nil {
                Button {
                    option = defaultOption
                } label: {
                    Label("Add Filter Option", systemImage: "plus")
                        .labelStyle(.iconOnly)
                }
            }
        }
    }
}

方案二：强制Picker重新初始化 #

如果需要保持原有的条件渲染逻辑，可通过给Picker添加id修饰符，强制Picker在option变化时重新初始化并读取最新的绑定值：

QuestionView(option: $config.isAttending, defaultOption: false) {
    Picker("RSVP", selection: $config.isAttending) {
        Text("Attending").tag(true)
        Text("Not Attending").tag(false)
    }
    .pickerStyle(.segmented)
    .id(config.isAttending) // 用当前值作为id，值变化时重建Picker
}

当isAttending从nil变为false时，Picker会重新创建，初始化时就能正确读取到最新的选中值并高亮显示。

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