Spec: ZStack

"A view that overlays its subviews, aligning them in both axes."

https://developer.apple.com/documentation/swiftui/zstack/

Layout

TODO:

Typography

TODO:

Accessibility

TODO:

Localization

TODO:

Technical Design

/// A layout widget that stacks its [children] on top of each other, allowing for
/// any horizontal and vertical positioning within the bounded space.
///
/// You can think of a `ZStack` like a stack of papers that's growing out of the
/// device screen.
class ZStack extends StatelessWidget {
    const ZStack(this.children, {
      this.alignment = Alignment.center,
    });

    /// The vertical and horizontal alignment of the [children] in this [ZStack].
    final Alignment alignment;
    
    /// Child widgets, which are displayed horizontally in a row-style layout.
    final List<Widget> children;
}

// Note: Swift UI example docs use the offset() modifier to shift children
// within a VStack. It doesn't look like there's an absolute positioning
// mechanism associated with VStack. The offset() modifier works like a Transform
// widget - it only changes the paint location, not the size and location of the
// reported bounds.
class Offset extends StatelessWidget {
    // Pretty much just like Transform but with `x` and `y` properties.
}

enum Alignment {
    topLeading(HorizontalAlignment.leading, VerticalAlignment.top),
    top(HorizontalAlignment.center, VerticalAlignment.top),
    topTrailing(HorizontalAlignment.trailing, VerticalAlignment.top),
    leading(HorizontalAlignment.leading, VerticalAlignment.center),
    center(HorizontalAlignment.center, VerticalAlignment.center),
    trailing(HorizontalAlignment.trailing, VerticalAlignment.center),
    bottomLeading(HorizontalAlignment.leading, VerticalAlignment.bottom),
    bottom(HorizontalAlignment.center, VerticalAlignment.bottom),
    bottomTrailing(HorizontalAlignment.trailing, VerticalAlignment.bottom),
    leadingFirstTextBaseline(HorizontalAlignment.leading, VerticalAlignment.firstTextBaseline),
    centerFirstTextBaseline(HorizontalAlignment.center, VerticalAlignment.firstTextBaseline),
    trailingFirstTextBaseline(HorizontalAlignment.trailing, VerticalAlignment.firstTextBaseline),
    leadingLastTextBaseline(HorizontalAlignment.leading, VerticalAlignment.lastTextBaseline),
    centerLastTextBaseline(HorizontalAlignment.center, VerticalAlignment.lastTextBaseline),
    trailingLastTextBaseline(HorizontalAlignment.trailing, VerticalAlignment.lastTextBaseline);
    
    const Alignment(this.horizontal, this.vertical);
    
    final HorizontalAlignment horizontal;
    final VerticalAlignment vertical;
}