Hide separators in List (SwiftUI)

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)

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

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

• - UPDATE: my radar feedback on this: FB7836043

Code Block Swift
	VStack {
      ForEach(permissions) {
        PermissionView(permission: $0)
      }
      .padding(.bottom, 8)
    }

Code Block Swift
ScrollView {
	LazyVStack(pinnedViews: .sectionHeaders) {
		// list content goes here
	}
}

Yes, we need Apple to fix this annoying issue in Swift 3.0.

In the meantime, I am using this that seems to work in iOS14.4 and XC 12.4:

VStack { ScrollView { ForEach() } }

Yes, that is right, the ScrollView inside the VStack, also works with LazyVStack, which seems just the opposite than you would think.

The use case here is that the VStack has a small frame and not having the ScrollView and a large number of items will override the frame and cause the VStack to grow beyond the frame, which seems very wrong... another battle for another day.

Hope this helps your frustrations.

Cheers, and get ready for "one last thing"...

Felipe

I have same problem. But I know handmade solution for it. So, if you set List row parameters like

.listRowInsets(EdgeInsets(top: -5, leading: 0, bottom: 0, trailing: 0))

and padding of row view body like

.padding(EdgeInsets(top: Statics.adjustValue(v: 10), leading: Statics.adjustValue(v: 10), bottom: Statics.adjustValue(v: 10), trailing: Statics.adjustValue(v: 10)))

then separator will be hidden.

FOR ALL iOS VERSIONS

Just wanted to tell that this feature is now available in iOS 15

Just wanted to tell that this feature is now available in iOS 15

.listRowSeparator(.hidden)

For iOS13，iOS14，iOS15，and remove the separator at the top of the first cell

Add viewModifier

extension View {
    /// 隐藏 List 中的 分割线
    func hideRowSeparator(insets: EdgeInsets = .init(top: 0, leading: 0, bottom: 0, trailing: 0),
                          background: Color = .white) -> some View {
        modifier(HideRowSeparatorModifier(insets: insets, background: background))
    }
}

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
    if #available(iOS 14.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)
        .listRowInsets(EdgeInsets())
        .overlay(
            VStack {
                HStack {}
                .frame(maxWidth: .infinity)
                .frame(height: 1)
                .background(background)
                Spacer()
                HStack {}
                .frame(maxWidth: .infinity)
                .frame(height: 1)
                .background(background)
            }
            .padding(.top, -1)
        )
  }
}

Usage

struct ContentView: View {
    var body: some View {
        List {
            ForEach(0 ..< 30) { item in
                HStack(alignment: .center, spacing: 30) {
                    Text("Hello, world!：\(item)").padding()
                }
                .hideRowSeparator(background: .white)
            }
        }
        .listStyle(PlainListStyle())
    }
}

iOS / SwiftUI 技术交流

我创建了一个 微信 iOS 技术交流群、SwiftUI 技术交流群，欢迎小伙伴们加入一起交流学习~

可以加我微信我拉你进去（备注iOS），我的微信号 wr1204607318

I had the same problem use this

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