Try to fix the the following code snippet to achieve the result shown on the right:

Which code snippet creates this view?

How can you control the order of views in a ZStack?

Try to fix the the following code snippet to achieve the result shown on the right:

What is the purpose of a Divider in SwiftUI?

You have an image and a text that you have to align to each other. Your task is to select the right stack for each outcome!

        
??? {
      Image(systemName: "paperclip.circle.fill")
      Text("Paperclips")
}

When should you use a VStack in SwiftUI?

How can you customize the spacing between views in a VStack?

How can you customize the alignment of views within an HStack?

Reorder the code snippets to recreate the following view:

What is the default alignment for views within an HStack in SwiftUI?

How can you center-align views within a VStack or HStack using spacers?

Try to fix the following code snippet to achieve the result shown on the right. You can use a Spacer(), select which position you would place the Spacer to achieve this:

:

ResizableImage(name: "meditation")
    .overlay {
        VStack(alignment: .leading) {
            Label("Mindfulness", systemImage: "person")
                .foregroundStyle(.mint)
                ---> A
            HStack {
                Text("13min").bold()
                  ---> B
                Text("Custom session")
                Spacer()
                Button { } label: { Text("Start") }
                    .buttonStyle(.borderedProminent)
            }
            .foregroundStyle(.white)
              ---> C
        }
        .padding(20)
    }

Try to fix the the following code snippet to achieve the result shown on the right: