How to create dynamic rows and columns layout?

Learn
1

I’d like to implement a page to display a list of items in grid style in which the rows and columns are changed dynamically based on screen size.

I already checked the iced_taffy intergration which is too old, outdated, and I am using the lasted iced, the self argument in following method is not mutabled any more, so we don’t have a way to mutate parent-children layout, however the taffy methods need to mutate the tree.

Widget trait

    fn layout(&self,  tree: &mut Tree, renderer: &R, limits: &layout::Limits) -> layout::Node {

Taffy 0.5.2

pub fn compute_grid_layout(tree: &mut impl LayoutGridContainer, node: NodeId, inputs: LayoutInput) -> LayoutOutput

It is not necessary for it to be Taffy. Any approach to implement the feature is acceptable.

2

You could try to use a responsive widget and perform some calculations to produce your rows and columns.

Eventually, we will have our own Grid widget.

3

I found that my case is very similar to A table / scrollable that can handle thousands of items? - Learn - iced, but I need to display items in both grid and list view mode? Will the comming ListView widget support the grid view mode? for grid view mode, the rows and columns are dynamically adjusted based on window size.

4

Everything is always dynamic in Iced, you build it all, each time view() method is called. So you need to subscribe to WindowResized

    pub(crate) fn subscription(&self) -> Subscription<Message> {
        event::listen_with(|event, _status, _id| {
            match event {
                Event::Window(window::Event::Resized { width, height}) => {
                    Some(Message::WindowResized(width, height))
                }
                _ => None
            }
        })
    }

Then in the update() method handle your WindowResized message and store the size somewhere and then in the view() method calculate rows, columns, whatever accordingly.

5

Thanks for help, it is far complex than this, I already integrated the Taffy layout crate with Iced, it works as expected.