Can wheel pickers be collapsed?

Question

Black Labs OP

Created Jun ’20

Replies 3

Boosts 0

Views 1.6k

Participants 4

Howdy, in SwiftUI, can wheel pickers in a form be collapsed after a selection is made?

Boost

Answer 1

FarouKz OP

Jun ’20

I am facing the same problem.

0

Answer 2

OOPer OP

Jun ’20

As far as I read the docs, there's no feature of collapsing in the Picker itself.

You can write your own collapsable picker, something like this:

Code Block struct CollapsableWheelPicker<Label, Item, Content>: View
where Content: View, Item: Hashable, Label: View
{
    @Binding var showsPicker: Bool
    var picker: Picker<Label, Item, Content>
    init<S: StringProtocol>(_ title: S,
                            showsPicker: Binding<Bool>,
                            selection: Binding<Item>,
                            @ViewBuilder content: ()->Content)
    where Label == Text
    {
        self._showsPicker = showsPicker
        self.picker = Picker(title, selection: selection, content: content)
    }
    var body: some View {
        Group {
            if showsPicker {
                VStack {
                    HStack {
                        Spacer()
                        Button("dismiss") {
                            showsPicker = false
                        }
                    }
                    picker
                }
                .pickerStyle(WheelPickerStyle())
            }
        }
    }
}

And use it as:

Code Block enum Flavor: String, CaseIterable, Identifiable {
    case chocolate
    case vanilla
    case strawberry
    var id: String { self.rawValue }
}
struct ContentView: View {
    @State private var selectedFlavor = Flavor.chocolate
    @State private var showsFlavorPicker = false
    var body: some View {
        Form {
            CollapsableWheelPicker(
                "",
                showsPicker: $showsFlavorPicker,
                selection: $selectedFlavor
            ) {
                ForEach(Flavor.allCases) { flavor in
                    Text(flavor.rawValue.capitalized)
                }
            }
            Text("Selected flavor: \(selectedFlavor.rawValue)")
                .onTapGesture {
                    showsFlavorPicker.toggle()
                }
        }
        .animation(.easeInOut)
    }
}

3

Answer 3

HeGer OP

Jun ’20

I did this collapsable picker with two values a while ago.
[https://github.com/AlmightyBeaver/MultiPicker)

1