CODEWITHSUNDEEP
swiftui
Filip Lederleitner
Filip Lederleitner

Reputation: 35

Implementing Swift UI Picker

What is the correct way to implement a Picker component with specific logic within a Section element?

I would like to have each type displayed in a separate row.

var types = ["Books", "Films", "Music"]

var body: some View {
    Form {
        Section(header: Text("Type")) {
            TextField("Type", text: $newCategoryType)
            // Picker
        }          
    } 
}

Upvotes: 0

Views: 106

Answers (1)

gtxtreme
gtxtreme

Reputation: 3616

First you must have a @State property that can be updated based on what selection the user makes, say in this case we have this

@State private var selectedType = "Books"

Then you will implement a Picker SwiftUI struct as follows

Picker("Please choose a type", selection: $selectedType) {
                ForEach(types, id: \.self) {
                    Text($0)
                }
            }

Note that the \.self is really important for ForEach to distinguish between each element inside the list, without which the Picker won't perform the selection action correctly.

The above is enough for doing the job of displaying each option as a row since that is the default behaviour of ForEach Additionally if you want to customise the look and feel of the picker you would like to see .pickerStyle() view modifier, for which the docs and examples are mentioned

Also Tip: Because pickers in forms have this navigation behavior, it’s important you present them in a NavigationView on iOS otherwise you’ll find that tapping them doesn’t work. This might be one you create directly around the form, or you could present the form from another view that itself was wrapped in a NavigationView.

Upvotes: 2

Related Questions