SwiftUI中Picker选中选项时如何触发调用视图或自定义方法

问题原因 #

SwiftUI 系统提供的 Picker 控件会优先接管内部所有交互事件，你添加在 ForEach、Text 上的 onTapGesture 会被控件本身拦截，无法触发。同样的，在 Picker 内部嵌套 Button 也会被拦截交互，这是系统控件的默认行为。

解决方案 #

推荐通过监听选中绑定值的变化触发逻辑，这是最符合SwiftUI声明式设计的实现方式：

方式1：用onChange修饰器监听选中值变更

在Picker外层添加onChange，监听selection绑定值的变化，选中项切换时selection会自动更新，直接在回调中执行你的逻辑即可：

Picker(selection: $selection, label: Text("Discover Plug")) {
    ForEach(vm.dataSet, id:\.self) { item in
        Text(item.Device).tag(item.Device)
    }
}
.onChange(of: selection) { newValue in
    // 选中值变化时触发对应逻辑
    Selected()
    // 调起相机的逻辑也在这里控制
}

func Selected() {
    print("selected")
}

方式2：给selection添加属性观察者

如果需要兼容低版本iOS，也可以直接给selection变量添加didSet观察者，变量更新时自动触发方法：

// 定义selection时添加观察者
@State private var selection: String = "" {
    didSet {
        Selected()
    }
}

调起相机视图的补充说明 #

不要直接在回调中返回CameraView()，需要定义状态变量控制相机视图的弹出，示例如下：

@State private var showCamera = false

Picker(selection: $selection, label: Text("Discover Plug")) {
    ForEach(vm.dataSet, id:\.self) { item in
        Text(item.Device).tag(item.Device)
    }
}
.onChange(of: selection) { newValue in
    Selected()
    showCamera = true
}
// 用sheet/fullScreenCover弹出相机视图
.sheet(isPresented: $showCamera) {
    CameraView()
}

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