Is there a way to make List style insetGrouped in SwiftUI?

Question

So let’s say for example that I have a list declared like this

List {
    Section {
        Text(“Test Row Title 1”)
    }
    Section {
        Text(“Test Row Title 2”)
    }
}

Is it possible to make the style of that the same as UITableView.Style.insetGrouped? I can’t find any information about that. I thought that it would be as simple as .listStyle(InsetGroupedStyle())

Answer 1

Apparently there is a new API in iOS/iPadOS 14 which finally allows InsetGrouped style to be in SwiftUI.

List {
  ...
}
.listStyle(InsetGroupedListStyle())

Answer 2

In iOS 13.2, you can set .environment(\.horizontalSizeClass, .regular) on .listStyle(GroupedListStyle()) to get the same style as UITableView.Style.insetGrouped.

List {
    Section {
        Text(“Test Row Title 1”)
    }
    Section {
        Text(“Test Row Title 2”)
    }
}.listStyle(GroupedListStyle())
.environment(\.horizontalSizeClass, .regular)

https://sarunw.com/tips/inset-grouped-in-swiftui/

Answer 3

You can add .environment(\.horizontalSizeClass, .regular) to your list.

Answer 4

My implementation is not ideal, but this is what I'm happy with for now. I stared by creating a ViewModifier, CardViewModifier() that I use for creating an inset card view. I use it in several places in my App, not just with the lists.

struct CardViewModifier: ViewModifier {

var backgroundColor = Color(.systemBackground)

func body(content: Content) -> some View {
    content
        .padding()
        .frame(maxWidth: .infinity)
        .background(Color(.systemBackground))
        .cornerRadius(12)
        .padding()
    }
}

To "fake" an insetGrouped List, I convert the List to a ScrollView and the Sections to VStacks, like so.

struct ContentView: View {

    let data = ["Row 1", "Row 2", "Row 3", "Row 4", "Row 5"]

    var body: some View {

        ScrollView {

            VStack {
                ForEach(data, id:\.self) { row in
                    VStack {
                        Text("Section 1, \(row)")
                        Divider()
                    }
                }
            }
            .modifier(CardViewModifier())

            VStack {
                ForEach(data, id:\.self) { row in
                    Text("Section 2, \(row)").padding()
                }
            }
            .modifier(CardViewModifier())
        }
        .background(Color(.secondarySystemBackground))
    }
}

Like I said its not ideal, but it will work until Apple (or someone else) creates an InsetGroupedListStyle. When that happens, it should be a simple case of changing the ScrollView back to a List and the VStacks back to Sections.

Good luck...