要求#
在我的新應用程式 LinguaTale 中，我想要為一個列表視圖設置一個自定義標題，該列表視圖是 NavigationView 的子視圖。在這個標題中，我想要在屏幕頂部設置一個圖像，忽略安全區域。最終效果如下所示。
實現#
- 使用
.toolbarBackground(.hidden, for: .navigationBar)隱藏 navigationBar 的默認背景。 - 使用
overlay修飾符設置 HeaderView。 - 使用
.background修飾符將圖像背景設置為 HeaderView。 - 您可以在圖像背景修飾符之前使用
.background(.ultraThinMaterial.opacity(0.8))使圖像稍微模糊，這樣圖像上的文本看起來更清晰。 - 在背景圖像上使用
.edgesIgnoringSafeArea(.top)，使其可以覆蓋到屏幕頂部。 - 在 ScrollView 中設置
HeaderView().opacity(0)，並確保它是 ScrollView 中的第一個視圖。這個不可見的視圖用於佔據與 HeaderView 在 overlay 中相同的空間，這樣 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("這是一個演示標題視圖")
}
}