swiftui multiple pickers in a form

ByTobias Stephan

swiftui multiple pickers in a form

This is the first time I have used the Picker under SwiftUI. Simple insight – the OS decides which appearance your picker takes on. Of course you can decide that yourself. Now I had the strange behaviour that when I selected an entry of 5 pickers, all pickers were run through. My pickers are in a form. In this form a NavigationView. Solution of the problem was the Section. This example is not suitable for copy-paste because you are missing the data source. This is for illustration purposes only.

import SwiftUI

struct ContentView: View {
    @State public var selectedCrossSection = 0
    @State private var selectedColor = 0
    @State private var selectedLength = 0
    @State private var selectedEyelet1 = 0
    @State private var selectedEyelet2 = 0

    var selCrossSectionStr = ""

    @ObservedObject var oListDatasource = ListDataSource()
    var body: some View {

        NavigationView{

            VStack (spacing: 10) {
                Form {
                    Section {
                        Picker(selection: self.$selectedCrossSection, label: Text("Querschnitt")) {

                            ForEach(self.oListDatasource.CrossSections, id: \.self) { item in
                                Text(item.CrossSection).tag(item.rowIndex)
                            }
                        }
                            //.pickerStyle(SegmentedPickerStyle()).foregroundColor(Color.orange)

                            .font(Font.custom("ArialMT", size: 12))
                            .onReceive([self.selectedCrossSection].publisher.first()) { (value) in
                                print(self.oListDatasource.CrossSections[self.selectedCrossSection].CrossSection)

                        }
                    }
                    Section {
                        Picker(selection: self.$selectedColor, label: Text("Farbe")) {

                            ForEach(self.oListDatasource.Colors) { item in
                                Text(item.Color).tag(item.rowIndex)
                            }
                        }
                            //.pickerStyle(SegmentedPickerStyle()).foregroundColor(Color.orange)
                            .font(Font.custom("ArialMT", size: 12))
                    }

                    Section {
                        Picker(selection: self.$selectedLength, label: Text("Länge")) {

                            ForEach(self.oListDatasource.Lengths) { item in
                                Text(item.Length).tag(item.rowIndex)
                            }
                        }
                        .font(Font.custom("ArialMT", size: 12))
                    }

                Section {
                    Picker(selection: $selectedEyelet1, label: Text("Öse 1")) {

                        ForEach(oListDatasource.Eyelets) { item in
                            Text(item.Eyelet).tag(item.rowIndex)
                        }
                    }
                    .font(Font.custom("ArialMT", size: 12))
                }
                Section {
                    Picker(selection: $selectedEyelet2, label: Text("Öse 2")) {

                        ForEach(oListDatasource.Eyelets) { item in
                            Text(item.Eyelet).tag(item.rowIndex)
                        }
                    }
                    .font(Font.custom("ArialMT", size: 12))
                }
                }

            NavigationLink(destination: ListItems(selectedCrossSection: selectedCrossSection)) {
                Text("Liste").frame(width: 100)

            }
            }

            .navigationBarTitle("Kabelshop")

        }

    }
}
Mehrere Picker in einer View

Styles:

  • Navigation view style.
  • Wheel picker.
  • Segmented picker.
  • Date picker style.

About the author

Tobias Stephan administrator

Leave a Reply