如何在 SwiftUI 中删除列表分隔线

Question

所以问题很简单，就在标题中。我想删除 SwiftUI iOS 14 中的行分隔符。以前，我使用的是

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

以前在 iOS 13 中可以完成这项工作。但是现在它不起作用了。关于如何使其发挥作用的任何更新或想法？谢谢:)

Answer 1

这是可能解决方案的演示。使用 Xcode 12b 进行测试。

List {
    ForEach(0..<3) { _ in
        VStack {
            Text("Hello, World!").padding(.leading)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
        .listRowInsets(EdgeInsets())
        .background(Color(UIColor.systemBackground)))
    }
}

Answer 2

将@asperi、@akmin 和@zrfrank 答案合并为一件事。根据我的经验，

List

比

LazyVStack

更可靠、更高效，因此对于任何需要可靠性的复杂事物，我仍然使用

List

。

extension View {
    func listRow() -> some View {
        self.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
            .listRowInsets(EdgeInsets(top: -1, leading: -1, bottom: -1, trailing: -1))
            .background(Color(.systemBackground))
    }
}

List {
    Color.red
         .listRow()


    Color.green
         .listRow()
}

Answer 3

我如何制作一个适用于 iOS 14 和 iOS 13 的列表，它没有显示分隔符和额外边距

struct NoButtonStyle: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
    }
}

struct ListWithoutSepatorsAndMargins<Content: View>: View {
        let content: () -> Content
    
        var body: some View {
            if #available(iOS 14.0, *) {
                ScrollView {
                    LazyVStack(spacing: 0) {
                        self.content()
                    }
                    .buttonStyle(NoButtonStyle())
                }
            } else {
                List {
                    self.content()
                }
                .listStyle(PlainListStyle())
                .buttonStyle(NoButtonStyle())
            }
        }
    }

使用示例 -

ListWithoutSepatorsAndMargins {
    ForEach(0..<5) { _ in
      Text("Content")
    }
}

如果列表中有更多组件，请将它们包装在组中

                ListWithoutSepatorsAndMargins {
                    Group {
                            self.groupSearchResults()
                            self.myGroups()
                            self.exploreGroups()
                        }
                    }
                }

    

希望这对某人有帮助，我在这么小的事情上浪费了很多时间，苹果似乎正在努力推动我们使用 LazyVStack

Answer 4

iOS 15：

今年苹果推出了一个新的修饰符

.listRowSeparator

，可用于设置分隔符的样式。你可以通过

.hidden

隐藏它:

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

🌈您也可以通过设置将每个分隔符设置为任何颜色

listRowSeparatorTintColor

，正如我在这个答案中提到的：

iOS 14

关注

答案在这里

Answer 5

我在苹果开发者论坛上找到了这个简单的解决方案。它在 14.4 上对我有用：

List {
   ...
}.listStyle(SidebarListStyle())

这似乎在边缘周围添加了一点填充。如果这对您来说是个问题，您可以尝试一些负填充。

Answer 6

基于

平均乔的答案我最终得到了以下修改器：

struct ListSeparatorNone: ViewModifier {

    var backgroundColor: Color = Color(.systemBackground)
    
    func body(content: Content) -> some View {
        content
            .listRowInsets(EdgeInsets(top: -1, leading: 0, bottom: 0, trailing: 0))
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
            .background(backgroundColor)
    }
}

视图扩展：

extension View {
    func listSeparatorNone(backgroundColor: Color = Color(.systemBackground)) -> some View {
        self.modifier(ListSeparatorNone(backgroundColor: backgroundColor))
    }
}

使用示例：

List {
    ForEach(viewModel.countries, id: \.self) { country in
        Text(country)
            .padding(.leading, 10)
    }
    .listSeparatorNone()
}

Answer 7

如果您没有很多单元格，因此不需要依赖 LazyVStack 来提高性能，则可以回退到 ScrollView + VStack：

ScrollView {
  VStack {
    Row1()
    Row2()
    Row3()
  }
}

Answer 8

您还可以在 VStack 末尾（即列表内部）调用此函数。

它将覆盖在 iOS 14 上的列表分隔符上:)

private func hideDefaultListSeperator() -> some View {
    Rectangle()
        .fill(colorScheme == .light ? Color.white : Color.black)
        .frame(maxHeight: 1)
}

Answer 9

更新：

我想出了一个适用于 iOS 13 和 iOS 14 的解决方案，并给出了一个简单的列表，并在 iOS 上使用 List。

struct ListWithoutSepatorsAndMargins<Content>: View where Content: View {
    let content: () -> Content

    init(@ViewBuilder content: @escaping () -> Content) {
        self.content = content
    }

    var body: some View {
        List {
            self.content()
                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
                .listRowInsets(EdgeInsets())
                .background(Color.white)
        }
        .listStyle(PlainListStyle())
        .buttonStyle(NoButtonStyle())
    }
}

struct NoButtonStyle: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
    }

并在 SceneDelegate.swift 中执行以下操作以删除单元格的默认灰色选择

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
    UITableView.appearance().separatorStyle = .none
    UITableView.appearance().allowsSelection = false
   .......

我们可以通过以下方式使用它

ListWithoutSepatorsAndMargins {
    ForEach(0..<5) { _ in
      Text("Content")
    }
}

ListWithoutSepatorsAndMargins {
     Group {
        self.groupSearchResults()
        self.myGroups()
        self.exploreGroups()
     }
  }
}

Answer 10

这是我针对 iOS 14 的解决方案：

struct MyRowView: View {
  var body: some View {
    ZStack(alignment: .leading) {
      // Background color of the Row. It will spread under the entire row.
      Color(.systemBackground)
      NavigationLink(destination: Text("Details")) {
        EmptyView()
      }
      .opacity(0) // Hide the Disclosure Indicator

      Text("Go to Details").padding(.leading)
    }
    // These 2 lines hide the row separators
    .padding(.horizontal, -16) // Removes default horizontal padding
    .padding(.vertical, -6)    // Removes default vertical padding
  }
}

封闭的列表应该有这个修饰符

.listStyle(PlainListStyle())

与使用

LazyVStack 相比，此解决方案的优点是您仍然可以使用 List 的编辑功能。

不幸的是，该解决方案依赖于硬编码值来删除每行上的系统默认填充。希望 SwiftUI 3.0 将提供简单的 .separatorStyle(.none) 和 .accessoryType(.none) 修饰符。

删除披露指标的代码来自：

https://www.appcoda.com/hide-disclosure-indicator-swiftui-list/

Answer 11

感谢@asperi、@akmin、@zrfrank 和@averageJoe 的回答。

这是另一种适用于 iOS 14 和 15 的改进方法。

extension View {
    func hideListRowSeperator() -> some View {
        if #available(iOS 15, *) {
            return AnyView(self.listRowSeparator(.hidden))
        } else {
            return AnyView(self.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
                .listRowInsets(EdgeInsets(top: -1, leading: -1, bottom: -1, trailing: -1))
                .background(Color(.systemBackground)))
        }
    }
}

使用示例

var body: some View {
    List {
        ForEach(0..<3) { _ in
            Text("Hello, World!")
                .padding(.leading)
                .hideListRowSeperator()
        }
    }
    .listStyle(.plain)
}

Answer 12

上述答案对我有用，您只需在以下两个功能下进行设置：

.listRowInsets(EdgeInsets())

.background(Color.white)