SwiftUI中Navigation Link失效，点击单元格无法跳转至详情页

我希望用户点击列表单元格时跳转至详情页，但当前NavigationLink处于禁用状态，点击对应单元格无法完成页面跳转。

相关代码 #

ContentView代码 #

struct ContentView: View {
    @EnvironmentObject private var viewModel: FruitListViewModel

    var body: some View {
        VStack {
            Text("Fruit List ")
                .font(.largeTitle)
            List {
                ForEach(viewModel.fruits) { fruit in
                    
                    NavigationLink(destination: FruitDetailsView(fruit: fruit)) {
                        RowView(name: fruit.name, genus: fruit.genus, family: fruit.family)
                    }
                }
            }
        }
        .onAppear {
            viewModel.fetchFruit()
        }
    }
}

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

RowView代码 #

import SwiftUI

struct RowView: View {
    let name: String
    let genus: String
    let family: String

    var body: some View {
        VStack(alignment: .leading) {
            HeadTitleView(name: name)
            Text("Genus: \(genus)")
            Text("family:\(family)")
            Spacer()
        }
    }
}
struct RowView_Previews: PreviewProvider {
    static var previews: some View {
        RowView(name: "Apple", genus: "Apple", family: "Appicote")
    }
}

FruitDetailsView代码 #

import SwiftUI

struct FruitDetailsView: View {
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
    @State private var name: String = ""
    @State private var genus: String = ""
    @State private var family: String = ""

    let fruit: Fruits

    var body: some View {
        VStack(alignment: .center, spacing: 5) {
            Text("Name: \(fruit.name)")
                .foregroundColor(Color.gray)
            Text("Genus: \(fruit.genus)")
                .foregroundColor(Color.gray)
            Text("Family: \(fruit.family)")
                .foregroundColor(Color.gray).padding(50)
        }.onAppear(perform: {
            name = fruit.name
            genus = fruit.genus
            family = fruit.family
        }).padding(20)
    }
}

界面截图 #

解决方案 #

核心问题原因 #

NavigationLink 必须在 NavigationView 的层级结构内才能正常触发页面跳转逻辑，原代码中 ContentView 未使用 NavigationView 包裹，导致 NavigationLink 处于禁用状态无法响应点击。

修改后的代码 #

1. 给ContentView添加NavigationView包裹

struct ContentView: View {
    @EnvironmentObject private var viewModel: FruitListViewModel

    var body: some View {
        NavigationView {
            VStack {
                Text("Fruit List ")
                    .font(.largeTitle)
                List {
                    ForEach(viewModel.fruits) { fruit in
                        NavigationLink(destination: FruitDetailsView(fruit: fruit)) {
                            RowView(name: fruit.name, genus: fruit.genus, family: fruit.family)
                        }
                    }
                }
            }
        }
        .onAppear {
            viewModel.fetchFruit()
        }
    }
}

2. 优化FruitDetailsView（移除冗余State变量）

原代码中@State变量属于冗余定义，直接使用传入的fruit属性即可：

struct FruitDetailsView: View {
    @Environment(\.presentationMode) var presentationMode
    let fruit: Fruits

    var body: some View {
        VStack(alignment: .center, spacing: 5) {
            Text("Name: \(fruit.name)")
                .foregroundColor(.gray)
            Text("Genus: \(fruit.genus)")
                .foregroundColor(.gray)
            Text("Family: \(fruit.family)")
                .foregroundColor(.gray)
                .padding(50)
        }
        .padding(20)
    }
}

内容的提问来源于stack exchange，提问作者user8705895