Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove default padding from List in SwiftUI

Tags:

swift

swiftui

When using ScrollView the views inside it are spread across the whole screen width by default, but when using List, there is a padding on the sides. Is there a way to get rid of this padding?

like image 672
eja08 Avatar asked Mar 29 '20 01:03

eja08


People also ask

What is the default padding in SwiftUI?

If you set the value to nil , SwiftUI uses a platform-specific default amount. The default value of this parameter is nil .

What is the default padding value?

Padding values are set using lengths or percentages, and cannot accept negative values. The initial, or default, value for all padding properties is 0 .

What is padding in SwiftUI?

SwiftUI lets us set individual padding around views using the padding() modifier, causing views to be placed further away from their neighbors. If you use this with no parameters you'll get system-default padding on all sides, like this: VStack { Text("Using") Text("SwiftUI") .

How do I create a custom list in SwiftUI?

To begin, create a SwiftUI Xcode project, and create a struct , namely, Data . Let's get back in our ContentView. swift and populate some values into this struct . Now, inside your view, create a List, and use ForEach to add and see all your data in list form.


2 Answers

To achieve this you need to use ForEach inside List combined with .listRowInsets as in example below

demo

struct Demo: View {
    var colors: [Color] = [.red, .blue, .yellow]
    var body: some View {
        List {
            ForEach(colors, id: \.self) { color in
                color
            }.listRowInsets(EdgeInsets())
        }
        // Update: Different iOS versions have different 
        // default List styles, so set explicit one if needed
        .listStyle(PlainListStyle())
    }
}

backup

like image 79
Asperi Avatar answered Sep 28 '22 07:09

Asperi


For iOS 15.0+, you may try listStyle modifier and set it as plain.

var body: some View {
        List {
            // some rows
        }
        .listStyle(.plain)
    }
like image 33
JT501 Avatar answered Sep 28 '22 07:09

JT501