如何让ScrollView内的VStack向上延伸至导航栏下方且保持内容位置不变

当前实现代码 #

struct ContentView: View {
    var body: some View {
        NavigationView {
            ScrollView {
                VStack() {
                    Text("Foo")
                }
                .frame(maxWidth: .infinity, idealHeight: 200)
                .background(Color(uiColor: .systemBackground))
            }
            .background(Color(uiColor: .secondarySystemBackground))
            
            .navigationTitle("Title")
        }
    }
}

当前渲染效果 #

需求说明 #

• 白色背景延伸至屏幕顶部，同时保留内边距，VStack内容显示在标题下方（而非标题区域之下）
• 滚动时，VStack内容跟随标题从大样式切换为行内样式

实现代码 #

struct ContentView: View {
    @State private var titleDisplayMode: NavigationBarItem.TitleDisplayMode = .large
    @Namespace private var scrollNamespace
    
    var body: some View {
        NavigationView {
            ScrollViewReader { proxy in
                ScrollView {
                    VStack(spacing: 0) {
                        Color.clear
                            .frame(height: 0)
                            .id("scrollTop")
                        
                        VStack {
                            Text("Foo")
                        }
                        .frame(maxWidth: .infinity, idealHeight: 200)
                        .background(Color(uiColor: .systemBackground))
                        .padding(.top)
                    }
                }
                .background(Color(uiColor: .systemBackground))
                .onAppear {
                    proxy.scrollTo("scrollTop", anchor: .top)
                }
                .onChange(of: proxy.contentOffset.y) { offset in
                    titleDisplayMode = offset > 40 ? .inline : .large
                }
                .navigationTitle("Title")
                .navigationBarTitleDisplayMode(titleDisplayMode)
            }
        }
    }
}

关键实现细节 #

• 把ScrollView的背景直接设置为.systemBackground，让白色背景自然延伸到屏幕顶部
• 通过ScrollViewReader监听滚动偏移量，动态切换导航标题的显示模式（大标题/行内）
• 给内容VStack添加.padding(.top)保留顶部内边距，同时用占位的透明视图确保初始内容位置在大标题下方
• 视图出现时调用scrollTo将滚动位置定位到顶部，保证初始显示符合预期

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