QML 不透明度继承

Posted 2023-03-06

【中文标题】QML 不透明度继承

【英文标题】：QML Opacity Inheritance

【发布时间】：2012-03-01 12:46:00

【问题描述】：

在 QML 中，如何防止子元素从其父元素继承不透明度？ 我想为父元素和它的子元素设置不同的不透明度值。

【参考方案1】：

我认为这是不可能的。您必须使两个元素同级并根据需要更改其不透明度。

【参考方案2】：

你不能。项目的不透明度值是相对于他们的父母的，所以如果你编写类似的代码

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

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

您会看到两个矩形具有相同的不透明度。

【讨论】：

我现在可以确认这种行为。坦率地说，我看不出做出这种选择的原因，我怀疑这是一个错误。

我不认为这是一个错误。它与许多常见属性（例如：x、y、z）相同。它允许您不使用绝对引用来排列每个项目。

我试图打开一个针对 QtQml 的错误，它已在几分钟内关闭，所以 Qt 人似乎和你的意见相同。但我仍然对这件事持怀疑态度。如果我写了一行代码，首先我不希望它被忽略，其次如果它必须被忽略，我想被警告我的代码没有效果。但是，再一次，我看不出为什么，如果一个元素块的不透明度为 0.5，我不能只让其中一个元素的不透明度为 1。如果它们在逻辑上被分组为主容器的子容器，为什么应该我只让其中一个成为兄弟姐妹？

如果您将一组项目的不透明度设置为 0.5，这对我（以及 Qt 人员）意味着您希望将该值设置为该组中的所有项目。否则，您应该将此值设置为您想要的项目。

是的......这就是不透明度在场景图中通常的工作方式：节点的不透明度是节点的本地不透明度乘以它的祖先，不透明度。因此，如果父项的局部不透明度为 0.5，子项的局部不透明度为 1.0，则子项的最终不透明度将为父项的不透明度 (0.5) x 子项的局部不透明度 (1.0) = 0.5。但是，我希望将不透明度值设置为 2.0 会起作用，因为 0.5 * 2.0 = 1.0。我试过了，不幸的是它没有用。看起来 Qt 将不透明度值限制在 0 .. 1 之间太快了...... :(

【参考方案3】：

我认为，一种方法是使用here 所述的半透明颜色，而不是不透明度。

例如使用像 #800000FF 这样的四色代码来表示半透明的蓝色。

【讨论】：

如果可以直接指定单一颜色（不是复合项也不是图像），这个方案就完美了。

谢谢，这解决了我的问题。我实际上只是设置了#00000000，而且效果很好。

为了强调，透明度数字是前两位数字。可以在此图表中找到不同的 alpha 值：gist.github.com/lopspower/03fb1cc0ac9f32ef38f4

【参考方案4】：

我刚才碰到了这个问题。使用 Qt 5.1.0

在我的例子中，我有一个 Rectangle 元素与 opacity: 0.6 和一个子 Image 元素。 Image 继承了透明度 - 不需要。

为了解决这个问题，我将主要的 Rectangle 包含在一个 Item 元素中。将大小/位置定义从Rectangle 传递到外部Item。将Image 移到Rectangle 之外。

最后，我将 Item 作为主要父级，Rectangle 和 Image 并排在 Item 内部。

只有 Rectangle 保持不透明度 0.6，因此 Rectangle 具有透明度，Image 完全不透明。

【参考方案5】：

实际上，为父元素设置layer.enabled: true 对我来说是这样的。 整个元素被渲染到缓冲区，opacity 被应用到生成的缓冲区（一次应用到整个层）。

见http://doc.qt.io/qt-5/qml-qtquick-item.html#layer.enabled-prop

示例代码：

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'
    

这是一个解决方案，但请确保在启用分层时知道自己在做什么。

另一种可能的解决方案是使用着色器效果。

感谢 #qt@freenode 上的 peppe。

【讨论】：

不！ 'layer.enabled' 不会这样做

Layer Opacity vs Item Opacity。所以layers.enabled 逐项控制 alpha 混合

【参考方案6】：

我在 Qt 4.8.6 中也遇到过这个问题。

在我的特定情况下，我希望***项目是 20% 透明的黑色，但其子元素不受父项的任何不透明度/透明度设置的影响。

由于 QML 的继承机制，不透明度不起作用。

但我能够使用 Qml Qt 对象中的 rgba 函数。这让我得到了我想要的东西，父元素现在是 20% 透明的，但子元素不受影响。

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

注意：我也尝试过直接使用 RGBA 颜色代码，如之前的海报所述，但它不起作用。

例子：

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

为任何其他 RGBA 值设置 alpha 值都有效，只是不适用于纯黑色。

【讨论】：

QML 中的颜色属性是 ARGB，而不是 RGBA。将您的颜色更改为#FA000000，它将起作用。

你是对的。也许是因为我之前使用的是 Qt.rgba(..)，所以当时我一直在想颜色类型使用相同的格式。

【参考方案7】：

有可能！您需要在Component.onCompleted 范围内测试父级的不透明度。如果它为 0，则需要将对象的父级更改为其当前父级的父级。

例子：

Item
    id:root

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

【参考方案8】：

您不能阻止子元素从其父元素继承不透明度。

我个人的工作是改变这个：

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

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

进入这个：

Item 
    width: 200; height: 100

    Rectangle 
        anchors.fill: parent
        color: "red"
        opacity: 0.5
    

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

或者这个（只有当父级是纯色时才有可能）：

Rectangle 
    color: "#7FFF0000" // 50% transparent red
    opacity: 0.5
    width: 200; height: 100

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

【参考方案9】：

这是不可能的，但你可以改变它们的颜色

Qt.lighter(color,opacity)

例如

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

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