Row

Fission

Product

▾

Setup

›

›

Row is the main horizontal layout primitive in Fission.

It lays children out left to right, with control over gap, wrapping, flex behavior, distribution, and optional semantics. Toolbars, inline forms, status bars, action rows, and card footers are all natural Row use cases.

Use Row when sibling order flows horizontally. Do not use it for vertical sections or large list virtualization. Those cases belong to Column and LazyColumn.

Example

use fission::prelude::*;
use fission::op::AlignItems;

let widget: Widget = Row {
    gap: Some(10.0),
    align_items: AlignItems::Center,
    children: vec![
        Text::new("Status").into(),
        Text::new("Connected").into(),
    ],
    ..Default::default()
}
.into();

Field table

Field	Type	Meaning	Notes / default behavior
id	Option<WidgetId>	Stable widget identity.	Defaults to None.
children	Vec<Widget>	Child widgets laid out from left to right.	Defaults to an empty list.
semantics	Option<Semantics>	Optional accessibility semantics wrapper.	When present, the lowered row is wrapped in a semantics node.
flex_grow	f32	How much extra space the row absorbs from its parent.	Defaults to 0.0.
flex_shrink	f32	How much the row may shrink when space is tight.	Defaults to 1.0.
gap	Option<f32>	Horizontal spacing between children.	Defaults to None.
wrap	FlexWrap	Whether children wrap onto another line.	Defaults to FlexWrap::NoWrap.
align_items	AlignItems	Cross-axis alignment, which is vertical in a row.	Defaults to AlignItems::Center.
justify_content	JustifyContent	Main-axis distribution, which is horizontal in a row.	Defaults to JustifyContent::Start.

Layout behavior

Row lowers to a horizontal flex layout. That means justify_content controls horizontal distribution and align_items controls vertical placement of each child.

When content should wrap onto more than one line, Row can do that by setting wrap, but once the layout starts to behave like a responsive flow of many items, Wrap or SimpleGrid may read more clearly.

Specific advice

Use gap for ordinary spacing and Spacer when one child should push the next child away by absorbing remaining space. That distinction makes rows easier to read.

If you only need a shorter helper surface for a simple horizontal group, use HStack.

Production checklist

For Row, review the fields that change behavior before treating the widget as finished: id, children, semantics, flex_grow, flex_shrink, gap. 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.

•

Set id only when identity must be stable across filtering, reordering, diagnostics, or tests; otherwise let Fission derive identity from structure.

•

Use semantics when visible content alone is not enough for assistive technology, especially for icon-only controls or custom surfaces.

•

Prefer parent layout and design-system sizing first; use explicit size or spacing fields when the product layout requires that constraint on this widget specifically.

•

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 Row 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, Wrap, and Spacer.