How to specify the "cross-align" of a layout?

[tadeohepperle]

I am often in need of specifying how children of a layout should be aligned across the "cross axis" as opposed to the "main axis" that can be specified on VerticalLayout and HorizontalLayout via the alignment property in slint.

• In Flutter there is a CrossAxisAlignment enum for this.
• In CSS there is align-items for cross axis alignment.

Let's say I want to make a layout like this:

The only way I can think of doing this in slint is via:

HorizontalLayout {
    alignment: space-between;
    VerticalLayout { 
        alignment: center;
        Child1{}
    }
    VerticalLayout { 
        alignment: center;
        Child1{}
    }
}

It would be so much easier to do something like this:

HorizontalLayout {
    alignment: space-between;
    cross-alignment: center;
    Child1{}
    Child2{}
}

Is there a feature for this in slint? Adding cross alignment to a layout algorithm should be quite easy, I've done it myself in an immediate mode UI for games and it reduced the number of nested layouts needed by a lot.

[ogoffart]

This feature is not yet implemented and is tracked in #2587 , feel free to add 👍 to it.

In the mean time, the recommended way is to do it as you do with inner layouts.

[bowenxuuu]

Haha, this feature gets brought up by different people every now and then. To be fair, adding cross-axis-alignment would indeed greatly improve the usability of HorizontalLayout and VerticalLayout.