SwiftUI - 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 or for instance the Roborock App (see screenshots below). I'd like to go for an Icon and then give an inset to the line separator.

I already tried

UITableView.appearance().separatorInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 80)

but this doesn't work with SwiftUI 3.0 / iOS 15.1

Here's the full code:

import SwiftUI

struct ListTest: View {
    var body: some View {
        List {
            
            Button(action: {
                print("Test")
            }) {
                SettingsCell2(title: "Test", iconName: "bell.badge.fill")
            }
            
            Button(action: {
                print("Test")
            }) {
                SettingsCell2(title: "Test", iconName: "bell.badge.fill")
            }
        }
    }
}

struct SettingsCell2: View {
    
    var title : String
    var iconName : String
    
    var body: some View {
        HStack {
            
            ZStack {

                RoundedRectangle(cornerRadius: 8, style: .continuous)
                    .fill(Color.red)
                
                Image(systemName: iconName)
                    .foregroundColor(.white)

            }
            .frame(width: 30, height: 30, alignment: .center)

            Text(title)
                .foregroundColor(.primary)
            
            Spacer()
            
            Image(systemName: "chevron.right")
                .font(.headline)
                .foregroundColor(.gray)

        }

    }
}

struct ListTest_Previews: PreviewProvider {
    static var previews: some View {
        ListTest()
    }
}

Any Ideas how this can be achieved?

Many Thanks!

Answer 1

add .listStyle(.sidebar) to your list

struct ListTest: View {
    var body: some View {
        List {
            Button(action: {
                print("Test")
            }) {
                SettingsCell2(title: "Test", iconName: "bell.badge.fill")
            }
            
            Button(action: {
                print("Test")
            }) {
                SettingsCell2(title: "Test", iconName: "bell.badge.fill")
            }
        }
        .listStyle(.sidebar)
    }
}

To make the row looks better, you should use Label instead of Image and Text