在 SwiftUI 中删除列表下方的多余行分隔符

Question

我创建了一个简单的List，如下所示，但它下面有额外的分隔符。

List {
  Text("Item 1")
  Text("Item 2")
  Text("Item 3")
}

结果：

我尝试将 List 嵌入到 VStack 中并添加 Spacer() 如下代码，但它无法正常工作。它会删除大约一半的空单元格。

VStack{
  List {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
  }
  Spacer()
}

如何在 SwiftUI 中删除这些额外的分隔符？

Answer 1

这不是一个完美的解决方案，但您可以使用 ScrollView，其中每个单元格都是使用 ForEach 调用创建的，而分隔符是使用 Divider() 创建的。

编辑：我在 WWDC 上与 Apple 工程师讨论过这个问题。他们听到了很多关于移除/更改分隔符的反馈。但是，目前我的上述答案是他们的建议。

Answer 2

不是一个理想的解决方案，但您可以通过.listStyle(.grouped) 制作列表样式.grouped，这会删除下面可能出现的任何空单元格。

Answer 3

这是一种方法。

List {
         Section(footer: Text(""))) {
                Text("One")
                Text("Two")
                Text("Three")
            }
     }

您可以创建自己的，而不是页脚中的文本视图。 注意 - 我试过 EmptyView() 但实际上并没有删除多余的分隔符。

Answer 4

两种方法：

struct ContentView: View {
    
    var body: some View {
        
        List {
                Text("One")
                Text("Two")
                Text("Three")
        }.listStyle(GroupedListStyle())
    }
}

struct ContentView: View {
    
    var body: some View {
        
        List {
            Section(header: Text("Header"), footer: Text("Footer")) {
                Text("One")
                Text("Two")
                Text("Three")
            }
        }
    }
}

我推荐分组列表样式。

Answer 5

添加一个白色矩形作为页脚和 0 EdgeInsets 对我有用：

struct Footer: View {
    var body: some View {
        Rectangle()
            .foregroundColor(.white)
            .listRowInsets(EdgeInsets())
    }
}

struct Timeline : View {
    var body: some View {
        List {
            Section(footer: Footer()) {
                Text("Item 1")
                Text("Item 2")
                Text("Item 3")
            }
        }
    }
}

唯一的问题是它还添加了一个 Header，我不知道如何摆脱它。

Answer 6

试试这个，如果你想使用这个部分，还有一个可见的页脚：

List {
    Section(footer: Text("")) {
        Text("My text")
    }
    EmptyView()
}

如果你没有任何部分，我想出了一个隐藏页脚的黑客方法：

List {
    Text("Item 1")
    Text("Item 2")

    // Adding empty section with footer
    Section(footer:
        Rectangle()
            .foregroundColor(.clear)
            .background(Color(.systemBackground))){EmptyView()}
            .padding(.horizontal, -15)
}

Answer 7

仅限 iOS 13 版本：

你可以添加这个，删除分隔符。

UITableView.appearance().separatorColor = .clear

Answer 8

iOS 14：

iOS 14 默认情况下列表下方不显示额外的分隔符，要删除所有分隔符，您需要在ScrollView 中使用LazyVStack . （因为 iOS 不不再支持 SwiftUI 列表的外观）。

---

iOS 13：

⚠️ 此方法已弃用，并且不适用于 iOS 14

不需要Section 或.grouped 样式！

在 iOS 13 的 SwiftUI 的 List 后面有一个 UITableView。所以要删除

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

您需要 tableFooterView 并删除。 请注意默认情况下，iOS 14 不会在列表下方显示额外的分隔符。

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

你需要separatorStyle 成为.none

init() {
    if #available(iOS 14.0, *) { 
        // iOS 14 doesn't have extra separators below the list by default.
    } else {
        // 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")
    }
}

注意它消除了所有表格/列表的分隔符。因此，您可以根据需要在 onAppear() 等方法中切换它。

Answer 9

这仅适用于 iOS 13 版本。

使用onAppear通过UITableView修改一个分隔符样式，用onDisappear恢复到初始状态

List {}
.onAppear { UITableView.appearance().separatorStyle = .none }
.onDisappear { UITableView.appearance().separatorStyle = .singleLine }

Answer 10

由于未知原因，即使在 iOS14 之后，我在tableView 中也遇到了这个问题，尽管上面的答案是默认情况下将不再有额外的分隔线。

我用来解决它的方法是将footerView 设置为空的UIView，就像在同一个答案中一样。

your_tableView.tableFooterView = UIView()