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

Question

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

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

任何帮助将不胜感激。

Answer 1

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

您可以在ForEach内使用ScrollView而不是List来进行动态视图而无需任何样式

Answer 3

iOS的SwiftUI的UITableView后面有一个List。因此，删除

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

您需要一个tableFooterView并删除

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

您需要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 4

仅iOS 13构建：

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

⚠️请注意，在iOS 14 SDK中，List似乎不受UITableView的支持。请参阅下面的替代解决方案：

仅iOS 14 Xcode 12 Beta 1：

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

⚠️这不适用于iOS 13版本。

在Xcode 12 beta 1中进行了测试：

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)

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

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

Answer 5

为初始化器添加UITableView.appearance().separatorColor = .clear

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

希望您能解决此问题。

Answer 6

当前的解决方法是通过onActivityResult删除它们：

UIAppearance

Answer 7

来自：Swiftui观看精通书SwiftUI 2.0 Mark Moeykens

.listStyle(SidebarListStyle()) # IOS 14

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

Answer 8

iOS13，iOS14，iOS15，去掉第一个单元格顶部的分隔符

添加视图修饰符

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

用法

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

你可以在这里找到

https://github.com/wangrui460/HiddenListLine4SwiftUI

iOS / SwiftUI 技术交流

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

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