FREE TRIAL: Accelerate your app development career with Hacking with Swift+! >>

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

2      

@bcyng  

any solution for this?

   

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.

   

Hacking with Swift is sponsored by Essential Developer

SPONSORED Join a FREE crash course for iOS devs who want to become complete senior developers — from October 18th to 24th. Learn how to apply iOS app architecture patterns through a series of lectures and practical coding sessions.

Learn more

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

Reply to this topic…

You need to create an account or log in to reply.

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.