SwiftUI 详情页NavigationLink跳转替换而非新建页面问题咨询

问题核心原因 #

你遇到的嵌套问题是因为每个FruitDetailView内部都独立包裹了NavigationView，SwiftUI的导航跳转默认是在当前最近的父级导航容器内推入新页面，所以每跳转一次就会多嵌一层导航栏。

解决步骤 #

1. 移除详情页的重复导航容器

NavigationView（或iOS16+的NavigationStack）只需要在**根视图（比如水果列表首页）**包裹一次即可，所有子页面、详情页都不需要额外嵌套，先修改你的FruitDetailView代码：

var body: some View {
    // 删掉外层多余的NavigationView！
    ScrollView(showsIndicators:false) {
        VStack(alignment: .center, spacing: 20) {
            // HEADER
            FruitHeaderView(Fruit: fruit)
            VStack(alignment:.leading,spacing:20) {
                // TITLE
                Text("\(fruit.title)")
                    .font(.largeTitle)
                    .fontWeight(.heavy)
                    .foregroundColor(fruit.gradientColors[1])
                // HEADLINE
                Text("\(fruit.headline)")
                    .font(.headline)
                    .fontWeight(.bold)
                // SUBHEADING
                Text("Learn more about \(fruit.title)".uppercased())
                    .fontWeight(.bold)
                    .foregroundColor(fruit.gradientColors[1])
                // DESCRIPTION
                Text("\(fruit.description)")
                    .multilineTextAlignment(.leading)
            } //: VSTACK
            .padding(.horizontal,20)
            .frame(maxWidth:640,alignment: .center)
        } //: VSTACK
        VStack(alignment:.leading) {
            Text("Other Fruit like \(fruit.title)")
                .fontWeight(.bold)
                .foregroundColor(fruit.gradientColors[1])
            ScrollView(.horizontal, showsIndicators:false) {
                HStack(spacing:30) {
                    ForEach(5...10,id:\.self) { item in
                        NavigationLink(destination: FruitDetailView(fruit: fruitsData[item])) {
                            AlternativeFruitView(Fruit: fruitsData[item])
                        }
                    }
                }
            }
        }
        .padding(.horizontal,20)
        .frame(maxWidth:640,alignment: .center)
      
    } //: SCROLL
    .navigationBarTitle("\(fruit.title)",displayMode: .inline)
    .navigationBarHidden(true)
    .edgesIgnoringSafeArea(.top)
}

原来的.navigationViewStyle(StackNavigationViewStyle())配置移到根视图的NavigationView上设置即可，修改后跳转就不会出现嵌套导航栏的问题。

2. 实现「替换当前页面」而非推入的需求

如果你不需要保留跳转前的详情页在导航栈里，根据系统兼容版本选方案即可：

• iOS16+ 推荐方案：用NavigationStack绑定NavigationPath管理导航栈，跳转时先移除当前页面再插入新页面，示例代码：

// 根视图定义导航栈
struct FruitAppRootView: View {
    @State private var navPath = NavigationPath()
    
    var body: some View {
        NavigationStack(path: $navPath) {
            FruitListPage(navPath: $navPath) // 你的首页列表
                .navigationDestination(for: Fruit.self) { fruit in
                    FruitDetailView(fruit: fruit, navPath: $navPath)
                }
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

// 详情页内替换跳转逻辑
struct FruitDetailView: View {
    let fruit: Fruit
    @Binding var navPath: NavigationPath // 注入导航栈控制变量
    
    // ...其他代码
    ForEach(5...10,id:\.self) { item in
        Button {
            // 先移除当前详情页，再添加新的目标详情页，实现替换效果
            navPath.removeLast()
            navPath.append(fruitsData[item])
        } label: {
            AlternativeFruitView(Fruit: fruitsData[item])
        }
    }
}

• iOS13+兼容方案：可以通过UINavigationController的扩展获取当前导航控制器，调用setViewControllers方法替换栈内最后一个页面即可。

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