How to create a scaling view that has a fixed resultion and letterboxes extra space?

[tex111]

This is a fairly common feature for most UI libraries I have used. Flutter's FittedBox, Avalonia's Viewbox, etc. I cannot find anything in the docs that would provide this functionality. The only scaling I can find is global to the app.

I love the promise of Rust but for my usecase, a UI based desktop game, creating a single UI and having it scale for any screen is crucial.

Your answer is likely to just use reactive sizing but my response to that is images and text won't scale properly that way and it won't maintain my desired aspect ratio. The difference between a 1080p and a 4k screen is too massive.

[hunger]

Yes, we only have a global scale factor for the UI at this point.

I am probably not understanding fully what you are trying to do, but Images should keep their aspect ratio (if set up properly)... and you can set a max-width and max-height for Layouts, too, to limit how big things can get (https://docs.slint.dev/latest/docs/slint/reference/layouts/overview/#max-width-max-height).

Is that what you were looking for?

[tex111]

Unfortunately no. The end goal would be to be able to create a ui for 1080p and have it scale up or down to match the window size while maintaining it's aspect ratio. Letterboxing the extra space. The elements I mentioned from other frameworks allow you to essentially use them as a "viewport" so it is scaled once and you can design for your target resolution.

[tex111]

I can almost get the behavior I am looking for with this. Unfortunately there are noticeable stutters if you click on the window border and scale it even with this minimal app. My guess is that there is a cascade of recalculations happening because slint is fundamentally not designed to handle this sort of scaling.

Button font cannot be resized either.

export component AppWindow inherits ScalableWindow {
    in-out property <int> counter: 42;
    callback request-increase-value();
    VerticalBox {
        Text {
            width: 400px * root.scale;
            height: 200px * root.scale;
            text: "Counter: \{root.counter}";
            font-size: 20px * root.scale;
        }

        Button {
            width: 400px * root.scale;
            height: 200px * root.scale;
            text: "Increase value";
            clicked => {
                root.request-increase-value();
            }
        }
    }
}

export component ScalableWindow inherits Window {
    // Target design dimensions
    property <length> target-width: 1920px;
    property <length> target-height: 1080px;

    // Scaling calculations
    property <float> scale-x: root.width / target-width;
    property <float> scale-y: root.height / target-height;
    in-out property <float> scale: min(scale-x, scale-y);

    // Letterbox background
    background: black;

    // Scaled content container
    Rectangle {
        width: target-width * scale;
        height: target-height * scale;
        x: (parent.width - self.width) / 2;
        y: (parent.height - self.height) / 2;

        @children
    }
}