【问题标题】:Multiple NavigationLinks used within Lists not working in SwiftUI列表中使用的多个 NavigationLink 在 SwiftUI 中不起作用
【发布时间】:2020-06-09 17:19:06
【问题描述】:

我正在关注 Apple 的 SwiftUI 教程,在“与 UIKit 交互”中,他们让我们制作了图像轮播(地标图像)。当我尝试使用它时,我做到了,当您点击图像时,它会将您带到该图像的详细视图。我还在轮播中的图像下方添加了一个标题,我希望该标题能够在点击时将您带到有关该特定地标的小文章。但是,只有标题将您带到了目的地,而图像没有做任何事情(尽管当您按下它时它会突出显示)。

我不会转储确切的代码,但我已经制作了一个简化版本,它具有相同的设置并传达了我的观点。我将添加 cmets 以使其不那么繁琐。

struct ContentView: View {
    @State var currentPage = 0  // Tracks page number of the Carousel.

    var body: some View {
        NavigationView {
            List {
                Carousel(currentPage: $currentPage)
                    .listRowInsets(EdgeInsets())

                Text("Page number: \(currentPage + 1)")  // Displays page number of Carousel.
            }
        }
    }
}
struct Carousel: View {
    @Binding var currentPage: Int

    var body: some View {
       VStack {
            PageView([Photo(), Photo()], currentPage: $currentPage)  // This is a view from the Apple Tutorial. I'll link it incase you want to check out the code for this.
                .equatable()  // This allows the Text which shows the page number to work. I've made the '==' operator to always return true for the sake of simplicity.
                .frame(height: 350)

            NavigationLink(destination: Text("Write-up about landmark")) {
                Text("\"Captions...\"")  // This changes in the real app depending on the page number. This NavigationLink always works and takes me to the correct page.
                    .font(.headline)
                    .padding(.bottom, 10)
            }
            .padding(.trailing)
        }
    }
}

struct Photo: View {
    var body: some View {
        NavigationLink(destination: Text("Landmark Detail")) {  // This NavigationLink doesn't work. It highlights when pressed down on, but doesn't take you anywhere.
            Image(systemName: "person")  // These are the respective landmarks in the real app.
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: UIScreen.screenWidth)  // Custom static property. It's equal to UIScreen.main.bounds.size.width
        }
    }
}

链接到 PageView 结构:https://developer.apple.com/tutorials/swiftui/interfacing-with-uikit#create-view-to-represent-a-uipageviewcontroller(第 3 节第 3 步)
(注意:由于我在 ContentView 中跟踪 currentPage 变量而不是 PageView,所以 @987654328 PageView 中的 @ 变量在我的代码中是 Binding 而不是 State

如果有人可以解释我如何使 NavigationLink 工作,请告诉我。 如果你懒得写代码,你可以解释一下如何做,我会从那里弄清楚。

提前致谢!

【问题讨论】:

    标签: ios swift list swiftui swiftui-navigationlink


    【解决方案1】:

    该链接进入不同的视图层次结构,因此 NavigationView 看不到它。这是可能的解决方案(未经测试 - 粗糙)。

    1) 在 Photo 内部传递回调操作

    struct Photo: View {
        let action: () -> Void
        var body: some View {
            Button(action: action) {
                Image(systemName: "person")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: UIScreen.screenWidth)
            }
        }
    }
    

    2) 将来自Carousel 的回调操作注入Photo

    struct Carousel: View {
        @Binding var currentPage: Int
    
        @State private var photoActivated = false // for in-code activation
        var body: some View {
           VStack {
                PageView([Photo(action: activateLink), Photo(action: activateLink)], currentPage: $currentPage)  // This is a view from the Apple Tutorial. I'll link it incase you want to check out the code for this.
                    .equatable()  // This allows the Text which shows the page number to work. I've made the '==' operator to always return true for the sake of simplicity.
                    .frame(height: 350)
                    .background(
                        // hidden, to be activated by injected action
                        NavigationLink(destination: Text("Landmark Detail \(currentPage)"),
                            isActive: $photoActivated) { EmptyView() })
    
                NavigationLink(destination: Text("Write-up about landmark")) {
                    Text("\"Captions...\"")  // This changes in the real app depending on the page number. This NavigationLink always works and takes me to the correct page.
                        .font(.headline)
                        .padding(.bottom, 10)
                }
                .padding(.trailing)
            }
        }
    
        private func activateLink() {
            self.photoActivated.toggle()
        }
    }
    

    【讨论】:

    • 我尝试了这个解决方案,但不幸的是,当我按下标题时,它打开了两个链接。有没有可能使用onTapGesture 的解决方案?
    • @rayaantaneja,在 List 的一行中有多个链接需要特殊处理 - 已解决 in this topic
    • 嘿,非常感谢您的帮助,这真的很重要!我设法通过使用NavigationLink(destination:tag:selection:_)onTapGesture 让它工作。我已经做了一整天了,所以我非常感谢你帮助我解决了我的问题。万分感谢! @Asperi
    猜你喜欢
    • 2019-11-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-12-15
    • 1970-01-01
    • 2019-11-14
    • 2021-05-02
    • 1970-01-01
    相关资源
    最近更新 更多