MasonryLayout

MasonryLayout — a variable-height grid that packs children into the shortest column (Pinterest-style).

Public functions

MasonryLayout

Detailed description

Each child is measured at the shared column width and placed into whichever column currently has the lowest accumulated height. Ties between equal-height columns are broken by column index (leftmost wins). All columns share the same width; column and item spacing are independently configurable. RTL layout mirrors the column order so the first logical child still goes to the leading edge.

#![allow(unused)]
fn main() {
use teksilo_widgets::primitives::masonry::MasonryLayout;
use teksilo_widgets::primitives::TextWidget;
use teksilo_i18n::lit;
let _grid = MasonryLayout::new(3)
    .column_spacing(8.0)
    .item_spacing(8.0)
    .child(TextWidget::new(lit!("Tall card")))
    .child(TextWidget::new(lit!("Short card")))
    .child(TextWidget::new(lit!("Another card")));
}

Density

The picture above is the widget at TargetDensity::Compact, the mouse-and-keyboard ladder. Below is the same subject on the same canvas with only the ladder changed, so what moves is the density and nothing else — where the subject no longer fits, that is what the denser targets cost it at that size. See docs/density-and-targets.md.

Touch

API reference

📖 Full rustdoc API for this module

pub struct MasonryLayout

Import: use teksilo::widgets::MasonryLayout;

A masonry (Pinterest-style) layout that packs children into the shortest column.

Children are placed left-to-right into whichever column is currently shortest. All children receive the same column width; their heights are determined by each child's intrinsic size at that width.

┌──────┐ ┌──────┐ ┌──────┐
│  A   │ │  B   │ │  C   │
│      │ │      │ └──────┘
│      │ └──────┘ ┌──────┐
└──────┘ ┌──────┐ │  F   │
┌──────┐ │  E   │ │      │
│  D   │ └──────┘ └──────┘
└──────┘

#![allow(unused)]
fn main() {
pub struct MasonryLayout { /* fields */ }
}

Methods

pub fn new(column_count: usize) -> Self

Create a masonry layout with the given number of columns.

The count is clamped to a minimum of 1.

pub fn column_spacing(mut self, spacing: f32) -> Self (default: 0.0)

Horizontal gap between columns.

pub fn item_spacing(mut self, spacing: f32) -> Self (default: 0.0)

Vertical gap between items within the same column.

pub fn child(mut self, widget: impl teksilo_core::IntoTeksiChild) -> Self

Add an inline child widget (deferred insertion).

pub fn children( mut self, iter: impl IntoIterator<Item = impl teksilo_core::IntoTeksiChild>, ) -> Self

Add multiple inline children from an iterator.

pub fn child_opt(mut self, widget: Option<impl teksilo_core::IntoTeksiChild>) -> Self

Conditionally add a child. No-op if None.