SwiftUI双返回按钮问题的修复方法

问题根源 #

出现双返回按钮的核心原因是同时混用了旧版导航容器NavigationView和新版导航容器NavigationStack，两个导航容器嵌套导致导航栏层级叠加，出现重复的返回按钮。

解决方案（统一导航容器，适配iOS16+） #

步骤1：修改第一个视图，替换NavigationView为NavigationStack #

把ProgrammView中的NavigationView替换成NavigationStack，作为整个导航链路的根容器：

import SwiftUI

struct ProgrammView: View {
    var body: some View {
        NavigationStack { // 替换原NavigationView
            ScrollView(.vertical, showsIndicators: false) {
                VStack {
                    Text("blabla")
                        .multilineTextAlignment(.center)
                        .font(.custom("AvenirNext-Bold", size: 30))
                    NavigationLink {
                        InsultHandProgram()
                    } label: {
                        Image("35")
                            .resizable()
                            .scaledToFit()
                            .padding(.horizontal)
                            .padding(.bottom, 7)
                            .shadow(radius: 5)
                    }
                }
            }
        }
    }
}

步骤2：移除第二个视图内部的NavigationStack #

InsultHandProgram是被导航推入的子视图，不需要再嵌套NavigationStack，直接保留列表和导航相关修饰符即可：

import SwiftUI

struct InsultHandProgram: View {
    let numbers = InsultProgram.getInsultProgram()
    var body: some View {
        List(numbers) { insultProgram in
            NavigationLink(insultProgram.name, value: insultProgram)
        }
        .navigationTitle("blabla")
        .navigationDestination(for: InsultProgram.self) { insultProgram in
            InsultProgrammDetail(InsultProgram: insultProgram)
        }
        // 移除外层的NavigationStack
    }
}

说明 #

• 之前修改NavigationStack导致崩溃，大概率是因为移除导航容器后，navigationTitle、navigationDestination等导航修饰符失去了依托容器，现在统一使用NavigationStack作为根容器后，子视图的导航修饰符会自动关联到根容器，不会出现崩溃。
• 如果你需要兼容iOS15及以下版本，建议统一使用NavigationView，并将navigationDestination替换为传统的NavigationLink写法（直接在NavigationLink中传入目标视图）。

内容的提问来源于stack exchange，提问作者Марк Егорчев