iOS16 SwiftUI导航栏顶部留白：图片顶置且不隐藏状态栏

在iOS16中使用NavigationStack的toolbar添加图片时，状态栏区域会出现留白，要让图片从屏幕顶部开始显示且保留状态栏，可通过以下两种方法解决：

方法一：使用SwiftUI原生.toolbarBackground设置导航栏背景 #

直接将图片设为导航栏的背景，并让图片忽略顶部安全区，即可让图片延伸至状态栏下方：

NavigationStack {
    List {
        Text("Hello World")
        Text("Hello World")
        Text("Hello World")
    }
    .navigationBarBackButtonHidden(true)
    .navigationBarTitleDisplayMode(.inline)
    // 设置导航栏背景为目标图片
    .toolbarBackground(
        Image("header_top")
            .resizable()
            .scaledToFill()
            .frame(height: 112)
            .edgesIgnoringSafeArea(.top),
        for: .navigationBar
    )
    // 确保导航栏背景可见
    .toolbarBackground(.visible, for: .navigationBar)
}

方法二：通过UIKit的UINavigationBarAppearance配置 #

自定义导航栏外观，设置背景图片并应用到全局，适合需要统一导航栏样式的场景：

struct ContentView: View {
    init() {
        let appearance = UINavigationBarAppearance()
        // 设置导航栏背景图片
        appearance.backgroundImage = UIImage(named: "header_top")
        appearance.backgroundImageContentMode = .scaleToFill
        // 移除导航栏阴影
        appearance.shadowImage = UIImage()
        // 若不需要显示导航栏标题，可将文字设为透明
        appearance.titleTextAttributes = [.foregroundColor: UIColor.clear]
        
        // 将配置应用到导航栏的所有状态
        UINavigationBar.appearance().standardAppearance = appearance
        UINavigationBar.appearance().scrollEdgeAppearance = appearance
    }
    
    var body: some View {
        NavigationStack {
            List {
                Text("Hello World")
                Text("Hello World")
                Text("Hello World")
            }
            .navigationBarBackButtonHidden(true)
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

注意事项 #

• 图片尺寸需适配不同屏幕，使用.scaledToFill会填充导航栏区域（可能裁剪图片），若要完整显示图片可替换为.scaledToFit。
• 若需保留导航栏标题，可调整titleTextAttributes的颜色为可见色，并确保标题位置不被图片遮挡。

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