opacity inoperative for item drawn outside of an clipped item

[fluolite]

Bug Description

HorizontalLayout opacity inoperative when swipe to next view with SwipeGestureHandler.
wrap a Rectangle contains HorizontalLayout can solve the problem.

Reproducible Code (if applicable)

export component AppWindow inherits Window {
    width: 480px;
    height: 480px;

    sgrx := SwipeGestureHandler {
        HorizontalLayout {
            x: -root.width * home_tab_index;
            opacity: 0.2;   // inoperative when changed to next tab
            Rectangle {
                width: parent.width;
                height: parent.height;
                background: #ff0000;
                Text {
                    font-size: 40px;
                    color: #000000;
                    text: "R";
                }
            }

            Rectangle {
                width: parent.width;
                height: parent.height;
                background: #00ff00;
                Text {
                    font-size: 40px;
                    color: #000000;
                    text: "G";
                }
            }

            Rectangle {
                width: parent.width;
                height: parent.height;
                background: #0000ff;
                Text {
                    font-size: 40px;
                    color: #000000;
                    text: "B";
                }
            }
        }

        Timer {
            interval: 1000ms;
            running: true;
            triggered => {
                home_tab_index += 1;
                if home_tab_index >= 3 {
                    home_tab_index = 0;
                }
            }
        }

        property <int> home_tab_index;
    }
}

Environment Details

• Slint Version: 1.91
• Platform/OS: linux
• Programming Language: Rust + slint
• Backend/Renderer: Linuxkms renderer-software

Product Impact

No response

[fluolite]

video.5.mp4

[ogoffart]

Thanks for the bug report.

One thing is that the G and B rectangle in the example are "outside" of the layout.
The correct way to do what you want is this:

export component AppWindow inherits Window {
    width: 480px;
    height: 480px;

    sgrx := SwipeGestureHandler {
        HorizontalLayout {
            x: -root.width * home_tab_index;
            width: self.preferred-width;
            opacity: 0.2;   // inoperative when changed to next tab
            Rectangle {
                width: root.width;
                height: parent.height;
                background: #ff0000;
                Text {
                    font-size: 40px;
                    color: #000000;
                    text: "R";
                }
            }

            Rectangle {
                width: root.width;
                height: parent.height;
                background: #00ff00;
                Text {
                    font-size: 40px;
                    color: #000000;
                    text: "G";
                }
            }

            Rectangle {
                width: root.width;
                height: parent.height;
                background: #0000ff;
                Text {
                    font-size: 40px;
                    color: #000000;
                    text: "B";
                }
            }
        }

        Timer {
            interval: 1000ms;
            running: true;
            triggered => {
                home_tab_index += 1;
                if home_tab_index >= 3 {
                    home_tab_index = 0;
                }
            }
        }

        property <int> home_tab_index;
    }
}

But it is indeed strange that the opacity is not applied for item outside of the layout. Probably because the layout is entirely clipped and we don't call the set_opacity in that case.