SwiftUI Segmented Control Picker点击已选中选项取消选中功能失效问题

我太懂你这个困扰了！之前我也踩过类似的坑——直接给分段选择器里的Text加onTapGesture完全没用，因为分段Picker自带的交互逻辑会把咱们自定义的手势给拦截掉，根本轮不到它触发。

咱们换个思路，通过**自定义绑定（Custom Binding）**来实现这个需求就靠谱多了，核心是把选中/取消的逻辑放到绑定的set方法里，而不是在子视图上动手脚。

解决方案代码（两种写法可选） #

写法一：用可选类型存储选中状态

这种写法更符合Swift的可选值语义，空值代表未选中：

struct ContentView: View {
    @State private var selectedOption: String? = nil
    
    var body: some View {
        // 创建自定义绑定
        let selectionBinding = Binding<String?>(
            get: { selectedOption },
            set: { newValue in
                // 如果点击的是已选中的选项，就取消选中
                if newValue == selectedOption {
                    selectedOption = nil
                } else {
                    selectedOption = newValue
                }
            }
        )
        
        Picker("", selection: selectionBinding) {
            ForEach(["A","B","C","D","E"], id:\.self) { option in
                Text(option)
            }
        }
        .pickerStyle(.segmented)
    }
}

写法二：用空字符串代表未选中（贴合你原本的代码逻辑）

如果你更习惯用空字符串表示未选中状态，可以这么改：

struct ContentView: View {
    @State private var selectedOption = ""
    
    var body: some View {
        let selectionBinding = Binding<String>(
            get: { selectedOption },
            set: { newValue in
                if newValue == selectedOption {
                    selectedOption = ""
                } else {
                    selectedOption = newValue
                }
            }
        )
        
        Picker("", selection: selectionBinding) {
            ForEach(["A","B","C","D","E"], id:\.self) { option in
                Text(option)
            }
        }
        .pickerStyle(.segmented)
    }
}

为什么原来的代码不生效？ #

分段Picker的每个分段的点击事件是由系统层面的Picker组件处理的，你给Text添加的onTapGesture会被Picker自带的交互逻辑覆盖，根本不会被执行。而自定义绑定是直接接管了Picker的选中状态变更逻辑，所以能完美实现“点击已选中选项取消选中”的需求。

备注：内容来源于stack exchange，提问作者loonn