iOS SwiftUI：使用 ScrollView 和 ZStack 正确堆叠 NavigationView？

Question

所以我一直在玩 SwiftUI，但我似乎无法正确地将 NavigationView 与 ScrollView 和 ZStack 堆叠在一起。

我正在尝试使用.black 背景来实现视图。代码如下：

MainView.swift

var body: some View {
    NavigationView {
        ChildView()
    }
}

ChildView.swift

var body: some View {
    ZStack {
        Color.black.edgesIgnoringSafeArea(.all)
        ScrollView {
            ...
        }
    }
} 

上面的代码给了我一个黑色的背景，但破坏了导航栏的行为。

外观：

应该是什么样子：

所以滚动时导航似乎没有从scrollEdgeAppearance 转到standardAppearance。

有什么想法吗？

Answer 1

把ScrollView尽量往上放，否则头部动画不起作用。以下代码可以满足您的要求：

struct ChildView: View {
    var body: some View {
        ScrollView {
            VStack(spacing: 20) {
                ForEach(0..<40) { _ in
                    Text("Hello, World!")
                        .frame(maxWidth: .infinity)
                }
            }
            .background(Color.green.edgesIgnoringSafeArea(.all))
        }
        .navigationBarTitle("Discover")
    }
}

struct ContentView: View {
    var body: some View {
        NavigationView {
            ChildView()
        }
    }
}

要实现完全黑色的背景，即使您向上滚动底部，您也必须在UINavigationController 中摆弄。在那里，我还更改了导航栏的颜色以实现您的外观和感觉。请注意，这不会跟踪用户是否启用了暗模式。

extension UINavigationController {
    override open func viewDidLoad() {
        super.viewDidLoad()

        overrideUserInterfaceStyle = .dark

        let appearance = UINavigationBarAppearance()
        appearance.backgroundColor = UIColor.black
        appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
        appearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
        
        navigationBar.standardAppearance = appearance
        navigationBar.compactAppearance = appearance
        navigationBar.scrollEdgeAppearance = appearance
    }
}