ios - 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应该是ScrollView的修饰符，而不是NavigationView。

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

来自 navigationBarTitle 的文档:

This modifier only takes effect when this view is inside of and visible within a NavigationView.

根据 displayMode 的文档，要记住另一件事:

case automatic

Inherit the display mode from the previous navigation item.

如果您使用 .automatic，您是在告诉 NavigationView 使用与上一个导航项相同的显示模式，这意味着如果您从一个 View 导航.inline 的 displayMode，那么您的新 View 也将继承该显示模式。

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

this question 的答案通过在状态栏文本下方滚动的 List 解决了类似的问题，因此我采纳了他们向 ScrollView 添加填充的建议。这种工作方式是 ScrollView 现在可以在导航栏下方正确滚动，但是当您滚动时，导航栏仍然不会从 .large 折叠到 .inline。

这对我来说真的只是一个错误。一开始就不需要在 ScrollView 上设置填充。 View 不知道它是否要嵌套在 NavigationView 中，所以为什么它必须指定 padding 才能使导航栏正常工作？

与此同时，我建议将 displayMode 设置为 .inline。至少这样一切都会像您预期的那样运行。