Iced-grid

grid, this is a grid wrapper for iced

This crate provides a wrapper around the Column widget. This makes it wasy to manage a grid of cells hopefully.

With this you can customize the dimentions, you can customize the gutter spacing, the padding, and also the individual cell styles

The modules

Cell struct represents a single cell in the grid. It stores an Element which is just the content of a cell, and the Style which pertains to a Cell.

The methods

-From<E> for Cell<'a, M, T, R>: Converts an Element into a Cell. The style of the Cell will be set to its defult type

style this will allow you to set a custom style for an indiviual cell

Example

let cell = Cell::from(Text::new("Hello"));
let styled_cell = cell.style(Style::default());

How and what is Factory

For the Factory struct it is used to make grid cells. With this you can configure it to make cells with some default or custom style

Methods

from_element: This will make a new factory from just an Element and this will use the default style

from_element_and_style: This will create a factory from an Element and an specific style.

from_factory: This will create a factorty from the provided function that outputs a Cell.

Example

let factory = Factory::from_element_and_style(Text::new("Custom"), Style::default());

Grid

The Grid struct represents a grid of cells. It supports multiple rows and it provides methods to adjust the cell dimensions, the gutter size and also the padding. It can also be converted to an Element type for use in iced.

Methods

new with_row with_rows cell_width cell_height gutter padding

Example

let grid = Grid::new()
    .with_row([Factory::from_element(Text::new("A")), Factory::from_element(Text::new("B"))])
    .cell_width(100)
    .cell_height(100)
    .gutter(10)
    .padding(5);

Demo

Here is an example of how to use the grid system where here we will create a calendar where the current day is highlighted in red

use grid::{Cell, Factory, Grid};
use iced::{Background, Color, Element, Length, advanced::widget::Text, run, widget::{Container, container::Style}};
use itertools::Itertools;
struct State<'a> {
    grid: Grid<'a, Message>,
}
impl Default for State<'_> {
    fn default() -> Self {
        const DAYS_PER_WEEK: usize = 7;
        let today = 10;
        let grid = Grid::new()
            .with_row(["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"])
            .with_rows(
                (1..=31)
                    .map(move |day| {
                        Factory::from_factory(move || {
                            let red = day == today;
                            Cell::from(Text::new(day)).style(if red {
                                Style {
                                    background: Some(Background::Color(Color::from_rgb8(255, 0, 0))),
                                    text_color: Some(Color::from_rgb8(255, 255, 255)),
                                    ..Style::default()
                                }
                            } else {
                                Style {
                                    background: Some(Background::Color(Color::from_rgb8(255, 255, 255))),
                                    text_color: Some(Color::from_rgb8(0, 0, 0)),
                                    ..Style::default()
                                }
                            })
                        })
                    })
                    .chunks(DAYS_PER_WEEK)
                    .into_iter()
                    .map(Itertools::collect_vec)
                    .collect_vec(),
            )
            .cell_height(50)
            .cell_width(50)
            .padding(5);
        Self { grid }
    }
}
#[derive(Debug, Clone, Copy)]
enum Message {}
fn main() {
    run("grid", update, view).unwrap();
}
fn update(_state: &mut State, _message: Message) {}
fn view<'a>(state: &'a State) -> Element<'a, Message> {
    Container::new(&state.grid).center(Length::Fill).into()
}

This example creates a grid with the days of the week and adds cells representing the dates of the month. The current day is highlighted in red with a white text color.