iOS SwiftUI: правильно ли составлять NavigationView с помощью ScrollView и ZStack?

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

Приведенный выше код дает мне черный фон, но нарушает поведение панели навигации.

Как это выглядит:

Как это должно выглядеть:

Похоже, что при прокрутке навигация не go из 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
    }
}