4

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?

Sunderam Dubey
  • 1
  • 11
  • 20
  • 40
SwiftUIRookie
  • 591
  • 7
  • 16

3 Answers3

0

Xcode 14 / iOS 16

Actually all is need is .listStyle(.insetGrouped)

More details is here

Asperi
  • 228,894
  • 20
  • 464
  • 690
0

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.

alexkaessner
  • 1,966
  • 1
  • 14
  • 39
-3

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

Xinyu Wang
  • 1