QML 单例样式化按钮 theme.qml

Question

我有一个用于主题定义的单例 .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
}

如果我只使用一个按钮，效果很好，但是当我使用两个具有相同主题背景和内容项的按钮时，它就不起作用了。

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

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
    }
}

和theme/DarkTheme.qml现在是这样的：

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"
}

QML 单例样式化按钮 theme.qml

QML Stylizing Button with singleton theme.qml

qt

themes

styles

button

qml