Hide separators in List (SwiftUI)

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.
Post not yet marked as solved Up vote post of Apple_Kevin Down vote post of Apple_Kevin
10k views
  • I had the same problem use this

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

Add a Comment

Answers

I'm having same issue. I'm using macOS Catalina, Xcode 12 beta.
I'm having same issue. I'm using macOS 11.6 beta, Xcode 12 beta.
StackOverflow post suggested something super tacky, would rather not do this.

SwiftUI team, please just give us a ".listSeparatorStyle(.none)" view modifier.
Same issue here. Have tried everything I can think of - I was really hoping that SwiftUI 2.0 would bring more flexibility for Lists with custom style, not remove existing customization.
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 swift
yourRowContent
  .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 swift
import SwiftUI
struct 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)
  }
}


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

Submitted FB7999069. I really hope they give us some APIs to control separators in the future iOS 14 Beta.
The answers here no longer work for Xcode 12 Beta 4 - has anyone else found a new solution?
Same thing. Man SwiftUI is awesome, I can build screens and components really fast but spend even more time on the most basic stuff like trying to hide a darn line separator. Very frustrating.
Wait 2 years and SwiftUI will have most of UIKit and other's capabilities.
I also submitted feedback. Apple we need this .listSeparatorStyle(.none).
Radar #FB8654253
I created a project to solve this issue. See post on SO here:

https://stackoverflow.com/a/63909310/2804699
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
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.
This basic feature is very much needed SwiftUI team.