CODEWITHSUNDEEP
swiftswiftui
Mattis Schulte
Mattis Schulte

Reputation: 699

SwiftUI: How can I make an image flush with the edges of the screen in a List?

I would like to make an image in a list flush with the edge of the screen, but if add .listRowInsets(EdgeInsets()) to the Image nothing happens. And if I add the same code to the VStack, the formatting of the list is destroyed.

List {
    ForEach(users, id: \.id) { User in
        VStack(alignment: .leading) {
            Image(User.image)
                .resizable()
                .scaledToFill()
            Text(User.name).font(.body)
        }
    }
} .listStyle(GroupedListStyle())

Upvotes: 4

Views: 1444

Answers (1)

LuLuGaGa
LuLuGaGa

Reputation: 14388

The reason you don't see your images drawn edge to edge is because the List has a padding applied to it by default. There are two possible approaches to this:

First one. If your list of users is not very big you can place your ForEach inside a ScrollView which has no padding applied by default. Please note that it is very inefficient for large lists:

ScrollView {
    ForEach(users, id: \.id) { user in
        VStack(alignment: .leading) {
            Image(user.image)
                .resizable()
                .scaledToFill()
            Text(user.image)
        }
    }
}

The second approach is a bit hacky. You can apply negative padding to your Image to extended it all the way to the edges:

List {
    ForEach(users, id: \.id { user in
        VStack(alignment: .leading) {
            Image(user.image)
                .resizable()
                .scaledToFill()
                .padding([.leading, .trailing], -16.0)
            Text(user.name)
        }
    }
}

Also worth mentioning that if you declare your User type as Identifiable:

extension User: Identifiable {}

You will be able to declare your ForEach in a simpler way like this:

ForEach(users)

Upvotes: 5

Related Questions