是否可以在列表 SwiftUI 中每行有多个导航链接?

Question

我不能在列表的同一行中使用多个导航链接。

看起来导航堆栈完全搞砸了，因为您点击一次，它就会进入多个视图并不稳定地返回......

在测试列表中，我尝试在部分中添加单独的导航链接，并且我尝试在视图层次结构中移动导航链接的两个不同位置......

我尝试为列表的每一行添加两个导航视图，但是 然后导航标题栏在我需要它时不会消失。.

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")
}
}

我希望当您点击导航链接时，它将导航到目标视图。

发生的情况是，当两个导航链接位于列表的同一行中并且您点击它时，它将： 1. 转到其中一个视图 2.点击"返回"后，它将带您回到视图，然后将您带到另一个目标视图。

https://youtu.be/NCTnqjzJ4VE

Answer 1

正如其他人提到的，为什么 2 个单元格中有 1 个导航链接。问题在于单元格的多个按钮和手势。我想每个单元格最多 1 个按钮/导航链接。正如您所注意到的，在您的视频中，您点击导航链接，但您的整个单元格得到了手势(突出显示(，这反过来会影响其他按钮/导航链接。

无论如何，你可以让它工作，2个单元格中的1个导航链接，通过黑客。下面我创建了SGNavigationLink，我将其用于我自己的应用程序，可以解决您的问题。它只是取代了NavigationLink并基于TapGesture，因此您将失去突出显示。

注意：我稍微修改了你的ListCellView，因为我的SGNavigationLink中的垫片正在造成内部崩溃。

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
}
}

Answer 2

我不确定为什么需要多个导航链接(重复代码(。 您可以使用将保存列表所需属性 [标题、颜色、id 等] 的数据源，并根据 id 调用所需的视图。重复使用相同的代码。下面是一个示例。

struct TestList: View {
var body: some View {
List { // <- Use Data source 
ForEach(0..<2) { index in
ListCellView(index: index)
}
}
}
}
struct ListCellView: View {
var index: Int
var body: some View {
return   NavigationLink(destination: ViewFactory.create(index))  {
Text("Test Destination 1")
.frame(width: 140, height: 50)
.background(RoundedRectangle(cornerRadius: 7.0).strokeBorder(Color.green, lineWidth: 3.0))
}
}
}

class ViewFactory {
static func create(_ index: Int) -> AnyView {
switch index {
case 0:
return AnyView(TestDestination1())
case 1:
return AnyView(TestDestination2())
default:
return AnyView(EmptyView())
}
}
}
struct TestDestination1: View {
var body: some View {
Text("Test Destination 1")
}
}
struct TestDestination2: View {
var body: some View {
Text("Test Destination 2")
}
}