Expand description
ColumnFlow — flows children into as many columns as the width affords,
re-partitioning every child when a column is gained or lost.
The newspaper / CSS multi-column model: content runs down column 0, then
down column 1, and so on. The column count is derived from the available
width and min_column_width — when the
width no longer affords N columns the layout drops to N−1 and all
children are re-partitioned across the survivors. Children are atomic: one
child never straddles a column boundary.
Pair it with a ScrollArea for vertical
overflow — ColumnFlow reports its true content height (the tallest
column), so the scroll extent is correct.
let _view = ScrollArea::new().child(
ColumnFlow::new()
.min_column_width(240.0)
.max_columns(4)
.column_spacing(16.0)
.item_spacing(12.0)
.child(TextWidget::new(lit!("First")))
.child(TextWidget::new(lit!("Second")))
.child(TextWidget::new(lit!("Third"))),
);§Reading order
Children are distributed as contiguous runs in source order — column 0
takes children 0..i, column 1 takes i..j. So source order, visual
reading order, and focus order are the same thing, at every column count.
This is why ColumnFlow does not reuse
MasonryLayout’s shortest-column
packing, which interleaves children and would divorce the visual order from
the source order.
§Accessibility
By default ColumnFlow emits a bare Role::GenericContainer carrying no
properties, which the accessibility walker prunes, promoting the children
to its parent in source order. That is the correct outcome for a layout
primitive: it contributes geometry, not semantics, and the reading order is
already right. Add semantics from the outside with .access_role(..) /
.access_label(..), or opt into list semantics with
semantic_list.
§Relationship to CSS multi-column
Close, but not identical. CSS column-fill: balance balances content within
a column height it computes from a bounded block size; ColumnFlow derives
the column count from the width and lets the height run free (a
ScrollArea absorbs it). No CSS column-fill mode does that, so don’t read
this as a CSS multicol port.
Structs§
- Column
Flow - A layout that flows its children into as many columns as the available width affords, re-partitioning every child when a column is gained or lost.