不透明度在 QML 中是如何工作的？答案

【问题标题】：How does opacity work in QML?不透明度在 QML 中是如何工作的？
【发布时间】：2015-05-11 22:48:25
【问题描述】：

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

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 并不会使后者隐藏。

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

【问题讨论】：

查看this 关于不透明度的问题和相关答案。一般来说，不透明度总是从父级继承，即您必须设置一个通用的item 父级和opacity: 1 来调整子级的不透明度。 layers 在某些情况下也可以提供帮助，但计算成本更高。
谢谢。所以opacity 与x、y 等其他属性走同一条线。因此，即使孩子有 opacity 为1（类似于x 值为0 , 当absolute x 可能不为0)时，它是相对于父级的。良好的一致性，虽然最初让我感到困惑！我认为您应该将您的评论移至未来读者的答案。
关于不透明度的选择既是一种一致性选择（一个不可见的控件应该使其所有子控件都不可见），也是一种性能选择（分层渲染的成本很高）。好吧，我没有回答，因为我很确定这个问题是重复的……只是找不到重复的！ :D
好的，这是复制品：stackoverflow.com/questions/9204226/qml-opacity-inheritance我帮你找到了 ;-)

标签： qml opacity

【解决方案1】：

不透明度为 1 的子对象在其父对象的不透明度小于 1 时看起来具有透明度的原因是：不透明度与 x、y 等其他属性的方向相同。因此，即使虽然孩子的不透明度为1，但它是相对于父母的。因此，如果 parent 的不透明度为 0.5，child 的不透明度为 1，则 child 的 absolute 不透明度值实际上是 0.5。另一个不透明度为 0.5 的孩子实际上的不透明度为 0.5x0.5=0.25。这类似于 x 的 child 值为 0，而绝对 x 可能不为 0。这种设计保持了整个 API 的一致性。

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

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

使用layer。为父级设置layer.enabled: true。
当直接父级的不透明度小于 1 时，由 changing the parent 提供。
here 列出了许多其他技术。

【讨论】：