SwiftUI onTapGesture块NavigationLink操作

时间:2020-11-12 01:41:47

标签: ios swift swiftui swiftui-navigationlink

我想按List的单元格以显示菜单,然后单击NavigationLink将菜单推送到新视图。

enter image description here

这是我的代码:

import SwiftUI

struct ContentView: View {
    let array = ["a", "b"]

    @State var isPushed: Bool = false

    @State var isDisplayMenu: Bool = false
    @State var isDestination1Clicked: Bool = false
    var body: some View {
        NavigationView {
            List {
                ForEach(array, id:\.self) { value in
                    VStack {
                        RowView(title: value)
                         .frame(maxWidth: .infinity)
                        if isDisplayMenu {
                            HStack {
                                ZStack {
                                    Text("D1")
                                    NavigationLink(
                                        destination: Destination1(),
                                        label: {
                                            EmptyView()}).hidden()
                                }

                                ZStack {
                                    Text("D2")
                                    NavigationLink(
                                        destination: Destination2(),
                                        label: {
                                            EmptyView()}).hidden()
                                }
                            }

                        }
                    }
                    .background(Color.green)
                    .contentShape(Rectangle())
                    .onTapGesture(count: 1, perform: {
                        isDisplayMenu.toggle()
                    })
                }
            }
        }

    }
}

struct Destination1: View {
    var body: some View {
        Text("D1")
    }
}

struct Destination2: View {
    var body: some View {
        Text("D2")
    }
}

struct RowView: View {

    var title: String

    var body: some View {
        VStack {
            Text("title")
            Text(title)
        }.background(Color.red)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

单击单元格时,将显示D1和D2。但是NavigationLink不起作用。

我认为原因是onTapGesture阻止了它。如何使NavigationLink有效?

有帮助吗?谢谢!

2 个答案:

答案 0 :(得分:1)

列表中定义了一些限制,这些限制仅仅是列表本身。

因此,我们不能在列表单元格中使用多个导航链接(如果使用多个,则无法获得预期的行为)

“空”视图也不会发生触摸事件。

这是您代码的修补程序。

struct ContentView: View {
    let array = ["a", "b"]
    
    @State var isPushed: Bool = false
    
    @State var isDisplayMenu: Bool = true
    @State var isDestination1Clicked: Bool = false
    var body: some View {
        NavigationView {
            ScrollView {
                ForEach(array, id:\.self) { value in
                    VStack {
                        RowView(title: value)
                            .frame(maxWidth: .infinity)
                            .background(Color.green)
                            .onTapGesture(count: 1, perform: {
                                withAnimation {
                                    isDisplayMenu.toggle()
                                }
                            })
                        
                        if isDisplayMenu {
                            HStack {
                                
                                NavigationLink(
                                    destination: Destination1(),
                                    label: {
                                        Spacer()
                                        Text("D1")
                                            .foregroundColor(.black)
                                        Spacer()
                                    })
                                
                                NavigationLink(
                                    destination: Destination2(),
                                    label: {
                                        Spacer()
                                        Text("D2")
                                        Spacer()
                                    })
                                    .foregroundColor(.black)
                                
                            }
                            .background(Color.purple)
                            
                        }
                    }
                    .padding()
                    .contentShape(Rectangle())
                    
                }
            }
        }
        
    }
}

struct Destination1: View {
    var body: some View {
        Text("D1")
    }
}

struct Destination2: View {
    var body: some View {
        Text("D2")
    }
}

struct RowView: View {
    
    var title: String
    
    var body: some View {
        VStack {
            Text("title")
            Text(title)
        }.background(Color.red)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

答案 1 :(得分:0)

尝试将“ onTapGesture”附加到“ NavigationView”。

NavigationView {
  ....
 }.onTapGesture(count: 1, perform: {
        isDisplayMenu.toggle()
 })