SwiftUI Toolbar使用.principal导致工具栏与内容间出现异常间隙

使用.principal位置放置Toolbar项时，NavigationView会默认给标题区域添加额外内边距，导致Toolbar和下方内容出现异常间隙。要实现“居中标题+两侧角落按钮”且消除间隙，有以下几种可行方案：

方案1：修改导航栏标题显示模式（最简单） #

保留.principal布局，通过设置navigationBarTitleDisplayMode(.inline)消除默认的标题下方间距：

struct AnotherTest: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Hello, World!")
                Spacer()
            }
            .toolbar {
                // 左侧按钮
                ToolbarItem(placement: .navigationBarLeading) {
                    Button("左按钮") {}
                }
                // 居中标题
                ToolbarItem(placement: .principal) {
                    Text("testing")
                }
                // 右侧按钮
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("右按钮") {}
                }
            }
            .navigationBarTitleDisplayMode(.inline) // 核心设置：消除标题区域的额外间距
        }
    }
}

方案2：自定义Toolbar布局（完全控制样式） #

放弃.principal，直接在Toolbar中用HStack实现三元素布局，避免默认间距：

struct AnotherTest: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Hello, World!")
                Spacer()
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button("左按钮") {}
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("右按钮") {}
                }
                // 占据整个导航栏宽度的居中标题
                ToolbarItem(placement: .navigationBarTrailing) {
                    HStack {
                        Spacer()
                        Text("testing")
                        Spacer()
                    }
                    .frame(maxWidth: .infinity)
                    .allowsHitTesting(false) // 防止遮挡左右按钮的点击区域
                }
            }
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

方案3：完全自定义导航栏（无默认约束） #

如果需要彻底摆脱NavigationView的默认样式限制，可以直接手动构建导航栏：

struct AnotherTest: View {
    var body: some View {
        VStack(spacing: 0) {
            // 自定义导航栏
            HStack {
                Button("左按钮") {}
                Spacer()
                Text("testing")
                Spacer()
                Button("右按钮") {}
            }
            .padding(.horizontal, 16)
            .frame(height: 44) // 匹配系统导航栏默认高度
            .background(Color(UIColor.systemBackground))
            .overlay(Divider(), alignment: .bottom) // 添加底部分隔线
            
            // 内容区域
            VStack {
                Text("Hello, World!")
                Spacer()
            }
            .padding()
        }
        .edgesIgnoringSafeArea(.top) // 让导航栏顶到安全区域顶部
    }
}

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