Hide separators in List (SwiftUI)

Question

Apple_Kevin OP

Created Jun ’20

Replies 28

Boosts 0

Views 21k

Participants

How do I hide the separation lines inside Lists in SwiftUI for iOS 14?
Previously I could use

Code Block UITableView.appearance().separatorStyle = .none

but this doesn't seem to work anymore.

Boost

Answer 1

dqhieu OP

Jun ’20

I'm having same issue. I'm using macOS Catalina, Xcode 12 beta.

0

Answer 2

Abenx OP

Jun ’20

I'm having same issue. I'm using macOS 11.6 beta, Xcode 12 beta.

0

Answer 3

dovizu OP

Jun ’20

StackOverflow post suggested something super tacky, would rather not do this.

SwiftUI team, please just give us a ".listSeparatorStyle(.none)" view modifier.

8

Answer 4

samwarner OP

Jun ’20

I do have a pure SwiftUI solution for iOS 14, but who knows how long it's going to continue working for. It relies on your content being the same size (or larger) than the default list row and having an opaque background.

Tested in Xcode 12 beta 1:

Code Block swiftyourRowContent  .padding(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16))  .frame(    minWidth: 0, maxWidth: .infinity,    minHeight: 44,    alignment: .leading  )  .listRowInsets(EdgeInsets())  .background(Color.white)

Or if you're looking for a reusable ViewModifier:

Code Block swiftimport SwiftUIstruct HideRowSeparatorModifier: ViewModifier {  static let defaultListRowHeight: CGFloat = 44  var insets: EdgeInsets  var background: Color  init(insets: EdgeInsets, background: Color) {    self.insets = insets    var alpha: CGFloat = 0    UIColor(background).getWhite(nil, alpha: &alpha)    assert(alpha == 1, "Setting background to a non-opaque color will result in separators remaining visible.")    self.background = background  }  func body(content: Content) -> some View {    content      .padding(insets)      .frame(        minWidth: 0, maxWidth: .infinity,        minHeight: Self.defaultListRowHeight,        alignment: .leading      )      .listRowInsets(EdgeInsets())      .background(background)  }}extension EdgeInsets {  static let defaultListRowInsets = Self(top: 0, leading: 16, bottom: 0, trailing: 16)}extension View {  func hideRowSeparator(    insets: EdgeInsets = .defaultListRowInsets,    background: Color = .white  ) -> some View {    modifier(HideRowSeparatorModifier(      insets: insets,      background: background    ))  }}struct HideRowSeparator_Previews: PreviewProvider {  static var previews: some View {    List {      ForEach(0..<10) { _ in        Text("Text")          .hideRowSeparator()      }    }    .previewLayout(.sizeThatFits)  }}

1

Answer 5

midnight beep OP

Jul ’20

I used this code to hide the separators, but it's a poor workaround:

Code Block 	.padding(EdgeInsets(top: 10, leading: 16, bottom: 10, trailing: 16))	.listRowInsets(EdgeInsets())	.background(Color("BackColor"))

But I'd like a ".listSeparatorStyle(.none)" view modifier for sure -- anyone file a radar I can reference in my own feedback?

- UPDATE: my radar feedback on this: FB7836043

1

Answer 6

damirstuhec OP

Jul ’20

Submitted FB7999069. I really hope they give us some APIs to control separators in the future iOS 14 Beta.

1

Answer 7

AppleFam OP

Aug ’20

The answers here no longer work for Xcode 12 Beta 4 - has anyone else found a new solution?

4

Answer 8

BabyJ OP

Aug ’20

Wait 2 years and SwiftUI will have most of UIKit and other's capabilities.

1

Answer 9

crystalminds OP

Sep ’20

I also submitted feedback. Apple we need this .listSeparatorStyle(.none).
Radar #FB8654253

0

Answer 10

bucsmike OP

Sep ’20

I created a project to solve this issue. See post on SO here:

https://stackoverflow.com/a/63909310/2804699

0

Answer 11

Seitenwerk OP

Sep ’20

using:

.listStyle(SidebarListStyle())

should be all you need. But you meed to use negative padding or other tricks as this style has bit more spacing from all sides then the old version

2

Answer 12

salvatoresf OP

Sep ’20

If I can't remove such a simple thing like a damn separator, why I should use this framework? To spend hours finding a solution? All of the mentioned workarounds doesn't work anymore.

7

Answer 13

its_joeykay OP

Dec ’20

This basic feature is very much needed SwiftUI team.

3