swiftxcodeswiftuiswiftui-listswiftui-form

Use section headers on SwiftUI Picker list?


I'm trying to get something similar to the following using SwiftUI and Picker()

But when I try to use Section(header: ) I get the following:

Form {
    Picker("S", selection: $sensor) {
        Section(header: Text("This should be a header")) {
           Text("This is the content")
            Text("This is more content")
        }
        
        Section(header: Text("Another header")) {
           Text("This is the content 2")
            Text("This is more content 2")
        }
    }
}

Solution

  • I don't think that is one Picker. I think that is two Pickers with maybe one selection variable.

    In Xcode 13 you can use Inline Picker Style to create the inset look

    import SwiftUI
    struct PickerModel: Identifiable{
        let id: UUID = UUID()
        var parent: String
        var children: [String]
    }
    
    var pickers: [PickerModel]{
        [PickerModel(parent: "Child 1-B", children: ["Child 1-A","Child 1-B","Child 1-C"]),
         PickerModel(parent: "Parent 2", children: ["Child 1-A","Child 1-B","Child 1-C","Child 1-D"])
        ]
    }
    struct MultiplePickerView: View {
        @State var sensor: String = "no sensor selected"
        var body: some View {
            Form{
                Text(sensor)
                ForEach(pickers){picker in
                    Section(header: Text(picker.parent)){
                        Picker("", selection: $sensor){
                            ForEach(picker.children, id:\.description){child in
                                Text(child)
                                    //Make sure tag is unique across pickers
                                    .tag("\(picker.parent)  \(child)")
                            }
                        }.pickerStyle(InlinePickerStyle())
                            .labelsHidden()
                    }
                }
            }
        }
    }
    

    But in Xcode 12 you have to create the picker functionality manually

    struct MultiplePickerView: View {
        @State var sensor: String = "no sensor selected"
        var body: some View {
            Form{
                Text(sensor)
                ForEach(pickers){picker in
                    Section(header: Text(picker.parent)){
                            ForEach(picker.children, id:\.description){child in
                                //tag must be unique throughout the pickers
                                let tag = "\(picker.parent)  \(child)"
                                HStack{
                                    Text(child)
                                    Spacer()
                                    
                                    if sensor == tag{
                                        Image(systemName: "checkmark").foregroundColor(.blue)
                                    }
                                }
                                .contentShape(Rectangle())
                                .onTapGesture {
                                    sensor = tag
                                }
                                
                            }
                    }
                }
            }
        }
    }
    

    enter image description here

    it