SwiftUI关闭Modal后主视图按钮无法点击问题排查

问题描述 #

在SwiftUI开发的PeopleListView中，页面包含NavigationView，点击右上角+按钮会弹出AddPersonView模态框。关闭该模态框后，主视图的+按钮无法被点击，必须重启APP或通过NavigationLink跳转其他视图刷新后才能恢复响应。

问题原因 #

1. 过时API缺陷：navigationBarItems是已废弃的API，存在状态同步bug，模态框关闭后易导致导航栏控件状态异常。
2. 视图层级错误：将导航栏按钮修饰在NavigationView本身而非其内部子视图上，导致视图状态更新不及时。
3. 不必要的导航嵌套：模态框AddPersonView内部再次嵌套NavigationView，额外增加导航栈层级，干扰主视图的导航状态。

修复方案及代码示例 #

1. 主视图PeopleListView修改 #

替换过时的navigationBarItems为toolbar，并将导航栏按钮修饰在NavigationView内部的根视图上：

struct PeopleListView: View {
    @State private var showAddPersonModal = false
    
    var body: some View {
        NavigationView {
            // 此处为你的主列表内容，示例用List展示
            List {
                // 列表项内容
            }
            .navigationTitle("联系人列表")
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    addButton
                }
            }
        }
        .sheet(isPresented: $showAddPersonModal) {
            AddPersonView()
        }
    }
    
    var addButton: some View {
        Button(action: {
            showAddPersonModal.toggle()
        }) {
            Image(systemName: "plus")
        }
    }
}

2. 模态视图AddPersonView修改 #

移除内部嵌套的NavigationView，直接在根视图上使用toolbar添加关闭按钮：

struct AddPersonView: View {
    @Environment(\.dismiss) var dismiss
    
    var body: some View {
        VStack {
            // 此处为添加联系人的表单内容
        }
        .navigationTitle("添加联系人")
        .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                closeButton
            }
        }
    }
    
    var closeButton: some View {
        Button("关闭") {
            dismiss()
        }
    }
}

3. iOS16+ 优化建议 #

如果APP适配iOS16及以上版本，建议使用NavigationStack替代NavigationView，进一步提升稳定性：

// PeopleListView中的NavigationView替换为NavigationStack
NavigationStack {
    List {
        // 列表项内容
    }
    .navigationTitle("联系人列表")
    .toolbar {
        ToolbarItem(placement: .navigationBarTrailing) {
            addButton
        }
    }
}

修复原理 #

• 使用toolbar替代废弃的navigationBarItems，解决旧API的状态同步问题。
• 将导航栏修饰符应用在NavigationView/NavigationStack内部的子视图上，保证视图层级正确，状态更新及时。
• 移除模态框内部的NavigationView，避免导航栈层级混乱，消除主视图导航状态的干扰因素。

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