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

要求#

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

实现#

使用.toolbarBackground(.hidden, for: .navigationBar)隐藏 navigationBar 的默认背景。
使用overlay修饰符设置 HeaderView。
使用.background修饰符将图像背景设置为 HeaderView。
您可以在图像背景修饰符之前使用.background(.ultraThinMaterial.opacity(0.8))使图像稍微模糊，以使图像上的文本看起来更清晰。
在背景图像上使用.edgesIgnoringSafeArea(.top)，使其覆盖到屏幕顶部。
在 ScrollView 中设置HeaderView().opacity(0)，并确保它是 ScrollView 中的第一个视图。这个不可见的视图用于占据与覆盖中的 HeaderView 相同的空间，这样 ScrollView 中的真正第一个元素就不会被 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("这是一个演示标题视图")
    }
}