如何在 SwiftUI 中去除 List 的左右 Padding？

Question

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

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

Answer 1

看起来

.listRowInsets

不适用于使用

List

初始化的

content

中的行。

所以这不起作用：

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

但这确实：

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

Answer 2

似乎我们可以使用

PlainListStyle

来代替

List

iOS 14

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

Answer 3

您可以在列表中更改多个间距。看看这张颜色编码的地图，然后选择适合您需求的地图：

List(1...100, id: \.self) { item in
    Text("\(item)")
        .padding() // 🟣 comment to remove PURPLE padding
        .background(Color.yellow)
        // .listRowInsets(EdgeInsets()) // 🔵 uncomment to remove BLUE inset
}
// .listStyle(.plain) // 🟢 uncomment to remove all GREEN insets all together
// .contentMargins(<#edge#>, 0, for: .scrollContent) // 🟢 uncomment to remove custom combination of GREEN insets. (Requires iOS 17)
// .listStyle(.grouped) // 🔴 uncomment to remove RED inset

Answer 4

使用此修饰符：

.listRowInsets(EdgeInsets(....))

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

设置放置在列表中时要应用于view的插图。 （强调我的）

在

List

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

view

上使用修改器才能使修改器生效。

使用示例：

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

Answer 5

修改器是

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

Answer 6

你应该打电话

.listRowInsets()

对于行，像这样：

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

Answer 7

2022，MacOS

如果其他解决方案不起作用（目前它们[对于 macOS] 不起作用），您可以使用以下针对 macOS 的 hack：

List(selection: $selectedItems) {
    // some content
}
// solution
.padding(EdgeInsets(top: -10, leading: -20, bottom: -10, trailing: -20))
.clipShape(Rectangle())

Answer 8

.listStyle(GroupedListStyle())

Answer 9

去除填充物

iOS 15、Xcode 13

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

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

注意这是一个完全不同的API。

List

和

LazyVStack

都是惰性容器，但与

List

相比，

LazyVStack

不重用单元格，当行是更复杂的视图时，这将显着改变性能。

Answer 10

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

这为我解决了：

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

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