SwiftUI 选择器和 NavigationLink 手势冲突答案

【问题标题】：SwiftUI Picker and NavigationLink Gesture ConflictsSwiftUI 选择器和 NavigationLink 手势冲突
【发布时间】：2021-01-07 07:24:47
【问题描述】：

当我在 NavigationLink 中有一个选择器时，我遇到了一种情况。但是，当更改选择器切换时，它也会触发 NavigationLink，您将被定向到新屏幕。这是一些代码：

enum OptionTypes:Int,CaseIterable {
    
    case option1
    case option2
    
    var title:String  {
        switch self {
        case .option1:
            return "Option 1"
        case .option2:
            return "Option 2"
        }
    }
    
}

struct ContentView: View {
    
    @State var pickerState:OptionTypes = .option1
    @State var isActive:Bool = false
    
    var body: some View {
        
        
        NavigationView {
            
            NavigationLink(destination: Destination(), isActive:$isActive) {
                
                Picker("Options", selection: self.$pickerState) {
                    ForEach(OptionTypes.allCases, id: \.self) { type in
                        Text(type.title)
                   }
               }
                .pickerStyle(SegmentedPickerStyle())
                .padding()

            }
                        
        }
    }
}

struct Destination:View {
    
    var body: some View {
        Text("Hello World")
    }
    
}

理想的情况是让 Picker 拖动和点击手势不会触发 NavgiationLink。我尝试了 highPriorityGesture 和 simultaneousGesture 的不同排列，例如：

Picker("Options", selection: self.$pickerState) {
        ForEach(OptionTypes.allCases, id: \.self) { type in
                        Text(type.title)
        }
}
.pickerStyle(SegmentedPickerStyle())
.highPriorityGesture(DragGesture(minimumDistance: 0.1, coordinateSpace: .global).onEnded { _ in

})

但这条路线似乎行不通。我还尝试让 NavigationLink 使用isActive。然而，这似乎也没有得到尊重。即使没有我将isActive 设为true，它仍然可以以任何方式导航。我现在不确定如何独立于 NavigationLink 使用选择器功能。

【问题讨论】：

标签： swiftui

【解决方案1】：

您需要以任何一种方式将NavigationLink 与Picker 分开，例如

隐形

NavigationLink(destination: Destination(), isActive:$isActive) {
    EmptyView()
}

Picker("Options", selection: self.$pickerState) {
     ForEach(OptionTypes.allCases, id: \.self) { type in
         Text(type.title)
    }
}
 .pickerStyle(SegmentedPickerStyle())
 .padding()

在后台

Picker("Options", selection: self.$pickerState) {
     ForEach(OptionTypes.allCases, id: \.self) { type in
         Text(type.title)
    }
}
.pickerStyle(SegmentedPickerStyle())
.padding()
.background(
  NavigationLink(destination: Destination(), isActive:$isActive) {
    EmptyView()
  })

【讨论】：