Use section headers on SwiftUI Picker list?

Question

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")
        }
    }
}

user_12738750 · Answer

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
                            }
                            
                        }
                }
            }
        }
    }
}

it

Use section headers on SwiftUI Picker list?

1 Answers