how to prevent stretch layout from jumping on content changes

[tjallingt]

This is adapted from the widget galley demo:

import { CheckBox, GroupBox, SpinBox, ComboBox, VerticalBox, HorizontalBox } from "std-widgets.slint";

export component App inherits Window {
    preferred-height: 100px;
    preferred-width: 600px;

    VerticalBox {
        alignment: start;

        GroupBox {
            title: "CheckBox - SpinBox - ComboBox";

            HorizontalBox {
                alignment: stretch;

                checkbox := CheckBox {
                    horizontal-stretch: 1;

                    text: checkbox.checked ? "(checked)" : "(unchecked)";
                    checked: true;
                }


                SpinBox {
                    horizontal-stretch: 1;

                    value: 42;
                }

                ComboBox {
                    horizontal-stretch: 1;

                    model: ["Select Something", "From this", "Combobox"];
                }
            }           
        }
    }
}

If the checkbox is checked and unchecked the layout jumps because of the change in text.
I would like to prevent this jumping by having the CheckBox SpinBox and ComboBox take up 33% of the available width, and i expected the horizontal-stretch property to do that.
Given that the layout still jumps with the horizontal-stretch it isn't clear to me how to prevent the layout shifting when the checkbox text changes.

[ogoffart]

You can use fixed with like this width:33%;

example

(you can also specify manually the preferred-width and minimum-width.
If you set them all to the same value, then everything should take 1/3 of the available width.)

[tjallingt]

I'm okay with setting width: 33% but I would have expected horizontal-stretch: 1; to be enough for the components to automatically stretch to 33%. When adding a new component to the row it would be necessary to update all the explicitly specified widths.

[ogoffart]

the stretch decide how much they grow or shrink compared to their preferred size.
Since not all the element have the same preferred size, they are then having different sizes

[aurexav]

Not work with space: 5px, the last item will overflow.

33% - space * (count - 1) isn't a valid expression.

parenet.width * 0.33 - space * (count - 1) not work either(due to loop binding).