如何在 SwiftUI Picker 中创建老虎机隐喻？

Question

是否可以使用 swiftUI 创建一个老虎机来显示两组值？

Answer 1

在 UIKit 中，UIPickerView 提供了在选择器视图中包含多个组件的选项。 SwiftUI 的 Picker 没有。但是，您可以在 HStack 中使用多个 Picker。在某些情况下，透视图可能看起来与具有多个组件的 UIPickerView 略有不同，但对我来说它看起来完全可以接受。

这是一个老虎机示例，有 4 个并排的选择器和一个按钮，点击时 "spins" 老虎机（请注意，我禁用了选择器上的用户交互，因此只能使用按钮):

enum Suit: String {
    case heart, club, spade, diamond

    var displayImage: Image {
        return Image(systemName: "suit.\(self.rawValue).fill")
    }
}

struct ContentView: View {
    @State private var suits: [Suit] = [.heart, .club, .spade, .diamond]
    @State private var selectedSuits: [Suit] = [.heart, .heart, .heart, .heart]

    var body: some View {
        VStack {
            HStack(spacing: 0) {
                ForEach(0..<self.selectedSuits.count, id: \.self) { index in
                    Picker("Suits", selection: self.$selectedSuits[index]) {
                        ForEach(self.suits, id: \.self) { suit in
                            suit.displayImage
                        }
                    }
                    .frame(minWidth: 0, maxWidth: .infinity)
                    .clipped()
                    .disabled(true)
                }
            }
            Button(action: self.spin) {
                Text("Spin")
            }
        }
    }

    private func spin() {
        self.selectedSuits = self.selectedSuits.map { _ in
            self.suits.randomElement()!
        }
    }
}

这只是一个例子，毫无疑问可以改进，但它是一个不错的起点。

请记住，此代码确实会在 Xcode Beta 5 中引发警告 -

'subscript(_:)' is deprecated: See Release Notes for migration path.

我还没有机会研究这个，但这个例子仍然有效，应该可以帮助您实现您想要实现的目标。

如何在 SwiftUI Picker 中创建老虎机隐喻？

How to create slot-machine metaphor in SwiftUI Picker?

swiftui