QML 不透明度继承

Question

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

Answer 1

我认为，一种方法是使用半透明颜色，如此处 而不是不透明度。

例如，使用四色代码，例如 #800000FF 表示半透明蓝色。

Answer 2

实际上，为父元素设置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。

Answer 3

你不能。项目的不透明度值是相对于其父级的，因此如果您编写类似的代码，

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

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

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

Answer 4

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

在我的例子中，我有一个 矩形 元素，其 opacity: 0.6 和一个子 Image 元素。 Image 继承了透明度 - 这不是我们想要的。

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

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

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

Answer 5

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

例子：

Item{
    id:root

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

Answer 6

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

我个人的解决方法是将其更改为：

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

Answer 7

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

Answer 8

不可能这样做，但您可以使用 Qt.lighter(color,opacity) 更改它们

颜色

的

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

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

Answer 9

我在 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 值都有效，但纯黑色不起作用。