SwiftUI 如何通过代码滚动到顶部并显示大尺寸导航栏标题

SwiftUI的大尺寸导航栏标题触发条件是ScrollView的内容偏移量contentOffset到达(0, 0)位置。而原生scrollTo方法默认只会将目标视图滚动到可视范围内，你当前绑定id的黄色矩形是ScrollView的第一个业务子元素，滚动到它的可视范围就会停止，刚好差了触发大标题需要的偏移量阈值。

在ScrollView内容的最顶端插入一个高度为0的占位视图作为滚动锚点，滚动时指定锚点对齐顶部即可触发大标题显示，修改后的代码如下：

import SwiftUI

struct ContentView: View {
  var body: some View {
    NavigationView {
      ScrollViewReader { proxy in
        ScrollView {
          // 新增顶部占位锚点
          Color.clear
            .frame(height: 0)
            .id("topAnchor")
          Rectangle()
            .fill(.yellow)
            .aspectRatio(contentMode: .fit)
            .id("scrollID")
          Rectangle()
            .fill(.blue)
            .aspectRatio(contentMode: .fit)
          Rectangle()
            .fill(.green)
            .aspectRatio(contentMode: .fit)
          Rectangle()
            .fill(.red)
            .aspectRatio(contentMode: .fit)
          Button("Scroll to top") {
            withAnimation {
              // 滚动到顶部锚点，指定对齐顶部
              proxy.scrollTo("topAnchor", anchor: .top)
            }
          }
        }
        .navigationTitle("Navigation")
        // 显式指定导航栏标题显示模式为大尺寸，避免自动模式异常
        .navigationBarTitleDisplayMode(.large)
      }
    }
  }
}

如果你的项目中需要处理带顶部自定义视图的场景，只需要调整锚点的位置即可，核心逻辑是保证滚动到锚点时ScrollView的contentOffset.y等于0，就能触发系统的大尺寸导航栏标题展示逻辑。

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