Rust + Iced: Grid spacing layout problem

⚓ Rust    📅 2026-03-26    👤 surdeus    👁️ 4      

surdeus

The function below produces an Iced window. It contains data from the passed in vector, named query_results, which is placed into a grid widget which in turn is placed into a scrollable widget. This vector can have 1 row, 2 rows or 1000 rows and vertically the output looks good. The problem is with the horizontal spacing between grid elements. As is, I get "Sep 3, 2010$345.23. If I uncomment the grids spacing method, which is set at 25, the horizontal spacing is good but the vertical spacing is adversely affected. In looking at the Iced documentation I cannot find a way to assign horizontal spacing of 25 and vertical of 0. I clearly do not understand some underlying concept. Any assistance will be appreciated.

pub fn closeing_view<'a>(heading: &str, query_results: &'a Vec<QueryResults>) -> iced::Element<'a, Message> {

    let mut grid_height = 0.0; 
    let mut my_grid = Grid::new();

    my_grid = my_grid
        .columns(2)
        // .spacing(25)  // want 25 horizontal 0 vertical spacing between cells, default = 0
        .width(260) 
        ;

    for result in query_results {

        let naive_date = NaiveDate::parse_from_str(&result.date, "%Y-%m-%d").unwrap();
        let formatted_date = naive_date.format("%b %e, %Y").to_string();

        my_grid = my_grid
            .push(widget::text(format!("{}", formatted_date)).size(20.0).align_x(Horizontal::Right))
            .push(widget::text(format!("${:.2}", result.close)).size(20.0).align_x(Horizontal::Left));
        grid_height += 30.0
        
    }

    my_grid = my_grid.height(Length::Fixed(grid_height));

    let column_widget = 

        widget::column![
    
            widget::container(
                widget::button(widget::text("Home").size(15.0))
                    .on_press(Message::GoToHomeScreen)
                    .style(btn_blue_no_border)
            )
                .width(Length::Fill)
                .align_x(Horizontal::Right)
                .align_y(Vertical::Top),


            widget::container(
                widget::text(format!("{} Close", heading)).size(30.0)
            )
            .width(Length::Fill)
            .padding(iced::padding::bottom(10))
            .align_x(Horizontal::Center)
            .align_y(Vertical::Center), 

            widget::container(
                widget::row![
                    widget::text("Date").size(20.0),
                    widget::text("Close").size(20.0),
                ]
                .width(Length::Fill)
                .spacing(65)
                .padding(iced::padding::top(20))
                .padding(iced::padding::left(210))
            )
            .width(Length::Fill)
            .align_x(Horizontal::Center), 

            widget::rule::horizontal(1)
                .style(horizontal_rule),
        
            widget::scrollable(
                widget::container(
                    my_grid
                )
                .padding(iced::padding::top(9))
                .width(Length::Fill)
                .align_x(Horizontal::Center)
                .align_y(Vertical::Top)
            )
        ];

    let my_container: widget::Container<'_, Message> =
        widget::Container::new(column_widget)
            .width(Length::Fill)
            .height(Length::Fill)
            .style(container_style);

    my_container.into()

}

1 post - 1 participant

Read full topic

🏷️ Rust_feed