如何移除SwiftUI自定义Toolbar下方的多余间隙？

这不是bug，是需要调整布局设置来解决。

你遇到的顶部空白是NavigationStack默认的导航栏布局特性导致的，结合以下调整即可消除：

核心解决步骤 #

1. 修正属性拼写错误
   代码里的@ObservredObject是拼写错误，必须改为@ObservedObject，否则会引发运行时异常。

2. 设置紧凑的导航栏显示模式
   给NavigationStack添加.navigationBarTitleDisplayMode(.inline)，让自定义Toolbar的布局更紧凑，减少系统默认的顶部留白。

3. 让内容紧贴Toolbar底部
   给包含ProgressView的VStack添加.ignoresSafeArea(.container, edges: .top)，消除内容与Toolbar之间的安全区域间距。

修改后的完整代码 #

struct QuizScreen: View {
    
    @ObservedObject var model: AllQuizModel
    @Environment(\.dismiss) private var dismiss
    @State private var showMoveBackConfirm = false
    @State private var showHelpDialog = false
    
    var body: some View {
        NavigationStack {
            VStack (alignment: .center){
                // Progress Bar
                ProgressView(value: 0.5)
                Spacer()
            }
            .ignoresSafeArea(.container, edges: .top)
            .toolbar {
                ToolbarItem(placement: .topBarLeading){
                    Button{
                        showMoveBackConfirm.toggle()
                    } label: {
                        Image(systemName: "arrow.left")
                    }
                }
                ToolbarItem(placement: .principal){
                    Button{
                        showMoveBackConfirm.toggle()
                    } label: {
                        Text("Question 1 / 2")
                    }
                }
                ToolbarItem(placement: .topBarTrailing){
                    Button{
                        showHelpDialog.toggle()
                    } label: {
                        Image(systemName: "questionmark.bubble")
                    }
                }
            }
            .navigationBarTitleDisplayMode(.inline)
            .alert("Exit", isPresented: $showMoveBackConfirm){
                Button("Cancel", role: .cancel) { }
                Button("Confirm", role: .destructive) {dismiss()}
            }
            .alert("Hint", isPresented: $showHelpDialog){
                Button("OK", role: .cancel) { }
            }
        }
    }
}

补充说明 #

如果调整后仍有细微空白，可以检查ProgressView是否带有默认内边距，必要时通过.padding(.top, -8)这类方式微调，但上述核心设置已能解决绝大多数场景的问题。

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