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

Question

我已经创建了一个简单的<template> <div class="container"> <div v-html="pageSubHeading"></div> <b-img :src="imgSrc" class="planet"></b-img> </div> </template> data() { return { imgSrc: require("@/assets/moon.png"), pageSubHeading: "<h2>Welc<img src='/src/assets/earth.png' alt=''>me To The Planets App</h2>" }; } <style scoped> h2 { font-size: 2.5rem; position: relative; color: rgba(242, 202, 39, 0.609); margin-bottom: 40px; font-weight: 600; } </style> ，如下所示，但是它下面还有其他分隔符。

List

结果：

我尝试将List嵌入List { Text("Item 1") Text("Item 2") Text("Item 3") } 内，并像下面的代码一样添加VStack，但是它不能正常工作。它会删除大约一半的空单元格。

Spacer()

如何在SwiftUI中删除这些多余的分隔符？

Answer 1

不需要Section或.grouped样式！

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

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

Answer 2

这不是一个完美的解决方案，但是您可以使用ScrollView，其中使用ForEach调用创建每个单元格，并使用Divider（）创建分隔线。

编辑：我与WWDC的Apple工程师进行了交谈。他们听到了很多有关拆除/更换分频器的反馈。但是，目前我上面的答案是他们的建议。

Answer 3

这不是理想的解决方案，但是您可以使用.grouped创建列表样式.listStyle(.grouped)，该样式将删除下面可能出现的任何空白单元格。

Answer 4

更新2020年1月1日

使用Swift 5

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

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

希望有帮助！

Answer 5

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

UITableView.appearance().separatorColor = .clear

Answer 6

这是一种方式。

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

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

Answer 7

两种方法

================================================ =========

struct ContentView：查看{

var body: some View {

    List {
            Text("One")
            Text("Two")
            Text("Three")
    }.listStyle(.grouped)
}

}

================================================ =========

struct ContentView：查看{

var body: some View {

    List {
        Section(header: Text("Header"), footer: Text("Footer")) {
            Text("One")
            Text("Two")
            Text("Three")
        }
    }
}

}

我推荐分组列表样式

Answer 8

添加一个白色矩形作为页脚并使用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 9

尝试此操作，如果要使用此部分，则此页脚仍可见：

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 10

由于未知原因，即使在iOS14之后的tableView中，我也遇到了这个问题，即使以上答案表明默认情况下将不再有多余的分隔符行。

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

your_tableView.tableFooterView = UIView()