iced-rs / iced_aw

Additional widgets for the Iced GUI library
MIT License
437 stars 104 forks source link

Why does Grid insert spaces between narrow columns to the right of a wider column? (and how to avoid) #248

Open mackler opened 2 months ago

mackler commented 2 months ago

Hi, I'm trying to learn to use Grid and GridRow for text-alignment purposes.

When I use this code, it does what I expect:

    fn view(&self) -> Element<Self::Message> {
        let row = GridRow::with_elements(vec![
            Text::new("x"),
            Text::new("x"),
            Text::new("x"),
            Text::new("x"),
            Text::new("longer string of text"),
        ]);

        let grid = Grid::with_rows(vec![row]).column_width(Length::Fixed(5.0));
        grid.into()
    }

image

The cells are all together with no space between them. But if I move the cell with wider text from the last to the first like this:

        let row = GridRow::with_elements(vec![
            Text::new("longer string of text"),
            Text::new("x"),
            Text::new("x"),
            Text::new("x"),
            Text::new("x"),
        ]);

now I get this: image Now instead of the cells being together, they are spaced out. Why? Yes I have read the documentation but no I still don't understand the logic. In both cases I have set the width of all columns to a fixed value of 5. What if I want both the wider cell to be on the left and also for the cells to have no space between them? How can I accomplish that?

(Also this is just a single-row example, my use case has multiple rows so the standard iced Row apparently will not meet my need for a grid.)

Thanks!

genusistimelord commented 2 months ago

it seems to be because inside the layout logic it is calculating a min_size like

min_width = if width == f32::INFINITY { min_width } else { min_width.max(width) };

if the first is the bigger width, the rest will be set to that width. I really am not sure how Grid Really should be done, or what the original author's purpose of Grid was for.