Documentation for the detailed calculation method of the stretching algorithm?

[1595901624]

I found this code in the source code, but I don't really understand how the width of the element is calculated by the stretch factor, can you give me the details of the calculation method?

TestCase := Rectangle {
    width: 300phx;
    height: 300phx;

    VerticalLayout {
        spacing: 0phx;
        padding: 0phx;
        HorizontalLayout {
            spacing: 0phx;
            padding: 0phx;
            blue-rect := Rectangle {
                background: blue;
                height: 100phx;
                min-width: 100phx;
                horizontal-stretch: 0;
            }
            red-rect := Rectangle {
                width: 50px;
                background: red;
                min-height: 50phx;
            }
            green-rect := Rectangle {
                background: green;
                max-width: 20phx;
                horizontal-stretch: 2;
            }
            orange-rect := Rectangle {
                background: orange;
                width: 10phx;
                horizontal-stretch: 8;
            }
            yellow-rect := Rectangle {
                background: yellow;
                max-width: 200phx;
                horizontal-stretch: 1;
            }
            pink-rect := Rectangle {
                background: pink;
                horizontal-stretch: 2;
                max-height: 9000phx;
            }

        }
        black-rect := Rectangle {
            background: black;
        }
    }

    property <bool> blue_rect_ok: blue-rect.x == 0phx && blue-rect.y == 0phx && blue-rect.width == 100phx && blue-rect.height == 100phx;
    property <bool> red_rect_ok: red-rect.x == 100phx && red-rect.y == 0phx && red-rect.width == 50phx && red-rect.height == 100phx;
    property <bool> green_rect_ok: green-rect.x == 150phx && green-rect.y == 0phx && green-rect.width == 20phx && green-rect.height == 100phx;
    property <bool> orange_rect_ok: orange-rect.x == 170phx && orange-rect.y == 0phx && orange-rect.width == 10phx && orange-rect.height == 100phx;
    property <bool> yellow_rect_ok: yellow-rect.x == 180phx && yellow-rect.y == 0phx && yellow-rect.width == 120phx/3 && yellow-rect.height == 100phx;
    property <bool> pink_rect_ok: pink-rect.x == 180phx + yellow-rect.width && pink-rect.y == 0phx && pink-rect.width == 120phx*2/3 && pink-rect.height == 100phx;
}

Thanks!

[ogoffart]

Thanks for filling a bug report. The current documentation for it is there: https://slint.dev/releases/1.2.0/docs/slint/src/language/concepts/layouting#stretch-algorithm But more details about the calculation should be added there

[ogoffart]

I guess this is possibly a duplicate of https://github.com/slint-ui/slint/issues/143