关闭 SwiftUI 中的选择器并将选择器选择重置为初始值

Question

我正在使用选择器弹出窗口在 SwiftUI 中进行查看。 选择价值并忽略视图时，一切正常。

但是我需要能够在不设置新选择的值的情况下关闭选择器，并将其 go 恢复为打开时的初始值。

你可以在这里看到代码：

import SwiftUI

struct ContentView: View {
  @State var showPicker = false
  @State var selectedPickerOption = 0
  let pickerOptions = ["Hello", "World", "Yes"]
  
  var body: some View {
    ZStack {
      VStack {
        Text("Selected Option: \(pickerOptions[selectedPickerOption])")
        Button(
          action: {
            showPicker = true
          },
          label: {
            Text("Open Picker")
              .padding()
          }
        )
      }
      
      if showPicker {
        PickerPopover(
          pickerOptions: pickerOptions,
          width: 300,
          height: 300,
          showPicker: $showPicker,
          selectedPickerOption: $selectedPickerOption,
          initialPickerOption: selectedPickerOption
        )
        .background(Color.red)
      }
    }
  }
}

struct PickerPopover: View {
  var pickerOptions: [String]
  var width: CGFloat
  var height: CGFloat
  @Binding var showPicker: Bool
  @Binding var selectedPickerOption: Int
  var initialPickerOption: Int // This one doesn't work yet
  
  func selectOption() {
    withAnimation {
      showPicker.toggle()
    }
  }
  
  func cancel() {
    // ######### THIS LINE HERE ISN'T WORKING ##############
    selectedPickerOption = initialPickerOption
    withAnimation {
      showPicker.toggle()
    }
  }
  
  var body: some View {
    VStack {
      Picker(
        selection: $selectedPickerOption,
        label: Text("")
      ) {
        ForEach(0 ..< pickerOptions.count) {
          Text(self.pickerOptions[$0])
        }
      }
      .pickerStyle(WheelPickerStyle())
      
      Button(action: cancel) {
        Text("Cancel")
      }
      
      Button(action: selectOption) {
        Text("Select")
      }
    }
    .transition(.move(edge: .bottom))
  }
}

我相信cancel() function 中的第一行应该可以解决问题 - 如果selectedPickerOption设置为 0（或 1 等），它将专门将选择器重置为该索引。

我一直无法动态设置它。 我尝试传入一个附加值（ intialPickerOption ），但重置selectedPickerOption = initialPickerOption似乎确实将其设置为当前实际选择的selectedPickerOption ，并且选择器的行为就像选择正确一样。

我可能在这里错过了什么？

Answer 1

当您修改selectedPickerOption时会出现问题，这将导致您的 ContentView 在选择器更改时重新加载。 因此，您会将所选值作为initialPickerOption传递。 selectedPickerOption将始终与您的初始值相同。

这是在您的 PickerView 中使用本地State的解决方案，然后在 Select 上同步绑定或不同步它。 我在这些部分注释代码

struct PickerPopover: View {
  var pickerOptions: [String]
  var width: CGFloat
  var height: CGFloat
  @Binding var showPicker: Bool
  @Binding var selectedPickerOption: Int
  @State var localState : Int = 0 //<< Here your local State
  
  func selectOption() {
    self.selectedPickerOption = localState //<< Sync the binding with the local State
    withAnimation {
      showPicker.toggle()
    }
  }
  
  func cancel() {
    //<< do nothing here
    withAnimation {
      showPicker.toggle()
    }
  }
  
  var body: some View {
    VStack {
      Picker(
        selection: $localState,
        label: Text("")
      ) {
        ForEach(0 ..< pickerOptions.count) {
          Text(self.pickerOptions[$0])
        }
      }
      .pickerStyle(WheelPickerStyle())
      
      Button(action: cancel) {
        Text("Cancel")
      }
      
      Button(action: selectOption) {
        Text("Select")
      }
    }
    .transition(.move(edge: .bottom))
    .onAppear {
        self.localState = selectedPickerOption // << set inital value here
    }
  }
}