SwiftUI Form搭配Picker时NavigationView额外返回按钮如何消除

问题原因 #

你遇到的异常表现由两个错误导致：

• 你将NavigationView作为子视图单独包裹页面下半部分的表单，系统会误将其识别为父导航栈的子页面，自动生成返回箭头
• 视图层级不合法：Section只能作为List/Form的子元素，不能直接放在NavigationView下，层级异常才会出现点击返回跳转到空白页的问题

修复步骤 #

1. 调整整体导航结构：将整个页面的内容都包裹在同一个NavigationView（iOS16及以上推荐用NavigationStack）内，不要拆分导航容器
2. 隐藏默认返回按钮：给导航容器的根视图添加navigationBarBackButtonHidden(true)修饰符，关闭默认返回能力
3. 修正Section层级：把「Add an incident」的Section挪到Form内部，保证视图层级合法

修复后代码示例 #

var body: some View {
    // 整个页面统一使用一个导航容器
    NavigationView {
        VStack(spacing: 0) {
            List {
                Section(header: Text("Existing incidents")) {
                    ForEach(incidents) { incident in
                        
                        VStack(alignment: .leading, spacing: 8) {
                            HStack {
                                Image.General.incident
                                    .foregroundColor(Constants.iconColor)
                                Text(incident.name)
                                    .foregroundColor(Constants.textColor)
                                    .bold()
                            }
                            HStack {
                                Image.General.clock
                                    .foregroundColor(Constants.iconColor)
                                Text(incident.date)
                                    .foregroundColor(Constants.textColor)
                            }
                            HStack {
                                Image.General.message
                                    .foregroundColor(Constants.iconColor)
                                Text(incident.message)
                                    .foregroundColor(Constants.textColor)
                            }
                        }
                    }
                }
            }
            .listStyle(PlainListStyle())
            
            Form {
                // Section移入Form内部保证层级合法
                Section(header: Text("Add an incident")
                            .bold()
                            .foregroundColor(Constants.textColor)
                            .padding(.leading, -16)) { // 调整padding适配Form默认边距
                    HStack {
                        Image.General.select
                        Spacer()
                        Picker("Incident selection", selection: $selectedIncident)
                        {
                            ForEach(incidentsList, id: \.self) {
                                Text($0)
                            }
                        }
                    }.padding()
                    
                    HStack {
                        Image.General.write
                        Spacer()
                        TextField("Additional comments", text: $comments)
                    }.padding()
                    
                    Button {
                        // 提交逻辑填写处
                    } label: {
                        Text("Submit")
                            .foregroundColor(Color(UIColor.white))
                    }
                    .padding(.top, 5)
                    .padding(.bottom, 5)
                    .padding(.leading, 20)
                    .padding(.trailing, 20)
                    .background(Color(UIColor.i6.blue))
                    .cornerRadius(5)
                }
            }
            .padding(.bottom)
        }
        // 隐藏默认返回按钮
        .navigationBarBackButtonHidden(true)
        // 如果不需要顶部导航栏可额外添加该修饰符，需要则删除
        // .navigationBarHidden(true)
    }
    // 固定为栈式导航样式，避免iPad等设备多列适配异常
    .navigationViewStyle(.stack)
}

补充说明 #

如果你的App最低支持版本为iOS16及以上，推荐将NavigationView替换为NavigationStack，API更规范性能更好，上述隐藏返回按钮的修饰符同样适用。

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