SwiftUI 选择器将所选项目和选择视图的文本分开 [英] SwiftUI picker separate texts for selected item and selection view

问题描述

我在 NavigationView 内的 Form 中嵌入了一个 Picker.我想在主 View 中为所选项目添加一个单独文本，并在选择器 View 中选择项目时提供更详细的描述.

I have a Picker embedded in a Form inside a NavigationView. I'd like to have a separate text for the chosen item in the main View and a more detailed descriptions when choosing items in the picker View.

这是我目前尝试过的:

struct Item {
    let abbr: String
    let desc: String
}

struct ContentView: View {
    @State private var selectedIndex = 0
    let items: [Item] = [
        Item(abbr: "AA", desc: "aaaaa"),
        Item(abbr: "BB", desc: "bbbbb"),
        Item(abbr: "CC", desc: "ccccc"),
    ]

    var body: some View {
        NavigationView {
            Form {
                picker
            }
        }
    }

    var picker: some View {
        Picker(selection: $selectedIndex, label: Text("Chosen item")) {
            ForEach(0..<items.count) { index in
                Group {
                    if self.selectedIndex == index {
                        Text(self.items[index].abbr)
                    } else {
                        Text(self.items[index].desc)
                    }
                }
                .tag(index)
            }
            .id(UUID())
        }
    }
}

当前的解决方案

这是主视图中的选择器:

This is the picker in the main view:

这是选择视图:

问题在于，使用此解决方案时，选择视图中有BB"，而不是bbbbb".

The problem is that with this solution in the selection view there is "BB" instead of "bbbbb".

发生这种情况是因为BB"两个屏幕中的文本都是由相同的 Text 视图生成的.

This occurs because the "BB" text in both screens is produced by the very same Text view.

预期结果

主视图中的选择器:

在选择视图中:

在 SwiftUI 中是否可以为两个屏幕提供单独的文本(视图)?

Is it possible in SwiftUI to have separate texts (views) for both screens?

推荐答案

没有 Picker 的可能解决方案

正如我在comment，目前还没有针对 SwiftUI Picker 的本机实现的解决方案.相反，您可以使用 SwiftUI Elements，尤其是使用 NavigationLink.这是一个示例代码:

Possible solution without a Picker

As mention in my comment, there is not yet a solution for a native implementation with the SwiftUI Picker. Instead, you can do it with SwiftUI Elements especially with a NavigationLink. Here is a sample code:

struct Item {
    let abbr: String
    let desc: String
}

struct ContentView: View {
    
    @State private var selectedIndex = 0
    let items: [Item] = [
        Item(abbr: "AA", desc: "aaaaa"),
        Item(abbr: "BB", desc: "bbbbb"),
        Item(abbr: "CC", desc: "ccccc"),
    ]
    
    var body: some View {
        NavigationView {
            Form {
                NavigationLink(destination: (
                    DetailSelectionView(items: items, selectedItem: $selectedIndex)
                    ), label: {
                        HStack {
                            Text("Chosen item")
                            Spacer()
                            Text(self.items[selectedIndex].abbr).foregroundColor(Color.gray)
                        }
                })
            }
        }
    }
}

struct DetailSelectionView: View {
    var items: [Item]
    @Binding var selectedItem: Int
    
    var body: some View {
        Form {
            ForEach(0..<items.count) { index in
                HStack {
                    Text(self.items[index].desc)
                    Spacer()
                    if self.selectedItem == index {
                        Image(systemName: "checkmark").foregroundColor(Color.blue)
                    }
                }
                .onTapGesture {
                    self.selectedItem = index
                }
            }
        }
    }
}

如果有任何改进，请随时编辑代码片段.

If there are any improvements feel free to edit the code snippet.

这篇关于SwiftUI 选择器将所选项目和选择视图的文本分开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！