SwiftUI: List Row Image

App Development
1

I looked around, and I tried various things, but can’t seem to get it right. Can anyone tell me how I can get my image in a list from being a square on the left to be the whole row width and height without the image squashing, so it basically takes the center of the image and fills the whole row without any distortion.

2

1- UIKit/Storyboard or 2- SwiftUI?

1 - UIKit/Storyboard: in the Attributes pane, locate the ‘View’ section and ‘Content Mode’ which best meets your requirements;

2- SwiftUI: Image(“yourImageNameGoesHere”)
.resizable() // this is to tell Xcode that the image needs to be resized
.scaledToFill() // choose other content modes which meet your requirements
.frame(width: 60, height: 60, alignment: .center) // change the frame size to match your list size
.clipShape(RoundedRectangle(cornerRadius: 10))

The attributes in SwiftUI are many, and are optional.

3

Hey thanks for the reply, I got that far myself too, my problem is that it’s not covering the entire row, like a background.

Here you can see the problem marked in red:

20

4

Hey Zenocode, try asking Mark Moeykens. He’s pretty deep into SwiftUI and he might know. You can grab the link to this specific post (link icon in the lower right corner) and send it to him!

1 Like
5

Check this out: https://stackoverflow.com/questions/58470619/how-to-remove-padding-on-left-and-right-of-list-in-swiftui

I’ve tried it on my list, it seems to work. BUT, I have not tried this out for different screen sizes.

6 
List{
        Image("imageName")
        .resizable()
        .aspectRatio(contentMode: .fill)
        .frame(maxWidth: .infinity, maxHeight: 60)
        .clipped()
         }
           .scaleEffect(x: 1.1, y: 1.1, anchor: .center)
7

since this works then you should just add another uiview to contain the spacer/list name and arrow

think of it as a different layer that contains your list elements

8

Did you manage to solve the problem?