QML Opacity Inheritance

Question

In QML, how can I prevent a child element from inheriting the opacity from its parent? I want to set different opacity values for the parent and it\'s child element.

Answer 1

You cannot prevent the child element from inheriting the opacity from its parent.

My personal work around is to change this:

Rectangle {
    color: "red"
    opacity: 0.5
    width: 200; height: 100

    Rectangle {
        color: "blue"
        opacity: 1
        width: 100; height: 100
    }
}

Into this:

Item {
    width: 200; height: 100

    Rectangle {
        anchors.fill: parent
        color: "red"
        opacity: 0.5
    }

    Rectangle {
        color: "blue"
        opacity: 1
        width: 100; height: 100
    }

}

or this (only possible if the parent is a solid color):

Rectangle {
    color: "#7FFF0000" // 50% transparent red
    opacity: 0.5
    width: 200; height: 100

    Rectangle {
        color: "blue"
        opacity: 1
        width: 100; height: 100
    }
}