VStack

VStack is the convenience version of Column.

It is useful when the defaults of Column already match the layout you want and all you need is a short way to provide children and spacing.

Use VStack for simple grouped sections. Do not use it when you need richer Column features such as custom alignment, wrapping, flex tuning, or semantics.

Example

use fission::prelude::*;

let widget: Widget = VStack {
    spacing: Some(12.0),
    children: vec![
        Text::new("Title").into(),
        Text::new("Body copy").into(),
    ],
}
.into();

Field table

Field	Type	Meaning	Notes / default behavior
children	Vec<Widget>	Child widgets laid out vertically.	Defaults to an empty list.
spacing	Option<f32>	Gap between children.	Defaults to None. Maps to Column.gap.

Behavior and advice

VStack simply builds a Column with the provided children and spacing. It is intentionally small. That is its strength.

If you need to change the cross-axis alignment, justify content, wrapping behavior, or semantics, switch to Column rather than trying to stretch the meaning of VStack.

Production checklist

For VStack, review the fields that change behavior before treating the widget as finished: children, spacing. The goal is to make the product rule visible in state and actions, not hidden inside ad-hoc construction code.

•

If this widget appears inside an interactive flow, keep the surrounding action binding in the parent component and test that the flow still has one clear reducer path.

•

When child widgets are generated from data, give reordered or filtered rows an explicit WidgetId so retained local state and scroll behavior do not drift between items.

•

Check the semantics tree for the user-facing label or role that makes this widget understandable without relying only on pixels.

•

Add at least one component or harness test that confirms the visible text, semantic role, action dispatch, and layout constraint that matter for this widget in context.

If a screen starts repeating the same VStack setup, extract a named component around this widget. That keeps the reference API small while making product code easier to read and safer for generated code to copy.

Column, HStack, and Scroll.