GO FURTHER, FASTER: Try the Swift Career Accelerator today! >>

InsetGroupedListStyle doesn't work on picker

Forums > SwiftUI

Hello!

When I apply the "InsetGroupedListStyle" on a List view, and I have a Picker view embedded, the picker (when going to the next view to pick a different item) doesn't follow the InsetGroupedListStyle. Attached you see the code for better understanding. Do you have a solution for this problem? Thanks in advance,

regards,

Martin

import SwiftUI

struct ContentView: View {

    let testArray = ["One", "Two", "Three", "Four", "Five"]

    @State private var selection = 0

    var body: some View {
        NavigationView {
            List {
                Picker("Your choice", selection: $selection) {
                    ForEach(0..<testArray.count) {
                        Text(testArray[$0])
                    }
                }
            }
            .listStyle(InsetGroupedListStyle())
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

5      

@bcyng  

any solution for this?

3      

There is a workaround for this. You can create a custom view and use a NavigationLink to push to it.

Here's an example usage:

struct PickerView: View {
  @Binding var selection: Int

  let values: [String]

  var body: some View {
    List {
      Picker("Your choice", selection: $selection) {
        ForEach(values, id: \.self, content: Text.init)
      }
      .pickerStyle(.inline)
    }
    .listStyle(.insetGrouped)
    .navigationTitle("Choose something")
  }
}

struct ContentView: View {
  @State private var selection = 0

  let testArray = ["One", "Two", "Three", "Four", "Five"]

  var body: some View {
    NavigationView {
      List {
        NavigationLink("Choose something") {
          PickerView(selection: $selection, values: testArray)
            .badge(testArray[selection])
        }
      }
      .navigationTitle("Inline Picker")
    }
  }
}

It takes a bit more work but the resulting PickerView that is being pushed to is much more customisable: you can have multiple sections and section headers. If you dive around the Settings app, you will see these types of pickers.

3      

@Njansari it works, but now when I pick a choice, the view doesn't go back to the previous view automatically like with a picker. Any idea as how to fix this behavior?

struct PickerStyleView: View {
    @Environment(\.presentationMode) var presentationMode
    @Binding var tag: String

    var body: some View {
        List {
            Picker("", selection: $tag) {
                Text("Act 1").tag("Act 1")

                Text("Act 2").tag("Act 2")

                Text("Act 3").tag("Act 3")

            } .onTapGesture(perform: {
                presentationMode.wrappedValue.dismiss()
            })

            .pickerStyle(.inline)
        }
        .listStyle(.insetGrouped)
        .navigationTitle("Choose something")
    }
}

3      

Hacking with Swift is sponsored by RevenueCat.

SPONSORED Take the pain out of configuring and testing your paywalls. RevenueCat's all new Paywall Editor allow you to remotely configure your paywall view without any code changes or app updates.

Click to save your free spot now

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.