如何更改QML按钮Qt快速控件2的背景颜色?

时间:2018-09-03 23:40:00

标签: qt qml qtquickcontrols2

我只想更改QML按钮的背景颜色,但似乎没有简单的方法。您能告诉我一种简单的方法来更改QML Button的背景颜色吗?谢谢!

更新:我搜索过的代码:

import QtQuick 2.6
import QtQuick.Controls 2.1

Button {
    id: control
    text: qsTr("Button")

    contentItem: Text {
        text: control.text
        font: control.font
        opacity: enabled ? 1.0 : 0.3
        color: control.down ? "#17a81a" : "#21be2b"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    background: Rectangle {
        implicitWidth: 100
        implicitHeight: 40
        opacity: enabled ? 1 : 0.3
        border.color: control.down ? "#17a81a" : "#21be2b"
        border.width: 1
        radius: 2
        color: "black"  // I update background color by this
    }
}

2 个答案:

答案 0 :(得分:2)

QtQuick.Controls 2的常用方法是重新定义默认的Control视觉属性以自定义Control。正如我上面所说的,这种方法的缺点是您不能更改,例如只能更改背景颜色。覆盖Control.background会迫使您重新定义所有元素,包括边框,颜色,动画等。

查看Button的{​​{3}},我们可以看到它基于source定义了默认的Control.background属性。使用此属性,我们可以覆盖Control属性:

例如:

Button {        
    text: "Test button"
    palette {
        button: "green"
    }
}

但是您应该了解,内部来源将来可能会更改。另外,您还必须自己想象一下指定的控件使用了哪些调色板属性。

在上面的示例中,我为指定的控件重新定义了调色板。但是您可以全局重新定义调色板,既可以在Control.palette中设置颜色,也可以在C ++-qtquickcontrols2.conf中设置自定义调色板。

答案 1 :(得分:1)

与 QT Quick 2 配合使用:

Button {
        id: button
        text: qsTr("Button text")

        background: Rectangle {
                color: parent.down ? "#bbbbbb" :
                        (parent.hovered ? "#d6d6d6" : "#f6f6f6")
        }
}

当按钮按下或悬停时,上面的代码更改按钮颜色。还可以添加边框或其他自定义设置。