SwiftUI - List Line Separator Inset like iOS Settings App

user_14487210 0
Viewed 1315

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.

enter image description here enter image description here

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?

swiftui separator line list ios
2 Answers

Xcode 14 / iOS 16

Actually all is need is .listStyle(.insetGrouped)

More details is here

user_122990300

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

user_107696600
Related