SwiftUI Image in ZStack not aligning to bottom of screen-CodePudding

I have this code

struct ContentView: View {
    var body: some View {
        ZStack(alignment:.bottom) {
            Image("login-devices-mobile")
                .resizable()
                .scaledToFit()
            
        }.padding(0.0).background(Image("login-background").aspectRatio(contentMode: ContentMode.fill))
    }
}

which I am trying to display an image on the bottom of the screen. However when I run the preview. It still shows in the middle.

Any tips on anything I can do differently to align the image on the bottom of the screen?

CodePudding user response：

I assume you wanted this

ZStack(alignment:.bottom) {
    Image("login-devices-mobile")
        .resizable()
        .scaledToFit()
    
}
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom) // << here !!
.background(Image("login-background").aspectRatio(contentMode: ContentMode.fill))

CodePudding user response：

You can do something as -

struct ContentView: View {
var body: some View {
    ZStack() {
        Spacer() // Add these....
        Image("login-devices-mobile")
            .resizable()
            .scaledToFit()
        
    }.padding(0.0).background(Image("login-background").aspectRatio(contentMode: ContentMode.fill))
}

}

Hope it helped.

CodePudding user response：

Wrapping the image in a VStack should do the trick:

struct ContentView: View {
    var body: some View {
        ZStack() {
            VStack {
                Spacer() 
                Image("login-devices-mobile")
                    .resizable()
                    .scaledToFit()
            }
        }.padding(0.0).background(Image("login-background").aspectRatio(contentMode: ContentMode.fill))
        
    }
}