Question

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

Answer 1

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

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

的内容

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

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

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

Answer 3

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

e.g。使用四色代码，如#800000FF，用于半透明蓝色。

Answer 4

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

就我而言，我有Rectangle元素opacity: 0.6和子Image元素。 Image继承了透明度 - 不是理想的。

要解决此问题，我将主Rectangle括在Item元素中。将大小/位置定义从Rectangle传递到外Item。已将Image移到Rectangle之外。

最后，我在Item内并排Rectangle作为主要内容Image和Item。

只有Rectangle维持不透明度0.6，因此矩形具有透明度，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

我认为不可能。你必须制作两个元素兄弟并根据自己的意愿改变它的不透明度。

Answer 7

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

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

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 8

我也用Qt 4.8.6遇到了这个问题。

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

由于QML的继承机制，

Opacity无效。

但是我能够使用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值，但不是纯黑色。

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

QML不透明度继承

9 个答案: