If you are familiar with Photoshop and how layers work then that might be a good analogy. If you aren’t familiar with it then the best way to explain it is to look at the purpose of each of those Views.
- VStack - arranges objects one above each other
- HStack - arranges objects beside each other with the listed order of the objects presented on screen from left to right
- ZStack - arranges objects on top of each other with the listed order being that the first object is on the bottom and subsequent objects on top of each other.
So with that in mind if you want two ZStacks to appear on the screen (one above the other) then you have to have both of them in a VStack.
Inside each VStack you have an Image listed first so that is in the background with a VStack sitting on top of the Image with two Text objects one above each other.
.background(Color.black.opacity(0.7)) does not actually make the image in the background blurry. All it is doing is shading the background so perhaps that is giving the illusion that it is blurred. If you look at the rendering in Preview mode and zoom in to 400% I think you will see that it is not blurry but just darker which is the intent.
.cornerRadius(10) modifier is applied to the VStack element so it applies the radius to the View as a whole rather than the individual elements in the View.
Hope that makes sense