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
    }
}