The Grid Widget

A layout container that arranges child widgets in a grid with a fixed number of columns. Items wrap to the next row automatically.

Interface

use super::{Length, Widget};
/// `Fixed(n) is exactly n columns; `Fluid(max_width) is as many columns as
/// needed so that none is wider than max_width pixels
type GridColumns = [`Fixed(i64), `Fluid(f64)];
type GridHeight = [`AspectRatio(f64), `EvenlyDistribute(Length)];

type Grid = {
  children: &Array<Widget>,
  spacing: &f64,
  columns: &GridColumns,
  width: &[f64, null],
  height: &GridHeight
};

val grid: fn(
  ?#spacing: &f64,
  ?#columns: &GridColumns,
  ?#width: &[f64, null],
  ?#height: &GridHeight,
  children: &Array<Widget>
) -> Widget

Parameters

• #spacing – Space in pixels between grid cells, applied both horizontally and vertically. Defaults to 0.0.
• #columns – How columns are determined. `Fixed(n) uses exactly n columns. `Fluid(max_width) uses as many columns as needed so that none is wider than max_width pixels. Defaults to `Fixed(3).
• #width – Total width of the grid in pixels, or null to use the available space. Defaults to null.
• #height – How row heights are determined. `AspectRatio(ratio) sets each cell’s height relative to its width (e.g. 1.0 for square cells). `EvenlyDistribute(len) divides the given Length evenly among all rows. Defaults to `AspectRatio(1.0).
• positional &Array<Widget> – The child widgets to arrange in the grid. They fill left-to-right, top-to-bottom.

Examples

Six Items in Three Columns

use gui::{window, column::column, container::container, grid::grid, text::text};
mod icon;

let item = |label| container(
    #width: &`Fill,
    #halign: &`Center,
    #valign: &`Center,
    #padding: &`All(20.0),
    &text(#size: &16.0, &label)
);

let col = column(
    #spacing: &20.0,
    #padding: &`All(30.0),
    #width: &`Fill,
    &[
        text(#size: &24.0, &"Grid Demo"),
        grid(
            #columns: &`Fixed(3),
            #spacing: &10.0,
            #width: &800.0,
            &[
                item("One"),
                item("Two"),
                item("Three"),
                item("Four"),
                item("Five"),
                item("Six")
            ]
        )
    ]
);

[&window(#icon: &icon::icon, #title: &"Grid Widget", &col)]

See Also

• column – single-column vertical layout
• row – single-row horizontal layout
• types – for Length and other shared types