如何从 SwiftUI 创建分段控件并读取值？

Posted 2023-02-24

【中文标题】如何从 SwiftUI 创建分段控件并读取值？

【英文标题】：How to create a segmented control and read values from SwiftUI?

【发布时间】：2020-08-09 05:43:43

【问题描述】：

struct ContentView: View 
    @State private var favoriteColor = 0

    var body: some View 
        VStack 
            Picker(selection: $favoriteColor, label: Text("What is your favorite color?")) 
                Text("Red").tag(0)
                Text("Green").tag(1)
                Text("Blue").tag(2)
            .pickerStyle(SegmentedPickerStyle())

            Text("Value: \(favoriteColor)")
        
    

【问题讨论】：

哪里出了问题？

【参考方案1】：

你已经快到了！

首先，创建一个名为favoriteColor 的变量。您打算使用此变量从 Picker 中获取值，不是吗？

然后，将该变量传递给 Picker。不仅作为变量，而且作为绑定，前面有$ 符号。这将确保您的变量始终与 Picker 保持同步。简而言之，Binding 的作用是实际上只有一个变量，由 View 和 Picker 共享。如果你想了解更多，我相信网上有上百个这方面的教程，所以我在这里再解释一遍也没有意义！

那么会发生什么，选择器会在进行选择时更新您的变量。 但是对于哪个选项，它会给你的变量带来什么价值呢？

嗯，这就是您在.tag(...)s 中指定的值。因此，当用户选择“红色”时，喜爱颜色的值为 0，“绿色”为 1，“蓝色”为 2。

在选择更改时更新UI会如何？好吧，SwiftUI 会自动管理这个——这是 SwiftUI 最好的东西之一！

但还有一件事。当您像正在做的那样使用Text 中的值时，您将在运行时看到类似“Value: 1”的内容。如果我们能显示颜色的名称就更好了，不是吗？

有很多方法可以做到这一点，但一种是将Text("Value: \(favoriteColor)") 替换为：

Text("Favorite Color: \(["Red", "Green, "Blue"][favoriteColor])")

它的作用是创建一个数组并从中取出与所选颜色的索引相对应的值。所以当 favoriteColor 为 0 时，取数组的第一个元素，即“红色”。

希望对你有帮助！！