SwiftUI - How to make list Line Separator Inset like iOS Settings App

Question

I'm trying to achieve the behavior that's also seen in in the iOS Settings App(see screenshots below). I'd like to get title is align to the line separator, not to icon.

I first try list with section ,code is TestView1(), the inset is align with icon, the result is as bellow:

Then I try set list to SidebarListStyle, code is TestView2(), the inset is align with title, the result is what I want. The screenhot is as bellow:

However, when I use section in list with SidebarListStyle, code is TestView3(), the section have a collapse button on upper right corner of section, this collapse button is not I want.

Is there any way to achieve the UI of the iOS Settings App? Or any way to remove collapse button in multiple section in list with SidebarListStyle？

import SwiftUI

struct Test1View: View {
    var body: some View {
        NavigationView{
            List() {
                Section() {
                    NavigationLink(destination: Text("")) {
                        Label("row1", systemImage: "pencil.circle.fill")
                    }
                    NavigationLink(destination: Text("")) {
                        Label("row2", systemImage: "pencil.circle.fill")
                    }
                    NavigationLink(destination: Text("")) {
                        Label("row3", systemImage: "pencil.circle.fill")
                    }
                }
                Section() {
                    NavigationLink(destination: Text("")) {
                        Label("row4", systemImage: "pencil.circle.fill")
                    }
                    NavigationLink(destination: Text("")) {
                        Label("row5", systemImage: "pencil.circle.fill")
                    }
                    NavigationLink(destination: Text("")) {
                        Label("row6", systemImage: "pencil.circle.fill")
                    }
                }
            }
        }
    }
}

struct Test2View: View {
    var body: some View {
        NavigationView{
            List() {
                NavigationLink(destination: Text("")) {
                    Label("row1", systemImage: "pencil.circle.fill")
                }
                NavigationLink(destination: Text("")) {
                    Label("row2", systemImage: "pencil.circle.fill")
                }
                NavigationLink(destination: Text("")) {
                    Label("row3", systemImage: "pencil.circle.fill")
                }

                NavigationLink(destination: Text("")) {
                    Label("row4", systemImage: "pencil.circle.fill")
                }
                NavigationLink(destination: Text("")) {
                    Label("row5", systemImage: "pencil.circle.fill")
                }
                NavigationLink(destination: Text("")) {
                    Label("row6", systemImage: "pencil.circle.fill")
                }
            }
            .listStyle(SidebarListStyle())
        }
    }
}

struct Test3View: View {
    var body: some View {
        NavigationView{
            List() {
                Section() {
                    NavigationLink(destination: Text("")) {
                        Label("row1", systemImage: "pencil.circle.fill")
                    }
                    NavigationLink(destination: Text("")) {
                        Label("row2", systemImage: "pencil.circle.fill")
                    }
                    NavigationLink(destination: Text("")) {
                        Label("row3", systemImage: "pencil.circle.fill")
                    }
                }
                
                Section() {
                    NavigationLink(destination: Text("")) {
                        Label("row4", systemImage: "pencil.circle.fill")
                    }
                    NavigationLink(destination: Text("")) {
                        Label("row5", systemImage: "pencil.circle.fill")
                    }
                    NavigationLink(destination: Text("")) {
                        Label("row6", systemImage: "pencil.circle.fill")
                    }
                }
                
            }
            .listStyle(SidebarListStyle())
        }
    }
}

struct HomeView: View {
    var body: some View {
        //Test1View()
        //Test2View()
        Test3View()
    }
}

Answer 1

You just need inset grouped style, like

struct Test3View: View {
    var body: some View {
        NavigationView{
            List() {
              // ... other code                
            }
            .listStyle(.insetGrouped)  // << here !!
        }
    }
}

Tested with Xcode 14 / iOS 16