ios 如何在仅点击行上的指定视图(例如标题)时进行更深的导航

uinbv5nw  于 2023-03-14  发布在  iOS
关注(0)|答案(1)|浏览(95)

我有一个列表视图。列表是导航堆栈的一部分。当点击一行(ArticleRow)时,用户将被重定向到嵌套视图(ArticleContent)。我只想在点击标题而不是子标题时导航。我创建了ArticleRow视图,如下所示。

struct ArticleRow: View {
    let number: Int
    var body: some View {
        VStack {
            NavigationLink("Title: \(number)") {
                ArticleContent(number: number)
            }
            Text("Subtitle: \(number)")
        }
    }
}

尽管字幕视图不是NavigationLink的一部分,但点击字幕也会导致导航。如何解决这个问题?

代码:

import SwiftUI
import CoreData

extension Int: Identifiable {
    public var id: Int { self }
}

struct ContentView: View {
    
    var body: some View {
        NavigationView {
            List(Array(1...10)) { number in
                ArticleRow(number: number)
            }
        }
    }
}

struct ArticleRow: View {
    let number: Int
    var body: some View {
        VStack {
            NavigationLink("Title: \(number)") {
                ArticleContent(number: number)
            }
            Text("Subtitle: \(number)")
        }
    }
}

struct ArticleContent: View {
    let number: Int
    var body: some View {
        Text("This is article no: \(number)")
    }
}

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

kmb7vmvb1#

SwiftUI List限制了Button嵌套在列表行中时将元素点击到整个列表单元(行)的能力。NavigationLink被视为编译器端的按钮,因此该功能将适用。
我知道的唯一替代方法是利用.onTapGesture { [...] }并使用基于值的NavigationStack
转这个:

NavigationStack {
    List {
        NavigationLink(value: "Destination") {
            Text("NavigationLink")
        }
    }
}
@State private var navigationValue = String()

NavigationStack {
    List {
        Text("NavigationLink")
            .onTapGesture {
                navigationValue = "Destination"
            }
    }
    .navigationDestination(for: navigationValue) { _ in
        Text($0)
    }
}

相关问题