List SwiftUI 中的每行是否可以有多个 NavigationLinks? [英] Is it possible to have multiple NavigationLinks per row in a List SwiftUI?

问题描述

我不能在列表的同一行中使用多个 NavigationLink.

I can't use multiple NavigationLinks in the same row of a List.

看起来导航堆栈完全搞砸了，因为您点击一次，它会转到多个视图，然后不规则地返回...

It looks like the navigation stack is totally messed up, because you tap once and it goes to multiple views and back erratically...

在 TestList 中，我尝试在 Sections 中添加单独的 NavigationLinks，并且尝试将 NavigationLinks 移动到视图层次结构中的两个不同位置...

in TestList, I've tried adding the separate NavigationLinks in Sections, and I've tried moving the NavigationLinks two different places in the view hierarchy...

我尝试为列表的每一行添加两个 NavigationView，但是那么导航标题栏在我需要时不会消失..

I've tried adding two NavigationViews for each row of the list, but then the navigationTitleBar don't go away when I need it to..

struct ContentView: View {
    var body: some View {

        NavigationView {
            TestList()
        }


    }
}


struct TestList: View {
    var body: some View {

        List  {
            ListCellView()

        }

    }
}


struct ListCellView: View {

    var body: some View {
        VStack {
            Spacer()

            NavigationLink(destination: TestDestination1())  {
                Text("Test Destination 1")
                    .frame(width: 140, height: 50)
                    .background(RoundedRectangle(cornerRadius: 7.0).strokeBorder(Color.green, lineWidth: 3.0))
            }

            Spacer()

            NavigationLink(destination: TestDestination2())  {
                Text("Test Destination 2")
                    .frame(width:140, height: 50)
                    .background(RoundedRectangle(cornerRadius: 7.0).strokeBorder(Color.purple, lineWidth: 3.0))
                Spacer()
            }
        }
    }
}


struct TestDestination1: View {
    var body: some View {
        Text("Test Destination 1")
    }
}

struct TestDestination2: View {
    var body: some View {
        Text("Test Destination 2")
    }
}

我希望当您点击 NavigationLink 时，它会导航到目标视图.

I expect that when you tap a NavigationLink, it will navigate to the destination view.

当两个 NavigationLink 位于 List 的同一行并且您点击它时，会发生以下情况:1.转到其中一个视图2.点击返回"后，它会带你回到视图，然后带你到另一个目标视图.

What happens is when two NavigationLinks are in the same row of a List and you tap in it, it will: 1. go to one of the views 2. After tapping 'back', it will take you back to the view AND THEN take you to the other destination view.

https://youtu.be/NCTnqjzJ4VE

推荐答案

正如其他人提到的，为什么 1 个单元格中有 2 个 NavigationLink.问题在于 Cell 的多个按钮和手势.我猜每个单元格预计最多 1 个 Button/NavigationLink.正如您所注意到的，在您的视频中，您点击了一个 NavigationLink，但您的整个 Cell 得到了手势(突出显示)，这反过来会影响其他 Buttons/NavigationLinks.

As the others mentioned, why 2 NavigationLinks in 1 cell. The issue is with multiple buttons and gesture in general for the Cell. I guess it is expected 1 Button/NavigationLink max per cell. As you noticed, on your video, you tap on a NavigationLink but your full Cell got the gesture (highlighted), which in return impact the other Buttons/NavigationLinks.

无论如何，你可以让它在 1 个单元格中的 2 个 NavigationLinks 中工作，并进行 hack.下面我创建了 SGNavigationLink，我将其用于我自己的应用程序来解决您的问题.它只是简单地替换了 NavigationLink 并基于 TapGesture，因此您将失去亮点.

Anyhow, you can have it working, the 2 NavigationLinks in 1 cell, with a hack. Below I have created SGNavigationLink, which I use for my own app which solve your issue. It simply replace NavigationLink and based on TapGesture, so you will lose the highlight.

注意:我稍微修改了您的 ListCellView，因为我的 SGNavigationLink 中的 Spacer 造成了内部崩溃.

NB: I slightly modified your ListCellView, as the Spacer within my SGNavigationLink was creating an internal crash.

struct ListCellView: View {

    var body: some View {
        VStack {

            HStack{
                SGNavigationLink(destination: TestDestination1())  {
                    Text("Test Destination 1")
                        .frame(width: 140, height: 50)
                        .background(RoundedRectangle(cornerRadius: 7.0).strokeBorder(Color.green, lineWidth: 3.0))
                }

                Spacer()
            }

            HStack{
            SGNavigationLink(destination: TestDestination2())  {
                Text("Test Destination 2")
                    .frame(width:140, height: 50)
                    .background(RoundedRectangle(cornerRadius: 7.0).strokeBorder(Color.purple, lineWidth: 3.0))

            }
            Spacer()
            }
        }
    }
}



struct SGNavigationLink<Content, Destination>: View where Destination: View, Content: View {
    let destination:Destination?
    let content: () -> Content


    @State private var isLinkActive:Bool = false

    init(destination: Destination, title: String = "", @ViewBuilder content: @escaping () -> Content) {
        self.content = content
        self.destination = destination
    }

    var body: some View {
        return ZStack (alignment: .leading){
            if self.isLinkActive{
                NavigationLink(destination: destination, isActive: $isLinkActive){Color.clear}.frame(height:0)
            }
            content()
        }
        .onTapGesture {
            self.pushHiddenNavLink()
        }
    }

    func pushHiddenNavLink(){
        self.isLinkActive = true
    }
}

这篇关于List SwiftUI 中的每行是否可以有多个 NavigationLinks?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！