SwiftUI 选择器将所选项目和选择视图的文本分开

Question

我有一个Picker嵌入在Forma 里面NavigationView。我希望在主要内容中为所选项目提供单独的View文本，并在选择器中选择项目时提供更详细的描述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())
        }
    }
}

目前的解决方案

这是主视图中的选择器：

这是选择视图：

问题是，使用此解决方案时，选择视图中显示的是"BB"而不是"bbbbb"。

发生这种情况是因为两个屏幕中的“BB”文本是由完全相同的Text视图生成的。

预期结果

主视图中的选择器：

在选择视图中：

SwiftUI 中是否可以为两个屏幕提供单独的文本（视图）？

Answer 1

没有选择器的可能解决方案

正如我在评论中提到的，目前还没有使用 SwiftUI Picker 进行本机实现的解决方案。相反，您可以使用 SwiftUI 元素（尤其是 NavigationLink）来完成此操作。这是示例代码：

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
                }
            }
        }
    }
}

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