如何在QtQuick Qt6中设置按钮向下的颜色

Question

我一直在遵循一个旧的教程来了解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)
}
}

Answer 1

使用模板应该可以解决这个问题。我记得，如果你不使用模板，本地风格有时会发挥作用。我在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)
}
}