如何从SwiftUI的列表中删除“行”分隔符？

Question

我正在尝试从ListSwiftUI中删除“行”分隔符。

我仔细阅读了List文档，但未能为此找到一个修饰符。

任何帮助，将不胜感激。

Answer 1

iOS 15：

今年 Apple 推出了一种新的修饰符.listRowSeparator，可用于设置分隔符的样式。你可以通过.hidden隐藏它：

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

iOS 14

AppleLazyVStack在 iOS 14 中引入。您可以考虑使用它而不是列表：

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

请记住，这LazyVStack是惰性的，并且不会一直渲染所有行。因此它们的性能非常好，并且是 Apple 自己在 WWDC 2020 中推荐的。

iOS 13

iOSUITableView背后有一个SwiftUI List。所以要删除

额外的分隔符（在列表下方）：

你需要一个tableFooterViewand 来删除

所有分隔符（包括实际分隔符）：

你需要separatorStyle成为.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")
    }
}

Answer 2

仅 iOS 13 构建

虽然此解决方案正常工作，但让我们使用 ViewModifier

public struct ListSeparatorStyleNoneModifier: ViewModifier {
    public func body(content: Content) -> some View {
        content.onAppear {
            UITableView.appearance().separatorStyle = .none
        }.onDisappear {
            UITableView.appearance().separatorStyle = .singleLine
        }
    }
}

现在让我们做一个有助于隐藏细节的小扩展

extension View {
    public func listSeparatorStyleNone() -> some View {
        modifier(ListSeparatorStyleNoneModifier())
    }
}

如您所见，我们已将外观设置代码包装到一个整洁的小视图修改器中。你现在可以直接申报

List {
    Text("1")
    Text("2")
    Text("3")
}.listSeparatorStyleNone()

Answer 3

您可以ForEach在无任何样式的情况下使用ScrollView而不是List动态视图

Answer 4

仅 iOS 13 版本：

添加UITableView.appearance().separatorColor = .clear初始化程序

struct SomeView: View {
  init() {
        UITableView.appearance().separatorColor = .clear
    }
}

我希望你能解决这个问题。

Answer 5

仅 iOS 13 构建：

当前的解决方法是通过UIAppearance以下方式删除它们：

UITableView.appearance(whenContainedInInstancesOf: 
    [UIHostingController<ContentView>.self]
).separatorStyle = .none

Answer 6

仅 iOS 13 版本：

\n

使用查看现有答案UITableView.appearance()。

\n

\xe2\x9a\xa0\xef\xb8\x8f 请注意，在 iOS 14 SDK 中，List似乎不受UITableView. 请参阅下面的替代解决方案：

\n

仅限 iOS 14 Xcode 12 Beta 1：

\n

我确实有一个适用于 iOS 14 的纯 SwiftUI 解决方案，但谁知道它能继续工作多久。它依赖于您的内容与默认列表行的大小相同（或更大）并且具有不透明的背景。

\n

\xe2\x9a\xa0\xef\xb8\x8f 这不适用于 iOS 13 版本。

\n

在 Xcode 12 beta 1 中测试：

\n

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

\n

或者，如果您正在寻找可重复使用的ViewModifier：

\n

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

\n

Answer 7

来自：Swiftui Views Mastery Book SwiftUI 2.0 Mark Moeykens

.listStyle(SidebarListStyle()) # IOS 14

您可以应用这个新的列表样式，它将删除分隔线。