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

Question

如何在SwiftUI中删除列表的左右填充？我创建的每个列表都有一个单元格的开头和结尾的边界。

我应该添加什么修饰符以删除此内容？

Answer 1

它看起来.listRowInsets不适用于 aList中初始化为 的行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 GREEN inset
// .listStyle(.grouped) //  uncomment to remove RED inset

_{RTL-演示图像}

Answer 4

使用这个修饰符：

.listRowInsets(EdgeInsets(....))

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

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

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

用法示例：

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

Answer 5

你应该打电话

.listRowInsets()

对于行，像这样：

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

Answer 6

.listStyle(GroupedListStyle())

Answer 7

2022 年，Mac 操作系统

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

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

Answer 8

修饰符为

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

Answer 9

删除填充

iOS 14.2，Xcode 12.2

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

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