QML带有单例主题的样式化按钮.QML

Question

我有一个用于主题定义的singleton.qml文件：(theme/DarkTheme.qml(

pragma Singleton
import QtQuick 2.4
QtObject {
property var btn: {
"primary": {
color: "#21be2b",
downColor: "#7721be2b",
textColor: "#21be2b",
textDownColor: "#ffffff"
},
}
property color disableColor: "#999999"
property color transparent: "#00000000"
// Primary Button
property QtObject btn_bg: Rectangle {
color: parent ? parent.down ? btn.primary.downColor : transparent : transparent
opacity: enabled ? 1 : 0.7
border.color: enabled ? parent ? btn.primary.color : btn.primary.color : disableColor
border.width: 1
radius: 7
}
property QtObject btn_fg: Text {
text: parent ? parent.text : ""
font.pixelSize: 24
opacity: enabled ? 1.0 : 0.5
color: enabled ? parent ? parent.down ? btn.primary.textDownColor : btn.primary.textColor : btn.primary.textColor : disableColor
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}

qmldir:

singleton Theme theme/DarkTheme.qml

然后，我将btn_bg和btn_fg设置为我的按钮，以使它们风格化：

Button {
width: 140
height: 60
text: "Button"
background: Theme.btn_bg
contentItem: Theme.btn_fg
}
Button {
x: 90
y: 90
width: 140
height: 60
text: "Button2"
background: Theme.btn_bg
contentItem: Theme.btn_fg
}

如果我只使用一个按钮，它可以很好地工作，但当我使用两个主题背景和contentItems相同的按钮时，它就不工作了。

---

我如何才能实现这样一个简单的系统，Button{}使用相同的背景和前景，但克隆了主题矩形而不是直接使用它？

Answer 1

我已经成功地制作了一个名为FButton.qml:的新组件

import QtQuick 2.4
import QtQuick.Controls 2.3
import "../"
Button {
property string theme: "primary"
property var themeObj: Theme.buttons[theme]
background: Rectangle {
color: parent.down ? themeObj.downColor : Theme.transparent
opacity: enabled ? 1 : 0.7
border.color: enabled ? themeObj.color : Theme.disableColor
border.width: 1
radius: 7
}
contentItem: Text {
text: parent.text
font.pixelSize: 24
opacity: enabled ? 1.0 : 0.5
color: enabled ? parent.down ? themeObj.textDownColor : themeObj.textColor : Theme.disableColor
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}

CCD_ 5现在是这样的：

pragma Singleton
import QtQuick 2.4
QtObject {
property var buttons: {
"primary": {
color: "#21be2b",
downColor: "#7721be2b",
textColor: "#21be2b",
textDownColor: "#ffffff"
},
"warn": {
color: "#bebe2b",
downColor: "#77bebe2b",
textColor: "#FFbe2b",
textDownColor: "#ffffff"
},
"danger": {
color: "#be212b",
downColor: "#77be212b",
textColor: "#FF212b",
textDownColor: "#ffffff"
},
}
property color disableColor: "#999999"
property color transparent: "#00000000"
}

---

所以，现在我可以这样使用它：

FButton {
x: 20
y: 20
width: 140
height: 60
text: "Button"
theme: "primary"
}
FButton {
x: 20
y: 90
width: 140
height: 60
text: "Button2"
theme: "primary"
}