How to remove/adjust separators in List?

Question

Is there a way to remove separators or adjust separator insets in List view in SwiftUI?

In UIKit it can be achieved through

tableView.separatorStyle = .none

and

tableview.separatorInset = UIEdgeInsets(top: 0, left: 18, bottom: 0, right: 18)

What are the corresponding SwiftUI alternatives?

Mariko

I find these dividers intensely annoying – Annisannissa

Answer 1

iOS 15.0+

Mac Catalyst 15.0+

listRowSeparator(_:edges:)

Sets the display mode for the separator associated with this specific row. https://developer.apple.com/

List {
    ForEach(0..<10, id: \.self) { number in
        Text("Text\(number)")
    }.listRowSeparator(.hidden)
}

---

iOS 14.0+

struct ListRowSeperatorModifier: ViewModifier {
    func body(content: Content) -> some View {
        if #available(iOS 15.0, *) {
            content.listRowSeparator(.hidden)
        } else {
            content.onAppear {
                UITableView.appearance().separatorStyle = .none
            }
            .onDisappear {
                UITableView.appearance().separatorStyle = .singleLine
            }
        }
    }
}


extension View {
    func hideListRowSeparator() -> some View  {
        return  self.modifier(ListRowSeperatorModifier())
    }
}

Use .hideListRowSeparator() on ForEach.

List {
    ForEach(0..<10, id: \.self) { number in
       Text("Text\(number)")
    }.hideListRowSeparator()
}

Foxhound

SwiftUI requires iOS 13 -- no way the second part of this answer works on iOS 2.0. I don't think you can Swift at all with iOS 2.0... – Latchstring

Answer 2

For ios 13 not for ios 14

You can remove separaters using: UITableView.appearance().separatorStyle = .none in SwiftUI

Just add on

List() {
}.onAppear {
         UITableView.appearance().separatorColor = .clear
}

or

struct SomeListView : View {
    init( ) {          
        UITableView.appearance().separatorStyle = .none
           }

    var body : some View {
        Text("TEST")
        }

struct CallList : View {
    var body : some View {

    List() {
    SomeListView()
    }
        }
}

Mccloskey

We are talking about a List in SwiftUI, not a UITableView from UIKit – Kibitzer

I can confirm that this works. @Frédéric Adda On iOS SwiftUI List uses UITableView under the hood. So on iOS this is a perfectly valid solution – Preterhuman

OK, good trick to know, thank you! Until there is a real SwiftUI modifier to change this, I guess this is the best solution possible. – Kibitzer

Just wanted to mention it no longer works on iOS 14 and Xcode 12 beta 4 – Mcneill

for iOS 14 you can use ScrollView { LazyVStack(spacing: 0) { } } instead of List(), will change the look but will remove the separetors – Mccloskey

Answer 3

Searched so much to adjust insets for line separators in list. You do not need to do OnAppear(), just adjust the 'padding()' modifier for list.Simple!

.padding(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 20))

To further tune the row inside list, you can use this -

Use this modifier:

.listRowInsets(EdgeInsets(....))

 List {
    Text("test")
        .listRowInsets(EdgeInsets(top: -20, leading: -20, bottom: -20, trailing: -20))
 }

Gilchrist

Answer 4

To remove the separator there are many answers provided here that work.

But to adjust the separator insets on iOS 15 or older I have a workaround (SwiftUI doesn't provide a mean to do this).

Right padding: As @user1664018 said:

.padding(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 20))

Left padding: Simply add Text("") view to your cell with padding being same of desired separator inset! See below a layout given as example.

Explanation: SwiftUI draws the separator aligned with the first Text element. Simple. So the leftmost Text view will decide where the separator will start.

Example:

var body: some View {
    VStack(spacing: 0) {
        HStack(spacing: 0) {
            // This is necesary so that the separator starts from the edge
            Text("")

            Image("colored.waved.illustration")
            
            VStack(alignment: .leading) {
                Text(notification.title)
                
                Text(notification.description)
            }
        }
        .frame(height: height)
    }
}

Bein

Answer 5

You can use .listRowInsets(EdgeInsets()), example:

        } header: {
          HStack {
            Text(String(sectionTitle))
            Spacer()
          }
          .background(Color.red)
          .listRowInsets(EdgeInsets())
        }

source: https://twitter.com/ChristianSelig/status/1570217458249646080

Chisolm

Answer 6

remove separator -> set clear color

init() {
   UITableView.appearance().separatorColor = .clear
 }

Mutiny

Answer 7

In SwiftUI:

Remove Separators

 init() {

    UITableView.appearance().separatorStyle = .none //remove separators

 }

 var body: some View {

    List {

        Text("Index 1")
        Text("Index 2")
        Text("Index 3")
        Text("Index 4")
    }

 }

Hett

Answer 8

For the latter you can use listRowInsets:

List { 
  Text("Item 1")
  Text("Item 2")
  Text("Item 3")
}
.listRowInsets(EdgeInsets(top: 0, left: 18, bottom: 0, right: 18))

Nevus

How does this adjust the separator insets? This seems to only adjust the inset of the actual view in the row or am I missing something? – Lian