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

这在 documentation for opacity 中有解释:

When this property is set, the specified opacity is also applied individually to child items. This may have an unintended effect in some circumstances. For example in the second set of rectangles below, the red rectangle has specified an opacity of 0.5, which affects the opacity of its blue child rectangle even though the child has not specified an opacity.

您可以移动 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
    }
}