SwiftUI中Picker标记为Disabled后仍可交互的问题

在SwiftUI的Form中，默认样式的Picker本质是导航链接组件，直接使用.disabled修饰符无法完全阻止其点击交互，这就是你遇到的变灰但仍能点击的原因。以下是两种可行的解决方案：

方案1：切换Picker为菜单样式 #

将Picker改为菜单样式，这种样式下.disabled可以直接生效，既会变灰也会阻止点击：

import SwiftUI

struct testView: View {
    @State private var selectedOption: String = "A"
    @State private var pickerEnabled: Bool = true
    var body: some View {
        Form {
            Section("Choose an option") {
                Toggle("Enable Picker", isOn: $pickerEnabled)
                Picker("Options", selection: $selectedOption) {
                    Text("Option A").tag("A")
                    Text("Option B").tag("B")
                    Text("Option C").tag("C")
                }
                .pickerStyle(MenuPickerStyle()) // 切换为菜单样式
                .disabled(!pickerEnabled) // 禁用控制
            }
        }
    }
}

#Preview {
    testView()
}

方案2：保留默认导航样式并阻止交互 #

如果需要保留默认的导航式Picker，可以通过添加遮罩和调整交互权限来彻底禁用：

import SwiftUI

struct testView: View {
    @State private var selectedOption: String = "A"
    @State private var pickerEnabled: Bool = true
    var body: some View {
        Form {
            Section("Choose an option") {
                Toggle("Enable Picker", isOn: $pickerEnabled)
                ZStack {
                    Picker("Options", selection: $selectedOption) {
                        Text("Option A").tag("A")
                        Text("Option B").tag("B")
                        Text("Option C").tag("C")
                    }
                    .disabled(!pickerEnabled) // 视觉上禁用
                    
                    // 禁用时添加透明遮罩阻止点击
                    if !pickerEnabled {
                        Color.clear
                            .contentShape(Rectangle())
                            .allowsHitTesting(true)
                    }
                }
            }
        }
    }
}

#Preview {
    testView()
}

说明 #

• 方案1的菜单样式更简洁，适合大多数场景，禁用后菜单不会弹出，视觉和交互都符合预期。
• 方案2保留了原生的导航选择界面，通过遮罩拦截点击事件，同时用.disabled保证视觉上的灰化效果。

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