QML Opacity Inheritance

问题

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.

回答1:

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.

回答2:

You can't. Items opacity value is relative to their parents one, so if you code something like

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

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

You will see that the two rectangles have the same opacity.

回答3:

I think, one way would be to use semi transparent colors as described here instead of opacity.

e.g. using quad color code like #800000FF for semi transparent blue.

回答4:

I've bumped into this issue just now. Using Qt 5.1.0

In my case, I had a Rectangle Element with opacity: 0.6 and a child Image element. The Image was inheriting the transparency - not desired.

To solve it, I enclosed the main Rectangle in an Item element. Passed the size/position definitions from the Rectangle to the outer Item. Moved the Image outside the Rectangle.

In the end, I had Item as the main parent and Rectangle and Image side by side, inside Item.

Only Rectangle maintained the opacity 0.6, so the Rectangle has transparency and Image is fully opaque.

回答5:

It's possible! You need to test in the Component.onCompleted scope the opacity of the parent. If its 0 you need to change the parent of your object to the parent of it's current parent.

Example:

Item{
    id:root

    Item{
        id:currentParent
        opacity: 0
        Item{
            id:item
            Component.onCompleted:{
                if(parent.opacity === 0)
                    item.parent = currentParent.parent
            }
        }
    }
}

回答6:

I don't think its possible. you have to make two element sibling and changes its opacity as you wish.

回答7:

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
    }
}

回答8:

I also ran into this problem with Qt 4.8.6.

In my particular case, I wanted the top level item to be 20% transparent with black color, but have its child elements be unaffected by any opacity/transparency setting from the parent.

Opacity did not work, due to the inheritance mechanism of QML.

But I was able to use the rgba function from the Qml Qt object. This allowed me to get exactly what I wanted, the parent is now 20% transparent, but the child elements are unaffected.

Rectangle {
    width: 400
    height: 400
    color: Qt.rgba(0, 0, 0, 0.2) // Works perfectly, pure black with 20% transparency, equal to 0.2 opacity

    // Unaffacted child elements here...
}

Note: I also tried to use the RGBA color codes directly, as mentioned by a previous poster, but it did not work.

Example:

color: "#000000FA" // Supposed to be semi transparent, but always transparent, regardless of the alpha value

Setting the alpha value for any other RGBA values worked, just not with pure black.

回答9:

it is not possible to do that but you can change their color with

Qt.lighter(color,opacity)

for example

Rectangle {
  color: Qt.lighter("red",.5)
  width: 200; height: 100

  Rectangle {
    color: Qt.lighter("blue",1)
    width: 100; height: 100
  }
}

来源：https://stackoverflow.com/questions/9204226/qml-opacity-inheritance

标签

opacity

qml