Skip to content

Row

Row is a braced layout container whose main axis is horizontal.

Row {
Image(app::images::avatar).With(Frame{.width = 40.0F, .height = 40.0F}),
Column {
Text(user_name, TextRole::Title),
Text(status, TextRole::Label),
}.With(Grow(), Spacing(2.0F)),
IconButton(app::images::more, "More actions"),
}.With(
Spacing(12.0F),
CrossAlign(CrossAxisAlignment::Center)
)

Spacing sets horizontal gaps. MainAlign distributes remaining width and CrossAlign positions or stretches children vertically. Grow(factor) lets a child consume a proportional share of remaining width.

Use Spacer() for a simple flexible empty region. Use Flow instead when a horizontal collection must wrap rather than overflow or shrink.

  • Construction: Row { children... } or an explicit child vector.
  • Layout modifiers: Spacing, MainAlign, CrossAlign, Padding, Frame.
  • Child metadata: Grow.

Read Layout fundamentals for constraints, alignment, flexible children, and the choice between Row, Flow, and scrolling.

Declared in huxerui, <huxerui/view.h>, Row accepts a child vector or braced View/Views content. It has no theme style or change event. MainAxisAlignment supplies Start, Center, End, SpaceBetween, SpaceAround, and SpaceEvenly; CrossAxisAlignment supplies Start, Center, End, and Stretch.

Grow applies to the direct child of Row. In the example, it belongs on the whole text Column so the avatar and action keep their intrinsic sizes. Multiple growing children divide remaining bounded width according to their positive factors. A nested label does not change the width allocation of its outer container merely by carrying Grow.

For unbreakable content wider than the viewport, choose explicit clipping, a horizontal ScrollView, or wrapping with Flow. Row is a one-line layout, not an automatic responsive navigation policy. Use stable keys when changing the order of stateful children.