用SwiftUI只需几行代码就能创建一个出色的导航栏头部,就像这样。
import SwiftUINavigationHeader
struct DetailView: View {
var body: some View {
NavigationHeaderContainer(bottomFadeout: true) {
Image("roadster")
.resizable()
.scaledToFill()
} content: {
topView
.transformEffect(.init(translationX: 0, y: -100))
.padding(.bottom, -100)
Text(loremIpsum)
.font(.body)
.padding(32)
}
}
private var topView: some View {
Image("roadster")
.resizable()
.scaledToFill()
.clipShape(Circle())
.shadow(radius: 10)
.frame(width: 200, height: 200, alignment: .center)
}
}
在同一个NavigationView中的后续视图应该添加以下代码片段,以确保导航栏始终处于正确的状态。
.navigationBarState(.compact, displayMode: .automatic)