'How to remove/adjust separators in List?

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?

listswiftui


Solution 1:[1]

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()
    }
        }
}

Solution 2:[2]

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 2.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()
}

Solution 3:[3]

This can all be done in SwiftUI

To remove separators in compare with the good old way in UIKit tableView.separatorStyle = .none, add this line in init or the table view's onAppear method:

init() {
    UITableView.appearance().separatorStyle = .none
}

To adjust separator inset in compare with the line in UIKit tableview.separatorInset = UIEdgeInsets(top: 0, left: 18, bottom: 0, right: 18), add this line in init or onAppear method:

List(...){
    ...
}.onAppear() {
    UITableView.appearance().separatorInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 50)
}

Solution 4:[4]

remove separator -> set clear color

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

Solution 5:[5]

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")
    }

 }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 Fangming
Solution 4 Dinakar Prasad Maurya
Solution 5 Krunal Patel

Related Questions