1

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

1 Answer 1

3

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

Sign up to request clarification or add additional context in comments.

7 Comments

Hmm, how are you getting the pickers to look like that? Mine are as wheels when using that code.
With the picker style just below the tag. If you copy and paste the code you should get it working right away
Yeah, I have exactly the code you have there but when I try it in Xcode, the pickers come out as wheels... otherwise it's working properly. I want the pickers to have the same styling as InsetGroupedListStyle() which is what your screenshot is showing.
Paste my code in an empty project you’ll see maybe you have something g overriding the style
Just tested on a fresh app, same thing. Maybe you're on a different Swift/iOS version than me? I'm targetting iOS 14 right now.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.