SwiftUI WheelPickerStyle滚动重置问题及Picker专属解决方案咨询

问题根源 #

你遇到的这个现象，本质是SwiftUI视图重渲染时的实例复用逻辑导致的：

• WheelPickerStyle的Picker内部会维护一个临时滚动状态（也就是用户滚动但未确认选定新值时的中间值），这个状态并没有绑定到你的selectedNumber，而是存储在Picker的视图实例内部。
• 当父视图因为isOn这类无关状态变化而重渲染时，原来的Picker实例会被销毁，新创建的Picker实例会直接从绑定的selectedNumber读取初始值，就表现为“重置”了滚动状态。
• 虽然Picker本身不依赖isOn，但它作为父视图的子视图，父视图重渲染时会重新创建所有未被标记为“可复用”的子视图实例。

仅修改Picker的解决办法 #

这里提供两种无需重构整个视图结构、仅针对Picker调整的方案：

方案1：用.id()固定Picker的身份

给Picker添加一个固定的唯一ID，让SwiftUI认为它是同一个视图实例，即使父视图重渲染也不会重建Picker，从而保留内部的临时滚动状态：

Picker("Select a number", selection: $selectedNumber) {
    ForEach(1...10, id: \.self) {
        Text("\($0)")
    }
}
.pickerStyle(.wheel)
.id("unique-number-picker") // 固定ID，稳定视图身份

只要这个ID不变，SwiftUI就会复用原来的Picker实例，内部的临时滚动状态就不会丢失。

方案2：将Picker封装为独立子视图

把Picker抽成一个只依赖selectedNumber的子视图，这样父视图的其他状态变化不会触发子视图的重渲染：

// 封装独立的Picker子视图
struct FixedWheelPicker: View {
    @Binding var selection: Int
    let options: [Int]
    
    var body: some View {
        Picker("", selection: $selection) {
            ForEach(options, id: \.self) {
                Text("\($0)")
            }
        }
        .pickerStyle(.wheel)
    }
}

// 父视图中使用
struct ContentView: View {
    @State private var selectedNumber = 1
    @State private var isOn = false
    
    var body: some View {
        VStack {
            FixedWheelPicker(selection: $selectedNumber, options: Array(1...10))
            
            Button("Toggle") {
                isOn.toggle()
            }
            
            Text("\(isOn)")
        }
    }
}

子视图的依赖只有selection，父视图的isOn变化不会影响它，自然不会重置Picker的滚动状态。

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