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

如何在 SwiftUI 中删除列表的左右填充? 我创建的每个 List 都有单元格前面和后面的边框。

我应该添加什么修饰来删除这个?

59466 次浏览

The modifier was

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

Use this modifier:

.listRowInsets(EdgeInsets(....))

However, as stated in the documentation, the insets will be applied to the view when inside a list.

Sets the inset to be applied to the view when placed in a list. (emphasis mine)

Using this modifier on the List itself will have no effect on the views inside it. You must use the modifier on the view inside the List for the modifier to have an effect.

Example usage:

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

It looks like .listRowInsets doesn't work for rows in a List that is initialised with content.

So this doesn't work:

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

But this does:

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

Seem we can use PlainListStyle for List for iOS 14

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

You should call

.listRowInsets()

for row, like this:

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

Remove paddings

iOS 15, Xcode 13

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

This gives you complete control over the list (you can also remove separator using this code). Current implementation of List doesn't provide full control and contains some issues.

Note that this is a completely different API. Both List and LazyVStack are lazy containers, but in contrast to List, LazyVStack doesn't reuse cells, which will SIGNIFICANTLY change the performance when rows are more complex views.

The above solutions did not solve for me because my List had sections.

This solved for me:

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

In resume, you have to repeat the command for the section.

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

It definitely works I tested Please like this :-)

2022, MacOS

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