SwiftUI：如何增大导航底部栏以适配大按钮

一、苹果示例的真实实现逻辑 #

你看到的苹果官方示例里的大按钮，并不是放在系统默认的bottomBar中，而是通过自定义底部容器的方式实现的——系统自带的bottomBar有固定高度限制，强行塞大按钮必然会超出范围。

二、推荐方案：自定义底部容器（和苹果示例一致） #

直接把导航栈和自定义按钮放在同一个垂直容器里，完全控制样式和高度，同时隐藏系统底部栏，这是最稳妥的方式：

struct ContentView: View {
    var body: some View {
        VStack(spacing: 0) {
            NavigationStack {
                Text("页面主内容")
                    .toolbar(.hidden, for: .bottomBar) // 隐藏系统默认底部栏
            }
            
            // 自定义的底部大按钮区域
            Button("完成操作") {
                // 这里写按钮点击逻辑
            }
            .fontWeight(.semibold)
            .font(.title3)
            .frame(maxWidth: .infinity)
            .padding(.vertical, 16)
            .background(Color.accentColor)
            .foregroundColor(.white)
            .cornerRadius(12)
            .padding(.horizontal, 16)
            .padding(.bottom, 8) // 适配底部安全区，避免被Home条挡住
        }
    }
}

三、备选方案：强行调整系统BottomBar高度（不推荐） #

如果一定要用系统的bottomBar，可以通过扩展背景高度和增加按钮内边距的方式适配，但这种方式可能在不同设备/系统版本出现适配问题：

struct ContentView: View {
    var body: some View {
        NavigationStack {
            Text("页面主内容")
                .toolbar {
                    ToolbarItem(placement: .bottomBar) {
                        Button("完成操作") {
                            // 按钮点击逻辑
                        }
                        .fontWeight(.semibold)
                        .frame(maxWidth: .infinity)
                        .padding(.vertical, 16)
                        .background(Color.accentColor)
                        .foregroundColor(.white)
                        .cornerRadius(12)
                    }
                }
                .toolbarBackground(Color.white, for: .bottomBar)
                .toolbarBackground(.visible, for: .bottomBar)
                // 给底部栏添加额外内边距撑高容器
                .padding(.bottom, 24)
        }
    }
}

注意点 #

你原来的代码有个错误：ToolbarItem的内容不能直接写修饰符，必须先声明具体的View（比如Button），再给View添加样式修饰符。

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