如何在 QtQuick Qt6 中设置 Button.down 颜色？答案

【问题标题】：How do I set the Button.down color in QtQuick Qt6?如何在 QtQuick Qt6 中设置 Button.down 颜色？
【发布时间】：2022-10-20 19:52:59
【问题描述】：

我一直在关注一个较旧的教程来了解 QtQuick。为了获得正确的行为，我不得不修改教程。到目前为止，大部分都在工作，但是当实际按下自定义按钮时，我一直坚持设置颜色。所以目前，我已经成功设置了默认颜色和悬停颜色。但是，当我按下按钮时，会显示继承的颜色。

在查看文档时，设置 flat:true 可以防止重绘背景，除非单击。单击时如何防止重绘发生？或者也许有更好的方法？

这是我的最小工作示例：

import QtQuick 2.15
import QtQuick.Controls 2.15

Button {
    id: btnToggle

    property color btnColorDefault: "#0000ff"
    property color btnColorMouseOver: "#00ff00"
    property color btnColorClicked: "#ff0000"


    implicitWidth: 70
    implicitHeight: 60
    flat: true

    background: Rectangle {
        id: bgBtn
        color: btnToggle.down ? btnColorClicked :
                                ( btnToggle.hovered ? btnColorMouseOver : btnColorDefault)
    }
}

【问题讨论】：

标签： qt-quick qt6 qtquickcontrols

【解决方案1】：

使用Template 应该可以解决问题。我记得如果你不使用模板，原生样式有时会出现。我在 Windows 上使用 ScrollBar 样式时遇到了这个问题。

您的示例在我的 Linux 机器上运行良好。

import QtQuick
import QtQuick.Templates as T

T.Button {
    id: btnToggle

    property color btnColorDefault: "#0000ff"
    property color btnColorMouseOver: "#00ff00"
    property color btnColorClicked: "#ff0000"


    implicitWidth: 70
    implicitHeight: 60
    flat: true

    background: Rectangle {
        id: bgBtn
        color: btnToggle.down ? btnColorClicked :
                                ( btnToggle.hovered ? btnColorMouseOver : btnColorDefault)
    }
}

【讨论】：