在 SwiftUI 中关闭选择器并将选择器选择重置为初始值答案

【问题标题】：Dismiss picker in SwiftUI and reset picker selection to initial value在 SwiftUI 中关闭选择器并将选择器选择重置为初始值
【发布时间】：2020-12-09 11:24:47
【问题描述】：

我正在使用选择器弹出框在 SwiftUI 中创建视图。当挑选价值并驳回视图时，一切正常工作。

但我需要能够在不设置新选择的值的情况下关闭选择器，并让它回到打开时的初始值。

您可以在此处查看代码：


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() 函数中的第一行应该可以解决问题 - 如果 selectedPickerOption 设置为 0（或 1 等），则会将选择器专门重置为该索引。

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

我可能在这里遗漏了什么？

【问题讨论】：

标签： swift swiftui picker

【解决方案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
    }
  }
}

【讨论】：