SwiftUI：滚动时将Segmented Picker固定到导航栏的实现方法

这个需求可以通过监听滚动偏移量，结合双Picker切换显示的方式实现，不需要用到ScrollViewReader，核心思路是：

1. 监听ScrollView的滚动偏移，判断原Picker是否滚动到导航栏下方位置
2. 在页面顶部（导航栏下方）放置一个完全相同的Picker，根据滚动状态切换显示/隐藏，模拟固定效果

完整实现代码 #

import SwiftUI

struct StickySegmentedPickerView: View {
    let segments = ["推荐", "热门", "最新", "收藏"]
    @State private var selectedSegment = 0
    @State private var scrollOffset: CGFloat = 0
    @State private var pickerTopOffset: CGFloat = 0
    
    var body: some View {
        NavigationStack {
            ScrollView {
                VStack(spacing: 20) {
                    // 顶部占位内容，让Picker初始处于页面中间
                    ForEach(0..<3) { _ in
                        RoundedRectangle(cornerRadius: 12)
                            .fill(Color.gray.opacity(0.2))
                            .frame(height: 150)
                            .padding(.horizontal)
                    }
                    
                    // 随滚动移动的原Picker
                    Picker("", selection: $selectedSegment) {
                        ForEach(0..<segments.count) { index in
                            Text(segments[index])
                                .tag(index)
                        }
                    }
                    .pickerStyle(.segmented)
                    .padding(.horizontal)
                    // 记录Picker在ScrollView中的初始顶部位置
                    .background(
                        GeometryReader { proxy in
                            Color.clear
                                .onAppear {
                                    pickerTopOffset = proxy.frame(in: .named("scrollView")).minY
                                }
                        }
                    )
                    
                    // 下方滚动内容
                    ForEach(0..<20) { index in
                        RoundedRectangle(cornerRadius: 12)
                            .fill(Color.blue.opacity(0.1))
                            .frame(height: 100)
                            .padding(.horizontal)
                            .overlay(Text("内容 \(index + 1)").foregroundColor(.blue))
                    }
                }
                // 监听ScrollView的滚动偏移量
                .background(
                    GeometryReader { proxy in
                        Color.clear
                            .onChange(of: proxy.frame(in: .global).minY) { newValue in
                                scrollOffset = -newValue
                            }
                    }
                )
            }
            .coordinateSpace(name: "scrollView")
            .navigationTitle("粘性Picker示例")
            // 顶部固定的Picker，通过overlay添加
            .overlay(
                Picker("", selection: $selectedSegment) {
                    ForEach(0..<segments.count) { index in
                        Text(segments[index])
                            .tag(index)
                    }
                }
                .pickerStyle(.segmented)
                .padding(.horizontal)
                .padding(.top, 8)
                .background(Color(.systemBackground))
                .shadow(radius: 2)
                // 滚动偏移超过Picker初始位置时显示，否则隐藏
                .opacity(scrollOffset >= pickerTopOffset ? 1 : 0)
                .offset(y: scrollOffset >= pickerTopOffset ? 0 : -100)
                , alignment: .top
            )
        }
    }
}

#Preview {
    StickySegmentedPickerView()
}

关键细节说明 #

• 滚动偏移监听：通过GeometryReader获取ScrollView的全局frame变化，计算出实际滚动距离scrollOffset。
• Picker位置记录：给原Picker添加背景GeometryReader，获取它在ScrollView坐标系中的初始顶部位置pickerTopOffset。
• 双Picker同步：两个Picker绑定同一个selectedSegment状态，保证选中内容完全同步。
• 平滑过渡：用opacity和offset属性实现显示/隐藏的平滑动画，避免切换时出现突兀感。
• 视觉优化：顶部固定的Picker添加背景色和阴影，防止和下方滚动内容重叠时出现视觉混淆。

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