如何更改 QML 矩形不透明度而不影响其上内容的颜色？

Question

我只想设置矩形上的不透明度，但显示在其顶部的文本也会变得透明。

如何仅设置背景矩形的不透明度而不更改文本的不透明度？

Rectangle {
    id: button
    color: "black"
    opacity: 0.3
    width: parent.width
    height: 35

    Text {
        anchors.centerIn: parent
        text: qsTr("text")
        color: "white"
        font.pixelSize: 25
    }
}

Answer 1

这在不透明度文档中进行了解释：

设置此属性后，指定的不透明度也会单独应用于子项。在某些情况下，这可能会产生意想不到的效果。例如，在下面的第二组矩形中，红色矩形指定了 0.5 的不透明度，这会影响其蓝色子矩形的不透明度，即使子矩形未指定不透明度也是如此。

您可以将

Text

项目移出：

Rectangle {
    id: button
    color: "black"
    opacity: 0.3
    width: parent.width
    height: 35
}

Text {
    anchors.centerIn: button
    text: qsTr("text")
    color: "white"
    font.pixelSize: 25
}

或者给

Rectangle

一个透明颜色而不是改变不透明度：

Rectangle {
    id: button
    color: "#33000000" // form: #AARRGGBB
    width: parent.width
    height: 35

    Text {
        anchors.centerIn: parent
        text: qsTr("text")
        color: "white"
        font.pixelSize: 25
    }
}