SwiftUI：如何使pickerStyle(.navigationLink)自动滚动至选中值？

原生的.navigationLink样式Picker确实不会自动滚动到当前选中的选项，要实现和.menu、.wheel样式一样的自动滚动效果，你可以通过自定义导航链接+ScrollViewReader来手动控制滚动行为，具体实现如下：

完整代码示例 #

import SwiftUI

struct ContentView: View {
    @State private var selectedValue: Int = 56
    let values = 0..<101
    
    var body: some View {
        NavigationStack{
            Form {
                // 自定义导航链接替代原生Picker的navigationLink样式
                NavigationLink {
                    ValueSelectionView(selectedValue: $selectedValue, values: values)
                } label: {
                    HStack {
                        Text("Pick a value")
                        Spacer()
                        Text(selectedValue, format: .number)
                            .foregroundColor(.secondary)
                    }
                }
            }
        }
    }
}

// 自定义选择页面，实现自动滚动逻辑
struct ValueSelectionView: View {
    @Binding var selectedValue: Int
    let values: Range<Int>
    @Environment(\.dismiss) private var dismiss
    
    var body: some View {
        NavigationStack {
            List {
                ScrollViewReader { proxy in
                    ForEach(values, id: \.self) { value in
                        Button(action: {
                            selectedValue = value
                            dismiss()
                        }) {
                            HStack {
                                Text(value, format: .number)
                                Spacer()
                                if value == selectedValue {
                                    Image(systemName: "checkmark")
                                        .foregroundColor(.accentColor)
                                }
                            }
                        }
                    }
                    .onAppear {
                        // 页面加载时自动滚动到选中值的位置，anchor可设置为top/bottom/center
                        proxy.scrollTo(selectedValue, anchor: .center)
                    }
                }
            }
            .navigationTitle("Pick a value")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

关键说明 #

• 自定义NavigationLink的label部分还原了原生Picker的显示样式，同时保留点击跳转的交互逻辑
• ScrollViewReader的scrollTo方法通过选项的ID（此处直接使用数值本身）定位到对应位置，anchor参数可控制选中项在视图中的显示位置
• 选择页面的按钮点击后更新绑定值并关闭页面，逻辑和原生Picker完全一致

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