SwiftUI Widget - ZStack

The function of ZStack is to layer the widget on top of each other. Widget stacked on top cover the visible portion of the widget stacked below and those widgets can be aligned in both axes.

How to layer a text on a shape

Let’s look at a code snippet

struct ZStackView: View {
    var body: some View {
        ZStack() {
            Circle()
            .frame(width: 100, height: 100)
                                  .foregroundColor(.green)

            Text("Hello")
                .foregroundColor(.white)
        }
    }
}

In this example, we layer a Text - ‘Hello’ on a Circle. Becuase the default alignment is center, you can see the Text in center of the Circle.

How to align those widgets in ZStack

You can use the ‘alignment’ property to do it. such as:

struct ZStackView: View {
    var body: some View {
        ZStack(alignment: .bottomLeading) {
            Circle()
            .frame(width: 100, height: 100)
                                  .foregroundColor(.green)

            Text("Hello")
                .foregroundColor(.white)
        }
    }
}

This will align both widgets to the lower-left corner. We didn’t set the frame for the entire ZStack, ZStack will use the frame of the circle, So we can only see that text is aligned.

To see the both widgets(Circle and Text) are aligned. We change the code as:

struct ZStackView: View {
    var body: some View {
        ZStack(alignment: .bottomLeading) {
            Circle()
            .frame(width: 100, height: 100)
                                  .foregroundColor(.green)

            Text("Hello")
                .foregroundColor(.white)
        }
        .frame(width: 300, height: 300, alignment: .bottomLeading)
        .background(Color.gray)
    }
}

Now you can see the both widgets are aligned to bottom left corner.

About more detail of ZStack widget, you can see the Official Documentation