Stack
The Stack widget is a layout container that stacks child widgets on top of each other in the same position.
Use it to layer elements over a background, or to place an element at an absolute position.
Definition and role
The Stack widget layers multiple child widgets along the z-axis (front to back). Children with no position are aligned on top of each other according to alignment. Give an individual child an absolute position — top, left, right, or bottom — and it stays pinned there.
- Category: Layouts
- Dropping it from the palette creates a 200×200 area by default.
Features
| Feature | Description |
|---|---|
| Layer children | Stacks multiple child widgets in the same area in z-order. |
| Absolute positioning | Set top, left, right, and bottom values on an individual child to pin it exactly where you want. |
| Alignment reference | Aligns children that have no position according to alignment. |
| Size fitting | fit sets how children without a position are sized to the Stack. |
| Overflow handling | clipBehavior sets how children that extend past the Stack area are clipped. |
How to use
- Open the Layouts category in the left widget palette.
- Drag and drop the Stack item onto the canvas.
- Drag the child widgets you want to layer into the Stack.
- Select a child and give it an absolute position (top, left, right, bottom), or set the alignment reference with
alignment. - Adjust the
fitandclipBehaviorvalues if needed.
Properties
| Property | Description | Default | Value / type |
|---|---|---|---|
alignment | Alignment reference for children with no position, and for those with only a partial position | Top-left (topStart) | Alignment value |
textDirection | Text direction used to calculate alignment and position | Not set | rtl, ltr |
fit | How children without a position are sized to the Stack | loose | loose, expand, passthrough |
clipBehavior | How children that extend past the Stack area are clipped | hardEdge | none, hardEdge, antiAlias, antiAliasWithSaveLayer |
Notes and tips
Children with no position are layered according to alignment. To place just one child exactly where you want, give that child an absolute position — top, left, right, or bottom.
With fit set to expand, children without a position stretch to the full size of the Stack. If a child looks bigger than you intended, check the fit value.
Learn more
For the full set of Widget Control members (Property, Method, Event) you can script on this widget, visit Stack Widget Control.