具有单例theme.qml的QML样式化按钮

我有一个用于主题定义的.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_bgbtn_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而不直接使用它?

liuyan515 回答:具有单例theme.qml的QML样式化按钮

我设法制作了一个名为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","danger": {
            color: "#be212b",downColor: "#77be212b",textColor: "#FF212b",}

    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"
}
本文链接:https://www.f2er.com/3082956.html

大家都在问