How to Structure Code Properly When Developing Medium- to Large-Scale Applications with Slint

[hmr-BH]

I’ve just started using Slint and am amazed at how convenient and powerful it is!
After experimenting for a short while, however, I’m wondering how to organize the code sensibly when building a medium- to large-scale application.

In such projects we end up with many Rust functions that have to be bound to Slint UI elements. Every single binding seems to require cloning a handle, which worries me both from a performance standpoint and because it makes it harder to split the code into several files. The resulting structure quickly becomes messy.

Could anyone share advice on how to keep the codebase clean and efficient while still taking full advantage of Slint?

 let days = calculate_days_until(&settings.exam_date);
    ui.set_countdown_text(format!("{} {} 天", settings.title, days).into());

    let handle_close = handle.clone();
    ui.on_close_window(move || {
        if let Some(main) = handle_close.upgrade() {
            let window = main.window();
            let pos = window.position().to_logical(window.scale_factor());
            let mut current_settings = load_settings();
            current_settings.window_x = pos.x;
            current_settings.window_y = pos.y;
            let _ = save_settings(&current_settings);
            let _ = main.hide();
        }
    });

    let handle_move = handle.clone();
    ui.on_move_window(move |offset_x, offset_y| {
        if let Some(main) = handle_move.upgrade() {
            let window = main.window();
            let logical_pos = window.position().to_logical(window.scale_factor());
            window.set_position(LogicalPosition::new(
                logical_pos.x + offset_x,
                logical_pos.y + offset_y,
            ));
        }
    });

export component AppWindow inherits Window {
    background: transparent;
    no-frame: true;
    always-on-top: true;
    width: 370px;
    height: 250px;

    in property <string> countdown-text;

    callback move-window(length, length);
    callback close-window();
    callback open-settings();
    callback save-settings(string, string, bool);

    DragArea {
        on-move-window(offset-x, offset-y) => {
            move-window(offset-x, offset-y);
        }
    }

    Background {}

    VerticalBox {
        width: 95%;
        height: 90%;
        HorizontalBox {
            alignment: end;
            FloatButton {
                icon: @image-url("assets/close.svg");
                clicked => {
                    close-window();
                }
            }
        }
        HorizontalBox{
            padding-right: 5px;
            CountdownText {
                text: root.countdown-text;
            }
        }
        HorizontalBox {
            alignment: end;
            FloatButton {
                icon: @image-url("assets/settings.svg");
                clicked => {
                    open-settings();
                }
            }
        }
    }
}

[FaintentDev]

i recommend checking this repo: https://github.com/heng30/slint-template

it helped me jump right into slint at first