Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

The Stack Widget

The stack widget layers children on top of each other. The first child is drawn at the bottom, and each subsequent child is drawn on top. This is useful for overlays, watermarks, or layered visual effects.

Interface

val stack: fn(
  ?#width: &Length,
  ?#height: &Length,
  &Array<Widget>
) -> Widget

Parameters

  • width — stack width
  • height — stack height

The positional argument is a reference to an array of child widgets. Children are drawn in order, with later children appearing on top of earlier ones.

Examples

use gui;
use gui::text;
use gui::stack;
use gui::container;
use gui::column;
mod icon;

[&window(
    #icon: &icon::icon,
    #title: &"Stack Widget",
    &column(
        #spacing: &15.0,
        #padding: &`All(30.0),
        #width: &`Fill,
        #height: &`Fill,
        &[
            text(#size: &24.0, &"Stack Demo"),
            stack(
                #width: &`Fill,
                #height: &`Fill,
                &[
                    container(
                        #width: &`Fill,
                        #height: &`Fill,
                        #halign: &`Center,
                        #valign: &`Center,
                        &text(#size: &64.0, #color: &color(#r: 0.3, #g: 0.3, #b: 0.3)$, &"Background")
                    ),
                    container(
                        #width: &`Fill,
                        #height: &`Fill,
                        #halign: &`Center,
                        #valign: &`Center,
                        &text(#size: &32.0, &"Foreground")
                    )
                ]
            )
        ]
    )
)]

Stack Widget

See Also

  • Container — for positioning content within stack layers
  • Column — for non-overlapping vertical layout