Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to hide SwiftUI list divider [duplicate]

Tags:

ios13

swiftui

I'm trying to hide the divider between cells in a List, but looks like there is no way to do it, based on Apple´s documentation.

Any idea for how to do it?

like image 595
Daplerio Avatar asked Jun 10 '19 16:06

Daplerio


People also ask

How do I hide a list divider in SwiftUI?

To hide the row separator, pass in the hidden argument.

How do I delete a separator line in SwiftUI?

Unfortunately, there is no official way to remove line separators in SwiftUI. That said, we can make use of the UIKit API to tweak the line separator of the List view in SwiftUI.

How do I change the divider color in SwiftUI?

Changing SwiftUI Divider Colors You can change its color by overlay it with the color you want using . overlay() modifier. Text("A visual element that can be used to separate other content.") Use overlay modifier to change the color of a divider.

How do I create a list in SwiftUI?

Probably the simplest way to build a list is to create a new SwiftUI view and wrap the Hello World text in a List: struct StaticListView: View { var body: some View { List { Text("Hello, world!") } } } To add more items to the list, we can just add another line: List { Text("Hello, world!") Text("Hello, SwiftUI!") }


1 Answers

iOS 15:

This year Apple introduced a new modifier .listRowSeparator that can be used to style the separators. you can pass .hidden to hide it:

List {
    ForEach(items, id:\.self) { 
        Text("Row \($0)")
            .listRowSeparator(.hidden)
    }
}

iOS 14

In iOS 14, you may consider using LazyVStack instead of list for this:

ScrollView {
    LazyVStack {
        ForEach((1...100), id: \.self) {
           Text("Placeholder \($0)")
        }
    }
}

Keep in mind that LazyVStack is lazy and doesn't render all rows all the time. So they are very performant and suggested by Apple itself in WWDC 2020.


iOS 13

There is a UITableView behind SwiftUI's List for iOS. So to remove

Extra separators (below the list):

you need a tableFooterView and to remove

All separators (including the actual ones):

you need separatorStyle to be .none

init() {
    // To remove only extra separators below the list:
    UITableView.appearance().tableFooterView = UIView()

    // To remove all separators including the actual ones:
    UITableView.appearance().separatorStyle = .none
}

var body: some View {
    List {
        Text("Item 1")
        Text("Item 2")
        Text("Item 3")
    }
}
like image 93
Mojtaba Hosseini Avatar answered Sep 23 '22 00:09

Mojtaba Hosseini