How to write custom widgets that draw an existing widget when drawing themselves

[anshap1719]

I am essentially trying to create a widget that acts as wrapper which takes a list of rows, adds some virtualization logic, and then tries to render the rows as is. I saw some examples around this and have written my code based on #1720 (comment)

My use case is a little different though. I'm not trying to render a primitive like text or image, but rather another widget within this. Based on the source code for row or column widgets, my code should've worked, but it's not drawing anything. Do you see any obvious problems here:

#[derive(Default)]
pub struct MyTheme {}

#[derive(Default, Clone, Copy)]
pub enum MyThemeStyle {
    #[default]
    Default,
}

impl application::StyleSheet for MyTheme {
    type Style = MyThemeStyle;

    fn appearance(&self, _: &Self::Style) -> Appearance {
        // ...
    }
}

pub type Renderer = iced::Renderer<MyTheme>;
pub type Row<'a, Message> = iced::widget::Row<'a, Message, iced::Renderer<MyTheme>>;

pub struct ImageGrid<'a, Message> {
    item_height: f32,
    contents: Vec<Row<'a, Message>>,
    on_click: Option<Box<dyn Fn() -> Message>>,
}

impl<'a, Message> Widget<Message, Renderer> for ImageGrid<'a, Message> {
    // ... other methods

    fn draw(
        &self,
        state: &Tree,
        renderer: &mut Renderer,
        theme: &MyTheme,
        style: &Style,
        layout: Layout<'_>,
        cursor_position: Point,
        viewport: &Rectangle
    ) {
        // ... some custom logic for manipulating rows shown and bounds

        for item in self.contents {
            item.draw(state, renderer, theme, style, layout, cursor_position, viewport);
        }
    }
}

Currently, this code either draws nothing or draws blank. I don't know how I can make the distinction between the two.

Any help with this, or better patterns to implement this would be greatly appreciated. Thanks.

[anshap1719]

Is this an anti-pattern? Is there some other way to achieve this?

[tarkah]

Checkout the implementations for container, row and column, they do exactly this!

Note you should ideally convert the elements to Element when storing them as that will be much easier to work with.

[tarkah]

I also have a snippet here which you can reference. This is a wrapper widget that tracks then the mouse cursor enters / leaves the widgets bounds:

https://github.com/tarkah/iced-snippets/blob/0df81ba17a844d0125fd4dc5b490f0ef02313c4e/snippets/hover-component/src/main.rs#L117

[anshap1719]

@tarkah Thanks for the suggestions and the snippet. Although I already looked at their implementations before I posted this question, your snippets made me realize that I wasn't handling the children tree properly, which is why my code wasn't working.

Thanks again. I'll mark this discussion as solved.