表单中的 SwiftUI Picker 不显示所选行

Posted 2023-02-24

【中文标题】表单中的 SwiftUI Picker 不显示所选行

【英文标题】：SwiftUI Picker in a Form doesn't show the selected row

【发布时间】：2019-10-16 05:17:31

【问题描述】：

我正在尝试使用一个选择器来显示当前选择了哪个选项。

尝试以下代码，它正确选择了正确的选项，但选择器不显示选择了哪个选项：

import SwiftUI

struct ContentView: View 
@State var selectedIndex: Int = 0

let strings: [String] = 
    var strings: [String] = []
    for i in 0..<10 
        strings.append("\(i)")
    
    return strings
()

var body: some View 
    NavigationView 
        VStack 
            Form 
                Picker(selection: $selectedIndex,
                       label: Text("Selected string: \(strings[selectedIndex])")) 
                    ForEach(0..<strings.count) 
                        Text(self.strings[$0]).tag($0)
                    
                
            
        
        .navigationBarTitle("Form Picker",
                            displayMode: NavigationBarItem.TitleDisplayMode.inline)
    




struct ContentView_Previews: PreviewProvider 
    static var previews: some View 
        ContentView()
    

有人知道可能是什么问题吗？这是使用 Xcode 11.1 和 ios 13.1 观察到的

【问题讨论】：

从 Xcode 13 和 iOS15 开始，选择器似乎显示选择了哪个选项。

【参考方案1】：

我创建了一个简单的选择器，我称之为“ListPicker”，它应该符合要求。我已经写了它，所以它在表单中运行良好；如果您在表单之外需要它，您将不得不修改它。如果您看到任何改进代码的方法，请添加评论；这仍然是我们所有人的学习经历。

// MARK: - LIST PICKER (PUBLIC)

struct ListPicker<Content: View>: View 
    @Binding var selectedItem: Int
    var label: () -> Content
    var data: [Any]

    var selectedLabel: String 
        selectedItem >= 0 ? "\(data[selectedItem])" : ""
    

    var body: some View 
        NavigationLink(destination: ListPickerContent(selectedItem: self.$selectedItem, data: self.data)) 
            ListPickerLabel(label: self.label, value: "\(self.selectedLabel)")
        
    


// MARK: - INTERNAL

private struct ListPickerLabel<Content: View>: View 
    let label: () -> Content
    let value: String

    var body: some View 
        HStack(alignment: .center) 
            self.label()
            Spacer()
            Text(value)
                .padding(.leading, 8)
        
    


private struct ListPickerContentItem: View 
    let label: String
    let index: Int
    let isSelected: Bool
    var body: some View 
        HStack 
            Text(label)
            Spacer()
            if isSelected 
                Image(systemName: "checkmark")
                    .foregroundColor(.accentColor)
            
        .background(Color.white) // so the entire row is selectable
    


private struct ListPickerContent: View 
    @Environment(\.presentationMode) var presentationMode
    @Binding var selectedItem: Int
    var data: [Any]
    var body: some View 
        List 
            ForEach(0..<data.count)  index in
                ListPickerContentItem(label: "\(self.data[index])", index: index, isSelected: index == self.selectedItem).onTapGesture 
                    self.selectedItem = index
                    self.presentationMode.wrappedValue.dismiss()
                
            
        
    

那么你可以这样使用它：

@State var selectedCar: Int = 0
let cars = ["Jaguar", "Audi", "BMW", "Land Rover"]

Form 
    ListPicker(
        selectedItem: self.$selectedCar, 
        label: 
            Text("Cars")
        , 
        data: self.cars
    )