如何在 iOS 16 中使用 SwiftUI 将图像设置为 NavigationBar 的背景

需求#

在我的新应用 LinguaTale 中，我想为列表视图创建一个自定义标题，该视图是 NavigationView 的子视图。在这个标题中，我希望在屏幕顶部设置一张图片，忽略安全区域。最终效果如下面的截图所示。

实现#

使用 .toolbarBackground(.hidden, for: .navigationBar) 隐藏 navigationBar 的默认背景。
使用 overlay 修饰符设置 HeaderView。
使用 .background 修饰符为 HeaderView 设置图片背景。
在图片背景修饰符之前，可以使用 .background(.ultraThinMaterial.opacity(0.8)) 使图片稍微模糊，以便文本在图片上看起来更清晰。
在背景图片上设置 .edgesIgnoringSafeArea(.top)，以便它可以扩展到屏幕顶部。
在 ScrollView 中设置 HeaderView().opacity(0)，并确保它是 ScrollView 中的第一个视图。这个不可见的视图用于占据与 overlay 中的 HeaderView 相同的空间，然后 ScrollView 中的真实第一个元素就不会被 overlay 中的 HeaderView 覆盖。

import SwiftUI

struct DemoView: View {
    var body: some View {
        VStack {
            ScrollView {
                HeaderView()
                    .opacity(0) // 这个不可见的视图用于占据空间
            }
        }
        .toolbarBackground(.hidden, for: .navigationBar)
        .overlay(alignment: .top) {
            HeaderView()
                .background(.ultraThinMaterial.opacity(0.8))
                .background {
                    Image("TheBackgroundImage")
                        .resizable(resizingMode: .stretch)
                        .edgesIgnoringSafeArea(.top)
                }
        }
    }
}

struct HeaderView: View {
    var body: some View {
        Text("这是一个演示标题视图")
    }
}