Add declarative UI model supports?

If UI and business logic share same data and/or data are lists, imperative UI model is really verbose. If I use declarative UI model, following code is enough. But if I use imperative UI model, I need to implement proper setters for all its properties(and repeat rebuild code in setters) and hold reference to ListView or ListView.controls. Thus I need to properly NAME them.

There are only two hard things in Computer Science: cache invalidation and naming things.

class ListSelectionView(UserControl):
    def __init__(self, group: str, values: list[str], types: list[str], selected_index: int | None, on_select: Callable[[int], None], on_selected_click: Callable[[str], None]):
        super().__init__(expand=1)
        self.group = group
        self.values = values
        self.types = types
        self.selected_index = selected_index
        self.on_select = on_select
        self.on_selected_click = on_selected_click

    def build(self):
        def build_item(i: int, value: str, annotation: str, selected: bool):
            if selected:
                def on_click(_):
                    self.on_selected_click(value)
                return Draggable(
                    group=self.group,
                    content=Container(
                        Row([
                            Text(value, size=15),
                            Container(expand=1),
                            Text(annotation, size=15),
                        ]),
                        on_click=on_click,
                        ink=True, padding=5,
                        bgcolor=colors.BLUE_ACCENT,
                    ),
                    content_feedback=CircleAvatar(
                        content=Text(
                            value,
                            size=15,
                            style='labelLarge',
                        ),
                        radius=40, bgcolor=colors.BLUE_ACCENT
                    ),
                )

            def on_click(_):
                self.on_select(i)
            return Container(
                Row([
                    Text(value, size=15),
                    Container(expand=1),
                    Text(annotation, size=15),
                ]),
                on_click=on_click,
                ink=True,
                padding=5,
            )
        return ListView(
            [build_item(i, value, annotation, i == self.selected_index)
             for i, value, annotation in zip(itertools.count(), self.values, self.types)],
            expand=1,
        )

Currently I use following code to emulate declarative UI model:

class FlutterControl(UserControl):
    def build(self):
        self.container = Container(self.construct(), expand=1)
        return self.container

    def construct(self) -> Control | None:
        return None

    def apply(self):
        self.container.content = self.construct()
        self.update()

But it has a problem: rebuilding will reset scrolling position of ListView.

[YouJiacheng]

I know flet is aiming for imperative programming model. It combines smaller “widgets” to ready-to-use “controls” to construct UI with less nesting levels, which is suitable for imperative UI model. But if the use-case is complex, nesting is unavoidable, which is not friendly to imperative UI model – traverse component tree and mutate leaves’s properties is really verbose. I think to have a UserControl with declarative UI model is really helpful: Professional users can construct arbitrary complex custom controls with declarative model, while all users(including professional users) can use ready-to-use controls(both built-in and custom) with straight-forward imperative model.

[ndonkoHenri]

Another idea would be to let the user set an ID attribute on the control.

@skeledrew tried something similar in his Flet CLI(fletil): https://pypi.org/project/fletil/0.3.0/