如何在 SwiftUI 中删除列表的左右填充？答案

【问题标题】：How to remove the left and right Padding of a List in SwiftUI?如何在 SwiftUI 中删除列表的左右填充？
【发布时间】：2019-10-30 00:43:36
【问题描述】：

SwiftUI中如何去掉List的左右Padding？我创建的每个列表都有单元格前导和尾随的边框。

我应该添加什么修饰符来删除它？

【问题讨论】：

标签： swift swiftui

【解决方案1】：

看起来.listRowInsets 不适用于使用content 初始化的List 中的行。

所以这不起作用：

List(items) { item in
    ItemRow(item: item)
        .listRowInsets(EdgeInsets())
}

但这确实：

List {
    ForEach(items) { item in
        ItemRow(item: item)
            .listRowInsets(EdgeInsets())
    }
}

【讨论】：

带有字符串数组的 ForEach 给了我以下错误。 “无法将 '[String]' 类型的值转换为预期的参数类型 'Range'”
我还发现将 .listRowInsets(_) 修饰符应用于列表中的部分可以达到预期的结果。
更可取的是下面列出的答案.listStyle(GroupedListStyle())，它会导致所有 Section 和 Rows 整齐地缩进。
不确定背后的逻辑是什么，但它对我有用！
值得注意的是，列表项还有一个默认的最小高度。如果您的视图小于此数量，您将看到明显的插图，尽管这些变化仍然存在。考虑：.environment( \.defaultMinListRowHeight, 0 ) 在List 上。

【解决方案2】：

看来我们可以将PlainListStyle 用于List 用于iOS 14

List {
    Text("Row")
}
.listStyle(PlainListStyle())

【讨论】：

@Marcus 因为 Grouped 是 List 的预定义样式，它添加了插图

【解决方案3】：

使用这个修饰符：

.listRowInsets(EdgeInsets(....))

但是，正如documentation 中所述，插入将应用于视图在列表中时。

设置插入列表时应用到视图。（强调我的）

在List 本身上使用此修饰符不会对其内部的视图产生影响。您必须在 List 内的 view 上使用修饰符才能使修饰符生效。

示例用法：

List {
    Text("test")
        .listRowInsets(EdgeInsets(top: -20, leading: -20, bottom: -20, trailing: -20))
}

【讨论】：

看来你搞错了。文档说，插图将应用于列表内的视图。它没有指定应该在 List 中的视图上使用修饰符。
@FelixMarianayagam 没有什么能阻止您对List 本身使用修饰符，但它不会对列表的项目产生任何影响。如文档所述，您需要将修饰符应用于 列表内 的视图。我已经更新了我的答案以更清楚。

【解决方案4】：

修饰符是

.listRowInsets(EdgeInsets(......))

【讨论】：

现在称为“listRowInsets”。
对我不起作用。将此应用于列表或行视图不起作用。
我已更改正确答案。看来我的旧 SwiftUI 已经更新了。

【解决方案5】：

删除填充

iOS 14.2、Xcode 12.2

ScrollView {
    LazyVStack {
        ForEach(viewModel.portfolios) { portfolio in
            PortfolioRow(item: portfolio)
        }
    }
}

这使您可以完全控制列表（您也可以使用此代码删除分隔符）。 List 的当前实现不提供完全控制并且包含一些问题。

注意这是一个完全不同的 API。 List 和 LazyVStack 都是惰性容器，但与 List 相比，LazyVStack 不重用单元格，当行是更复杂的视图时，这将显着改变性能。

【讨论】：

这是 iOS14.2 中唯一适合我的解决方案。我在简单示例中的所有可能位置尝试了.listStyle(...) 和.listRowInsets(...) 建议，并且都没有删除前导空格
如果列表发生变化，这会破坏滚动位置
请注意，这是一个完全不同的 API。 List 和 LazyVStack 都是惰性容器，但与 List 相比，LazyVStack 不重用单元格，当行是更复杂的视图时，这将显着改变性能。

【解决方案6】：

.listStyle(GroupedListStyle())

【讨论】：

为什么你推荐这个而不是以前的答案提出的.listRowInsets() 方法？与以前的方法相比，它有什么优势吗？
虽然这段代码可能会解决问题，但一个好的答案还应该解释代码的什么以及它如何提供帮助。
虽然答案质量很差，但这是正确答案。它将 Sections 和 Rows 扩展到全宽。
holyyyy 抽烟！我花了 4 个多小时来解决这个问题，这行代码解决了所有问题！你摇滚

【解决方案7】：

你应该打电话

.listRowInsets()

对于行，像这样：

List(items) {
            YoursRowView()
                .listRowInsets(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
        }

【讨论】：

【解决方案8】：

上述解决方案没有解决我的问题，因为我的列表有部分。

这为我解决了：

List {
    ForEach(years, id:\.self) { year in
        Section(header: SectionHeader(year)) {
            VStack(alignment:.leading) {
                ForEach(cars[year]!, id:\.self) { car in
                    ListItem(car)
                        .frame(width: UIScreen.main.bounds.size.width,
                               alignment: .center)
                        .listRowInsets(.init())
                }
            }
        }
        .frame(width: UIScreen.main.bounds.size.width,
               alignment: .center)
        .listRowInsets(.init())
        .listStyle(GroupedListStyle())
    }
}

在简历中，您必须重复该部分的命令。

【讨论】：