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.
Actually, setting layer.enabled: true
for the parent element does the thing for me.
The whole element is rendered to the buffer, and opacity
is applied to the resulting buffer (to the whole layer at once).
See http://doc.qt.io/qt-5/qml-qtquick-item.html#layer.enabled-prop
Example code:
Rectangle {
width: 400
height: 200
opacity: 0.5
layer.enabled: true
Rectangle {
width: parent.width
height: parent.height
color: 'red'
}
Rectangle {
width: parent.width / 2
height: parent.height
color: 'blue'
}
}
That is a solution, but make sure that you know what you are doing when enabling layering.
Another possible solution would be using a shadereffect.
Thanks to peppe on #qt@freenode.