slint-ui / slint

Slint is a declarative GUI toolkit to build native user interfaces for Rust, C++, or JavaScript apps.
https://slint.dev
Other
17.64k stars 607 forks source link

Wrapper component breaks layout #6821

Open jmEvoqua opened 3 days ago

jmEvoqua commented 3 days ago

Hi,

I noticed that a wrapper component which does not derive from anything breaks the layout. Is a non derived component not fully supported or is there something else I am not able to see?

With Wrapper:

component Base inherits Rectangle {
    background: gray;
    VerticalLayout {
        Rectangle {
            width: 480px;
            height: 240px;
            background: green;
        }

        @children
    }
}

component Wrapper {
    Base {
        Rectangle {
            background: red;
            width: 300px;
        }
    }
}

export component Main inherits Window {
    background: black;

    Wrapper { }
}

grafik

Without Wrapper:

export component Main inherits Window {
    background: black;

    Base {
        Rectangle {
            background: red;
            width: 300px;
        }
    }
}

grafik

Another interesting case when the base inside the wrapper has no children:

component Wrapper {
    Base {

    }
}

grafik

Or when the element inside the wrapper is conditional:

component Wrapper {
    if true: Base {
        Rectangle {
            background: red;
            width: 300px;
        }
    }
}

grafik

I would have expected that the wrapper does not change the layout in any way.