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

Question

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

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

Answer 1

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

所以这不起作用：

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

但这确实：

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

Answer 2

似乎我们可以将PlainListStyle用于iOS 14 的List

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

Answer 3

修改器是

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

Answer 4

使用这个修饰符：

.listRowInsets(EdgeInsets(....))

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

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

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

用法示例：

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

Answer 5

删除填充

iOS 14.2，Xcode 12.2

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

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

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

Answer 6

.listStyle(GroupedListStyle())

Answer 7

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

这为我解决了：

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

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

Answer 8

你应该打电话

.listRowInsets()

对于行，像这样：

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

Answer 9

2022 年，MacOS

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

Answer 10

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

它绝对有效我测试过请像这样:-)