SwiftUI：如何实现滚动时NavigationBar从大标题折叠为行内样式？

嘿，我来帮你搞定这个问题！你遇到的两个小麻烦——滚动时大标题不会折叠、内容跑到返回按钮前面，根源其实是导航栏修饰符的位置放错啦。

问题分析 #

你原本把.navigationBarTitle加在了NavigationView本身上面，这就导致SwiftUI没法把滚动视图的行为和导航栏的样式变化关联起来，同时也没正确处理安全区域，才会出现内容遮挡返回按钮的情况。

解决方案：调整修饰符位置 #

只需要把导航栏标题的修饰符移到ScrollView后面，让它和滚动视图绑定，就能同时解决两个问题：

var body: some View {
    NavigationView {
        ScrollView {
            VStack {
                ForEach(0...5) { _ in
                    ExerciseView()
                }
            }
            .padding()
        }
        // 把导航栏标题修饰符移到这里，和ScrollView绑定
        .navigationBarTitle("Testing", displayMode: .automatic)
    }
}

为什么这么做就有效？ #

• 大标题折叠功能：当.navigationBarTitle绑定到ScrollView时，SwiftUI会自动监听滚动行为，滚动时大标题会平滑折叠成行内样式，完全符合你想要的效果。
• 内容不遮挡返回按钮：绑定后SwiftUI会自动处理安全区域的边距，你的ScrollView内容会乖乖待在导航栏下方的安全区域里，不会再跑到返回按钮前面啦。

如果之后你需要自定义导航栏的其他样式（比如添加右侧按钮），也记得把对应的修饰符（比如.navigationBarItems）加到ScrollView或者它的子视图上，而不是NavigationView本身哦。

内容的提问来源于stack exchange，提问作者jjatie