SwiftUI中toolbar放置元素时如何移除导航标题预留空白

问题现象 #

在NavigationView中添加toolbar元素但未设置导航标题时，页面内容上方会默认预留一块导航标题的展示空白，复现代码如下：

NavigationView {
    VStack(spacing: 0) {
        List {
            ForEach((1...50), id: \.self) {
                Text("\($0)…")
            }
        }
    }.toolbar {
        Text("Hello World!")
    }
} 

解决方法 #

这块空白是系统导航栏默认的大标题占位导致的，根据项目支持的最低系统版本选择对应配置即可：

iOS 16+ 原生实现 #

添加两个导航栏修饰符，先切换为紧凑内联模式，再隐藏导航栏背景占位即可：

// 仅支持iOS16+时可将NavigationView替换为NavigationStack，修饰符效果一致
NavigationView {
    VStack(spacing: 0) {
        List {
            ForEach((1...50), id: \.self) {
                Text("\($0)…")
            }
        }
    }
    .toolbar {
        Text("Hello World!")
    }
    // 移除导航大标题预留空白
    .navigationBarTitleDisplayMode(.inline)
    .toolbarBackground(.hidden, for: .navigationBar)
}

• .navigationBarTitleDisplayMode(.inline)：将导航栏从默认的大标题高度模式切换为紧凑模式，消除大标题对应的大块高度占位
• .toolbarBackground(.hidden, for: .navigationBar)：隐藏导航栏默认的背景材质，去掉导航栏和页面内容之间的默认边距，让内容可以直接贴合toolbar元素底部

iOS 15及更早版本兼容 #

如果需要覆盖低版本系统，可以通过UINavigationBarAppearance将导航栏设为透明来消除占位：

NavigationView {
    VStack(spacing: 0) {
        List {
            ForEach((1...50), id: \.self) {
                Text("\($0)…")
            }
        }
    }
    .toolbar {
        Text("Hello World!")
    }
    .navigationBarTitleDisplayMode(.inline)
    .onAppear {
        let appearance = UINavigationBarAppearance()
        appearance.configureWithTransparentBackground()
        UINavigationBar.appearance().standardAppearance = appearance
        UINavigationBar.appearance().scrollEdgeAppearance = appearance
    }
}

注意：以上修改只会移除为导航标题预留的多余空白，toolbar元素本身需要的展示高度会被正常保留，不会造成内容遮挡。

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