SwiftUI .toolbar无法显示在屏幕底部问题求助

核心问题根源 #

你遇到的两种异常，本质都是.toolbar修饰符的视图层级位置和ToolbarItem的placement参数设置错误导致的：

• 未指定底部工具栏的placement: .bottomBar，会让系统自动分配位置，和顶部导航元素冲突
• 将.toolbar嵌套在子视图（比如List的行视图）中，会破坏导航栈的布局优先级，导致顶部标题/按钮错位，甚至移动修饰符时触发布局崩溃

修复方案 #

1. 固定.toolbar的添加位置

必须将.toolbar直接附加在NavigationStack（iOS16+）或NavigationView（iOS15及以下）的直接子视图上，或者直接附加在导航容器本身，不要嵌套在更深层级的子视图里。

2. 明确指定每个ToolbarItem的位置

• 顶部的编辑按钮、标题相关元素，使用.navigationBarTrailing/.navigationBarLeading作为placement
• 底部工具栏元素，必须指定placement: .bottomBar

正确代码示例（iOS16+） #

struct ContentView: View {
    @State private var isEditing = false
    
    var body: some View {
        NavigationStack {
            // 主内容视图（比如List）
            List {
                Text("示例内容行1")
                Text("示例内容行2")
            }
            // 设置导航标题
            .navigationTitle("我的页面")
            // 启用编辑模式的工具栏样式（可选，配合编辑按钮）
            .toolbarRole(.editor)
            // 正确添加toolbar到主内容视图层级
            .toolbar {
                // 顶部右侧编辑按钮
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(isEditing ? "完成" : "编辑") {
                        isEditing.toggle()
                    }
                }
                
                // 底部工具栏
                ToolbarItem(placement: .bottomBar) {
                    HStack {
                        Button("添加") { /* 执行添加操作 */ }
                        Spacer()
                        Button("删除") { /* 执行删除操作 */ }
                    }
                }
            }
            // 绑定编辑模式状态
            .environment(\.editMode, $isEditing)
        }
    }
}

常见错误排查点 #

• 移除所有嵌套在子视图中的.toolbar修饰符，确保整个导航栈只有一处主要的toolbar配置
• 检查是否有重复的.toolbar修饰符，多个toolbar会导致布局冲突崩溃
• 不要省略placement: .bottomBar，系统默认的placement会优先分配到顶部，导致底部工具栏消失

内容的提问来源于stack exchange，提问作者James J Creston