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?

Answer 1

iOS 16

With iOS 16 the behavior of these row dividers changed to the way you are looking for.
So by default the separator will inset to align with the Text() as long as you are using the default .insetGrouped list style.

If you want to customize them anyway you can use the listRowSeparatorLeading and listRowSeparatorTrailing alignment guides (new with iOS 16). For more information check out this article.