Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove the line separators from a List in SwiftUI without using ForEach?

Tags:

ios

swift

swiftui

I have this code to display a list of custom rows.

struct ContentView : View {     var body: some View {         VStack(alignment: .leading) {             List(1...10) {_ in                 CustomRow()             }         }     } } 

However, I want to remove the line on each row. I tried not using List and instead using ForEach inside ScrollView but it completely removes all the styling including its padding and margins. I just want to remove the lines and nothing else.

Please help, thank you.

like image 298
grey Avatar asked Jun 12 '19 01:06

grey


People also ask

How to remove separator line in List in SwiftUI?

In UIKit, you can easily control the appearance and color of the line separator. 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 add a separator in SwiftUI?

If the canvas isn't visible, select Editor > Editor and Canvas to show it. The Horizontal Divider is displayed as a horizontal line to divide views. Inside a HStack the divider is displayed as a vertical line. The size of the divider can be changed with the frame modifier.

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


2 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:

you may consider using a LazyVStack inside a ScrollView instead (because iOS is NOT supporting UIAppearance for SwiftUI lists anymore).

LazyVStack Preview


iOS 13:

⚠️ This method is deprecated and it's not working from iOS 14

There is a UITableView behind SwiftUI's List for iOS 13. 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

Example of usage

init() {     if #available(iOS 14.0, *) {          // iOS 14 doesn't have extra separators below the list by default.     } else {         // 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")     } } 

Note that a static list doesn't show extra separators below the list by default

like image 129
Mojtaba Hosseini Avatar answered Oct 25 '22 17:10

Mojtaba Hosseini


iOS 15+:

Simply add .listRowSeparator(.hidden) as a modifier to the view contained in the List. https://developer.apple.com/documentation/swiftui/texteditor/listrowseparator(_:edges:)

List {     ForEach(garage.cars) { car in         Text(car.model)             .listRowSeparator(.hidden)     } } 

iOS 13 only:

Adding UITableView.appearance().separatorColor = .clear anywhere in your code before the List appears should work. While this solution removes the separators, note that all List instances will be bound to this style as there’s no official way currently to only remove separators of specific instances. You may be able to run this code in onAppear and undo it in onDisappear to keep styles different.

Also note that this code assumes Apple is using a UITableView to back List which is not true in the iOS 14 SDK. Hopefully they add an official API in the future. Credit to https://twitter.com/singy/status/1169269782400647168.

like image 32
Natanel Avatar answered Oct 25 '22 16:10

Natanel