Lesson 4 Challange

App Development
#1

Great day everyone! I trust that you and Loved ones are all Happy, Healthy, and Well.

I can’t figure out how to complete this challenge. The Spacer() isn’t spacing the two photos evenly apart. When I add the “london” photo it just pops right on top of the “toronto” photo.

Help me you must. Please. Thanks!

Patrikus
Abundance
Love+Peace+Health

#2

@PMAX888

Hi Patrikus,

So how this works is that you have two images that are to sit one above each other therefore in order to do that you have to place them both in a VStack.

Images are push out Views so they take up as much space as they can.

so you have this kind of a initial structure

VStack {
    Image()
    Image()
}

On top of each image you have to place some text so in order to do that the image itself needs to be placed inside a ZStack. A ZStack allows layering.

So with each of the images inside a ZStack you have this kind of structure

VStack {
    ZStack {
        Image()
        Text()
    }
    ZStack {
        Image()
        Text()
    }
}

There is a fair bit more to it than that but the above should give you a bit of a pointer.

Also remember that the order in which you place objects inside a ZStack matters. The first object is on the bottom and the next is on top of that and the next on top of that again and so on.

#3

Thanks Chris!

I did it! +1Power - Developer :sunglasses:

#4

I completed War Challenge UI on my own! … yeah!
Thanks again for your help with the other challenge which sure helped me figure out this one!

+2 Power - Developer

#5

Well done. Glad to help.

By the way, swearing on this forum is frowned upon so I have edited your post and removed the offending word.