SwiftUI自定义NavigationBar存在多余空白问题求助

问题根源 #

你遇到的空白来自三个核心点：

• NavigationStack默认会保留系统导航栏的布局占位（即便没设置标题，这块空间依然存在）
• List组件默认带有顶部内边距
• 自定义导航栏未适配顶部安全区，导致状态栏/刘海下方出现间隙

修改方案 #

1. 隐藏系统默认导航栏

在NavigationStack上添加.navigationBarHidden(true)，彻底消除系统导航栏的占位空白。

2. 让自定义导航栏适配顶部安全区

给自定义导航栏的背景添加.ignoresSafeArea(.container, edges: .top)，确保导航栏延伸到屏幕最上方，避免刘海/状态栏下方出现空白。

3. 移除List的默认顶部间距

给List设置.listStyle(.plain)，或者用contentInsets精准控制内边距。

修改后的完整代码 #

自定义导航栏组件

struct NavigationBarItem: View {
    var title: String

    var body: some View {
        VStack {
            HStack(alignment: .center) {
                Spacer()
                Text("Test")
                    .font(.largeTitle.weight(.bold))
                    .foregroundColor(.white)
                Spacer()
            }
            HStack(alignment: .center) {
                Spacer()
                Text(title)
                    .font(.subheadline)
                    .foregroundColor(.white)
                Spacer()
            }
        }
        .padding()
        .background(.blue)
        .ignoresSafeArea(.container, edges: .top) // 适配顶部安全区
    }
}

使用示例

var body: some View {
    NavigationStack {
        NavigationBarItem(title: NSLocalizedString("title.settings", comment: ""))
        
        List {
            // 你的列表内容
            Text("通用设置")
            Text("账号管理")
            Text("关于我们")
        }
        .listStyle(.plain) // 移除List默认顶部间距
    }
    .navigationBarHidden(true) // 隐藏系统导航栏
}

额外调整建议 #

如果仍有细微间距，可以尝试：

• 给List添加.contentInsets(.init(top: 0, leading: 0, bottom: 0, trailing: 0))替代listStyle，更精准控制内边距
• 调整自定义导航栏的.padding()为.padding(.vertical)，避免横向多余间距影响布局

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