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下方。我怎样才能做到这一点？我发现将z的{{1}}设置为高于cover的{{1}}并不会使后者隐藏。

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

Answer 1

当其父级的不透明度小于1时，不透明度为1但仍显示透明度的原因是：不透明度与x，y等其他属性的行相同因此，即使孩子的不透明度为1，也与父母的不透明度相关。因此，如果父级具有不透明度0.5，并且子级的不透明度为1，则子级的绝对不透明度值实际为0.5。另一个不透明度为0.5的孩子实际上具有0.5x0.5 = 0.25的不透明度。这类似于子{0}的x值，绝对值x可能不为0.此设计保持整个API的一致性。

有several work-arounds。我最喜欢的是为父母使用semi-transparent colors。尝试将color的{{1}}设置为wrapper。您无法再看到绿色矩形color: "#88000000"。要查看这一点，您必须将belowcover的不透明度设置为小于1的某个值，这意味着cover 是不透明的。这就是我实际解决问题的方法。

但是，如果父级是图像，则无法应用此功能。然后你必须采取其他一些技术。例如：

使用layer。为父级设置cover。
当直接父级的不透明度小于1时，按changing the parent。
列出了许多其他技术here。

不透明度如何在QML中起作用？

1 个答案: