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

Question

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

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

结果：

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

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

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

Answer 1

iOS 14：

默认情况下， iOS 14 不会在列表下方显示额外的分隔符，要删除所有分隔符，您需要使用 a LazyVStackinside aScrollView来代替。（因为 iOS不再支持 SwiftUI 列表的外观）。

---

iOS 13：

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

不需要Section或.grouped风格！

iOS 13的UITableViewSwiftUI 背后有一个。所以要删除List

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

你需要一个tableFooterViewand 来删除。 请注意， 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 2

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

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

Answer 3

这仅适用于 iOS 13 版本。

使用onAppear修改分隔符样式UITableView并恢复到初始状态onDisappear

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

Answer 4

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

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

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

Answer 6

仅 iOS 13 构建：

您可以添加它，以删除分隔符。

UITableView.appearance().separatorColor = .clear

Answer 7

两种方法：

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 8

这是一种方法。

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

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

Answer 9

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

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

your_tableView.tableFooterView = UIView()

Answer 10

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

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

如果您没有任何部分，我想出了一种隐藏页脚的hacky方法：

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

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