SwiftUI NavigationView 在滚动时折叠

Question

当我滚动时，如何让 NavigationBar 从折叠large到inline？现在ScrollView正在滚动其NavigationBar标题下方的内容，但在后退按钮之前。

    var body: some View {
        NavigationView {
            ScrollView {
                VStack {
                    ForEach(0...5) { _ in
                        ExerciseView()
                    }
                }
                .padding()
            }
        }
        .navigationBarTitle("Testing", displayMode: .automatic)

Answer 1

首先要注意的是，navigationBarTitle应该是修饰符 on ScrollView，而不是NavigationView。

var body: some View {
    NavigationView {
        ScrollView {
            VStack {
                ForEach(0...5) { _ in
                    ExerciseView()
                }
            }
            .padding()
        }
        .navigationBarTitle("Testing", displayMode: .automatic)
    }
}

从文档中navigationBarTitle：

此修饰符仅在此视图位于 NavigationView 内部且可见时生效。

根据以下文档，要记住的另一件事是displayMode：

case automatic

继承上一个导航项的显示模式。

如果您使用.automatic，则是告诉NavigationView使用与前一个导航项相同的显示模式，这意味着如果您从带有displayModeof的视图导航.inline，那么您的新视图也将继承该显示模式。

但是，将navigationBarTitle修饰符移动到后ScrollView，您的问题仍然存在 - 滚动视图在导航栏标题和后退按钮文本下方滚动，就好像导航栏的背景丢失一样。

这个问题的答案解决了List在状态栏文本下方滚动的类似问题，所以我使用了他们的建议，将填充添加到ScrollView. 这种工作原理是滚动视图现在可以正确滚动到导航栏下方，但是当您滚动时导航栏仍然不会从.large到折叠.inline。

这对我来说真的只是一个错误。开始时不需要在滚动视图上设置填充。视图不知道它是否会嵌套在 a 中NavigationView，那么为什么它必须指定填充才能使导航栏正常工作？

在此期间，我只想建议设置displayMode到.inline。至少这样一切都会如您所愿。