如何去除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)
                    }
                }
            }
        }
    }
}

它絕對有效我測試過請像這樣:-)