UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on 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()
    }
}

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      

BUILD THE ULTIMATE PORTFOLIO APP Most Swift tutorials help you solve one specific problem, but in my Ultimate Portfolio App series I show you how to get all the best practices into a single app: architecture, testing, performance, accessibility, localization, project organization, and so much more, all while building a SwiftUI app that works on iOS, macOS and watchOS.

Get it on Hacking with Swift+

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.