SwiftUINavigationHeader

用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)