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

Posted 2023-02-23

【中文标题】如何在 SwiftUI 中删除列表的左右填充？

【英文标题】：How to remove the left and right Padding of a List in SwiftUI?

【发布时间】：2019-06-15 20:51:13

【问题描述】：

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

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

【参考方案1】：

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

所以这不起作用：

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 15、Xcode 13

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 不重用单元格，当行是更复杂的视图时，这将显着改变性能。

要注意的另一件事是，如果您使用ScrollView 而不是List，那么您将无法轻松使用列表提供的滑动删除和编辑模式功能。你当然可以自己做，但那是更多的工作。

【参考方案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())
    

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

【参考方案9】：

import SwiftUI

struct ContentView: View 
    
    enum Flavor: String, CaseIterable, Identifiable 
        var id: String  self.rawValue 
        case sample1, sample2, sample3
    
    var body: some View 
        VStack 
            GeometryReader  geometry in
                List 
                    ForEach(Flavor.allCases, id: \.self)  flavour in
                        Text(flavour.rawValue)
                            .frame(width: geometry.size.width,
                                   alignment: .leading)
                            .listRowInsets(.init())
                            .border(Color.red, width: 1)
                    
                
            
        
    

我测试过它确实有效 请喜欢这个:-)