Skip to main content

ZStack

A component that stacks children on top of each other.

component ZStack
import { ZStack, Rectangle, Frame } from ui

export var main = ZStack {
    Rectangle(color: Color(0xFF8E0000)) with {
        Frame(width: 128, height: 128)
    }

    // the second rectangle is placed on top of the one above
    Rectangle(color: Color(0xFFC62828)) with {
        Frame(width: 98, height: 98)
    }

    // the third rectangle is placed on top of the previous two
    Rectangle(color: Color(0xFFFF5F52)) with {
        Frame(width: 64, height: 64)
    }
}

ZStack Example

Constructor​

alignment: Alignment = Alignment.center​

The alignment of children that have either less width or height than the overall ZStack.

See Alignment

Layout Behavior​

The ZStack mirrors the maximum width and height of its children that have the highest priority.