QML Stylizing Button with singleton theme.qml - qt

Question

I have a singleton .qml file for theme definitions: (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
Then I set the btn_bg and btn_fg to my buttons to stylize them:
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
}
If I use one button only, it works perfectly, but when I use two buttons with same theme background and contentItems, it is not working.
How can I manage to achieve a easy system like this, Button{}s uses same background and foreground but clones the theme Rectangle not directly uses it?

Answer 1

I have managed to do it with making a new component called 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
}
}
and theme/DarkTheme.qml is now like this:
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"
}
So, now I can use it like this:
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"
}