不透明度在 QML 中如何工作？

Question

我不明白以下代码中不透明度的行为！

import QtQuick 2.4

Rectangle {
    id: root
    width: 640; height: 480

    Rectangle {
        id: wrapper
        width: 600; height:440
        anchors.centerIn: parent
        color: "black"
        opacity: 0.5

        Rectangle {
            id: belowcover
            width: cover.width / 2
            height: cover.height / 2
            anchors.centerIn: parent
            color: "green"
            z: 1
        }

        Rectangle {
            id: cover
            width: root.width / 2
            height: root.height / 2
            anchors.centerIn: parent
            color: "red"
            z: 1
        }

        Rectangle {
            id: seen
            width: 100; height: 100
            radius: width
            color: "blue"
            z: -1
        }
    }
}

wrapper 的不透明度为 0.5，因此我可以透过它看到圆圈 seen。但是 cover 和 belowcover 的不透明度都是 1，并且由于 belowcover 比 cover 小，所以不应该被看到（或者更确切地说，我希望它不会被看到，还是我错过了什么？）。但是 cover 和 belowcover 都被看到了。我只想通过 wrapper 看到圆圈，而 belowcover 则隐藏在 cover 下方。我怎样才能做到这一点？我观察到将 cover 的 z 设置为高于 belowcover 的 belowcover 不会使后者隐藏。

编辑：我观察到，当父对象的不透明度设置为小于 1 时，子对象变得不那么透明，即使它们的 opacity 保持为 1，如打印到控制台时所见。我不明白为什么。

Answer 1

child 的不透明度为 1 但在其 parent 的不透明度小于 1 时却显示透明的原因是：不透明度与其他属性（如 [=10）沿同一条线=]、y 等。因此，即使 child 的不透明度为 1，它也是相对于 parent 的不透明度。因此，如果 parent 的不透明度为 0.5，而 child 的不透明度为 1，则 child 的 absolute 不透明度值实际上为 0.5。另一个不透明度为 0.5 的 child 实际上不透明度为 0.5x0.5=0.25。这类似于 child 的 x 值为 0，而绝对 x 可能不为 0。此设计在整个 API.

中保持一致性

parent 有 several work-arounds. The one I prefer most is to use semi-transparent colors 个。尝试将 wrapper 的 color 设置为 color: "#88000000"。您再也看不到绿色矩形 belowcover。要看到这一点，您必须将 cover 的不透明度设置为小于 1 的某个值，这意味着 cover 是不透明的。这就是我实际解决问题的方式。

但是，如果 parent 是图片，则无法应用。然后你必须求助于其他一些技术。例如：

使用layer。为 parent 设置 layer.enabled: true。
当立即 parent 的不透明度小于 1 时 changing the parent。
列出了许多其他技术 here。

不透明度在 QML 中如何工作？

How does opacity work in QML?

opacity

qml