SwiftUI中闭包传入的绑定条件无法更新Button禁用状态的问题求助

我最近在写SwiftUI组件的时候遇到了一个很奇怪的状态更新问题，折腾了半天终于找到原因，现在把问题和解决方案分享出来，也想确认下有没有更优的处理方式。

我的场景是封装了一个可复用的TestView组件，里面包含输入框、自定义Picker（通过闭包注入）和一个提交按钮。按钮的启用条件是输入框不为空且Picker已选中有效选项。

但实际运行时发现一个bug：如果我先选中Picker的选项，再在输入框里输入文本，提交按钮并不会自动变成可点击状态——必须再去Picker里重新选一次选项，按钮才会正常启用。

先贴一下我的最小复现代码：

import SwiftUI

struct TestView<PickerContent: View>: View {
    // 注意这里错误地使用了@ViewBuilder
    @ViewBuilder var additionalEnterButtonDisabledConditions: () -> Bool
    @ViewBuilder var pickerContent: () -> PickerContent
    
    @State private var userInput: String = ""
    
    var body: some View {
        HStack {
            TextField("", text: $userInput)
                .textFieldStyle(.roundedBorder)
                .padding()
            
            pickerContent()
            
            Button("Enter") {}
                .disabled(userInput.isEmpty || additionalEnterButtonDisabledConditions())
                .buttonStyle(.borderedProminent)
                .padding()
        }
    }
}

struct TestViewWithPicker: View {
    @State private var selectedPickerItem: String? = nil
    
    var body: some View {
        TestView(
            additionalEnterButtonDisabledConditions: {
                return selectedPickerItem == nil
            },
            pickerContent: {
                PickerView(selectedPickerItem: $selectedPickerItem)
            }
        )
    }
}

struct PickerView: View {
    @Binding var selectedPickerItem: String?
    private let pickerItems: [String] = ["Option A", "Option B", "Option C"]
    
    var body: some View {
        Picker("", selection: $selectedPickerItem) {
            Text("Select Picker Item").tag(nil as String?)
            ForEach(pickerItems, id: \.self) { pickerItem in
                Text(pickerItem).tag(pickerItem as String?)
            }
        }
        .pickerStyle(.menu)
        .fixedSize(horizontal: true, vertical: true)
    }
}

struct HomeView: View {
    var body: some View {
        TestViewWithPicker()
    }
}

问题分析 #

我排查了半天，发现核心错误是错误地给返回Bool的闭包添加了@ViewBuilder属性包装器！

@ViewBuilder是SwiftUI专门用来构建视图的属性包装器，它要求闭包的返回值必须是View类型（或者兼容的视图组合类型）。但我这里的additionalEnterButtonDisabledConditions是返回Bool的闭包，用@ViewBuilder完全是误用——这会导致SwiftUI错误地处理这个闭包的类型和依赖追踪，使得闭包的调用结果无法被正确监听，按钮的disabled状态也就无法及时更新。

另外，因为@ViewBuilder的误用，SwiftUI无法正确追踪闭包内部引用的selectedPickerItem状态变化，导致即使selectedPickerItem已经不为nil，TestView也不会重新计算按钮的禁用条件，除非Picker视图本身触发了刷新。

解决方案 #

只需要做一个简单的修改：把additionalEnterButtonDisabledConditions上的@ViewBuilder删掉，让它变成一个普通的() -> Bool闭包即可。

修改后的TestView代码：

struct TestView<PickerContent: View>: View {
    // 修复：移除@ViewBuilder，改为普通闭包
    var additionalEnterButtonDisabledConditions: () -> Bool
    @ViewBuilder var pickerContent: () -> PickerContent
    
    @State private var userInput: String = ""
    
    var body: some View {
        HStack {
            TextField("", text: $userInput)
                .textFieldStyle(.roundedBorder)
                .padding()
            
            pickerContent()
            
            Button("Enter") {}
                .disabled(userInput.isEmpty || additionalEnterButtonDisabledConditions())
                .buttonStyle(.borderedProminent)
                .padding()
        }
    }
}

修复原理 #

1. 移除@ViewBuilder后，闭包恢复成普通的Bool返回类型，SwiftUI可以正确解析闭包的调用结果。
2. 当selectedPickerItem变化时，TestViewWithPicker的@State会触发自身body刷新，重新创建TestView实例，此时additionalEnterButtonDisabledConditions()会返回最新的状态结果。
3. 当userInput变化时，TestView的@State会触发自身body刷新，调用闭包获取最新的Picker选中状态，从而正确更新按钮的禁用状态。

现在再测试流程就正常了：

• 选中Picker选项 → 输入框输入文本 → 按钮自动启用，不需要额外操作。

补充说明 #

如果你的实际场景中，additionalEnterButtonDisabledConditions的依赖更复杂，也可以考虑把它改成Binding<Bool>类型，让TestView直接监听这个绑定的变化，这样TestView可以更直接地感知外部状态的更新，不需要依赖父视图的body刷新。比如：

struct TestView<PickerContent: View>: View {
    let isAdditionalConditionDisabled: Binding<Bool>
    @ViewBuilder var pickerContent: () -> PickerContent
    
    @State private var userInput: String = ""
    
    var body: some View {
        HStack {
            TextField("", text: $userInput)
                .textFieldStyle(.roundedBorder)
                .padding()
            
            pickerContent()
            
            Button("Enter") {}
                .disabled(userInput.isEmpty || isAdditionalConditionDisabled.wrappedValue)
                .buttonStyle(.borderedProminent)
                .padding()
        }
    }
}

// 父视图中传递绑定
struct TestViewWithPicker: View {
    @State private var selectedPickerItem: String? = nil
    
    var body: some View {
        TestView(
            isAdditionalConditionDisabled: Binding(
                get: { selectedPickerItem == nil },
                set: { _ in }
            ),
            pickerContent: {
                PickerView(selectedPickerItem: $selectedPickerItem)
            }
        )
    }
}

这种方式对于更复杂的状态依赖场景会更稳定，因为TestView可以直接监听绑定的变化，不需要依赖父视图的刷新。

内容来源于stack exchange