How to remove the left and right Padding of a List in SwiftUI?
SwiftSwiftuiSwift Problem Overview
How to remove the left and right Padding of a List in SwiftUI? Every List i create has borders to the leading and trailing of a cell.
What modifier should I add to remove this?
Swift Solutions
Solution 1 - Swift
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())
}
}
Solution 2 - Swift
Seem we can use PlainListStyle
for List
for iOS 14
List {
Text("Row")
}
.listStyle(PlainListStyle())
Solution 3 - Swift
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))
}
Solution 4 - Swift
The modifier was
.listRowInsets(EdgeInsets(......))
Solution 5 - Swift
.listStyle(GroupedListStyle())
Solution 6 - Swift
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.
Solution 7 - Swift
You should call
> .listRowInsets()
for row, like this:
List(items) {
YoursRowView()
.listRowInsets(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
}
Solution 8 - Swift
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.
Solution 9 - Swift
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 :-)