Qué es ZStack

El componente ZStack permite apilar vistas en el eje Z, lo que da resultado que las vistas se solapen una sobre otra. Por ejemplo, es muy común para mostrar información encima de una imagen. No tiene equivalencia con ningún componente de UIKit.

Aquí podéis consultar la documentación oficial

Para crear el componente solo necesitaremos embeber en su ViewBuilder las vistas que podrá mostrar:

ZStack {
    Color.red
        .opacity(0.3)
        .frame(width: 200, height: 200)
    Color.blue
        .opacity(0.8)
        .frame(width: 100, height: 100)
}

El ‘inicializador’ tiene otro parámetro que es de utilidad:

ZStack(alignment: Alignment(horizontal: .trailing, vertical: .top)) {
    Color.red
        .opacity(0.3)
        .frame(width: 200, height: 200)
    Color.blue
        .opacity(0.8)
        .frame(width: 100, height: 100)
}

• alignment: permite indicar la alineación de las vistas que contiene, tanto en la vertical como en la horizontal. Las opciones disponibles están definidas en Alignment.

Este ZStack no tiene el modificado spacing (como VStack y HStack). Para mover las vistas dentro del ZStack se deberá usar el modificador offset de cada componente.

En el siguiente ejemplo se posiciona un botón sobre una imagen con efecto blur:

struct ContentView: View {
    var body: some View {
        ZStack(alignment: Alignment(horizontal: .center, vertical: .center)) {
            Image("sdos_office")
                .resizable()
                .scaledToFill()
                .frame(height: 200)
                .blur(radius: 10)
                .clipped()
            Button(action: {
                //Do something
            }) {
                Text("Subscribe to see all the content")
                    .foregroundColor(.white)
                    .padding()
            }
            .background(Color.blue.opacity(0.8))
            .clipShape(RoundedRectangle(cornerRadius: 20))
        }
    }
}

Modificadores comunes para ZStack

El componente ZStack comparte los mismos métodos de personalización que el componente View y pueden ser consultados en el siguiente enlace.

Ejemplo

Puedes encontrar este ejemplo en https://github.com/SDOSLabs/SwiftUI-Test bajo el apartado ZStack.

Rafael Fernández,
iOS Tech Lider