带有单例主题的QML样式化按钮。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
}

如果仅使用一个按钮，则效果很好，但是当我使用两个具有相同主题背景和contentItems的按钮时，它将无法正常工作。

---

我如何设法实现一个简单的系统，Button{}使用相同的背景和前景，但是克隆主题Rectangle而不直接使用它？

Answer 1

我已经设法制作了一个名为FButton.qml的新组件：