Question

我尝试制作自定义按钮，其他一些元素也被设计为KDE 5'Breeze'主题。我考虑为所有这些小部件制作分离的调色板对象（称为BreezePalette.qml，其中包含许多只读颜色属性）（因为我不希望它们以任何其他方式设置样式，这就是他们称之为Breeze）。主要概念是将调色板作为小部件的属性，并在main.qml中创建一个调色板，我可以将属性theme更改为light或dark。它看起来很合理，因为我计划只将.qml文件的所有子集包含到项目中，而没有任何其他附加文件到Qt本身（使其易于部署）。我有这个，有人能让我知道我怎么能把苍白作为财产转移？

main.qml

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Window 2.0
import QtQuick.Dialogs 1.1

ApplicationWindow {
    title: qsTr("Hello World")
    width: 640
    height: 480
    visible: true
    menuBar: MenuBar{
        Menu{
            title: "File"
        MenuItem{
            text: "Exit"
            onTriggered: Qt.quit()
        }
        }
    }
    BreezeButton{
        x: 106
        y: 82
        palette: brPalette
        onClicked: {
            Qt.quit()
        }
        caption: "Button"
    }
    BreezePalette{
        id: brPalette
        theme: "light"
    }
}

BreezePalette.qml

import QtQuick 2.2

QtObject {
    id: palette
    property string theme: "light"
    readonly property color base: if (theme == "light"){
                                      "#eff0f1"
                                  } else if (theme == "dark"){
                                      "#31363b"
                                  }
    readonly property color focus: "#3daee9"
    readonly property color buttonText: if (theme == "light"){
                                      "#31363b"
                                  } else if (theme == "dark"){
                                      "#eff0f1"
                                  }
}

BreezeButton.qml

import QtQuick 2.2
import QtQuick.Window 2.0
import QtQuick.Layouts 1.1
Item {
    id: root
    implicitHeight: bodyText.font.pixelSize + 32
    implicitWidth: bodyText.width + 32
    property string caption: "Button"
    property string iconSource
    property int fontSize: 18
    //I've tried to throw BreezePalette as a property to BreezeButton, but looks like my skills ended there (I have no any experience with js or qml before. I started learn it only few weeks)
    property BreezePalette palette
    signal clicked
    Rectangle {
        id: body
        border {
            width: 1
            color: "#808e8e"
        }
        anchors{
            fill: parent
        }
        gradient: Gradient {
            id: bodyGradient
            GradientStop { position: 0.4; color: "#4c4c4c" }
            GradientStop { position: 0.9; color: "#31363b" }
        }
        MouseArea{
            id: bodyMouseArea
            z: bodyText.z + 1
            anchors {
                fill: parent
            }

            hoverEnabled: true
            onEntered: {
                body.border.color = "#3daee9"

            }
            onExited: {
                body.border.color = "#7f8c8d"
            }
            onPressed: {
                body.color = "#3daee9" // this one works, but I need to switching theme as you can see n `BreezePalette.qml`
                //This one not working as expected, but seeing my properties as I need
                //body.color = palette.focus
                body.gradient = null
            }
            onReleased: {
                body.color = "#4d4d4d"
                body.gradient = bodyGradient
            }
            onClicked: {
                root.clicked()
            }
        }
        Text {
            id: bodyText
            anchors {
                verticalCenter: body.verticalCenter
                horizontalCenter: body.horizontalCenter
            }
            font.pointSize: fontSize
            color: "#fcfcfc"
            text: caption
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
        }
    }
}

由于stackexchange旨在分享知识（或者甚至可能用于询问你不熟悉的东西），我认为将其发布在那里是合理的，因为我需要专家的知识。如果您对此问题有任何其他观点，我会很高兴听到这个。感谢任何帮助。

由于斯维亚托斯

更新：

刚刚找到答案，此代码段也正常工作

property BreezePalette palette: BreezePalette

所以，我的第二个答案是 - 用这种方法好吗？它提供了我需要的东西，正如预期的那样。

Answer 1

很晚才回答，但有一个模块有微风主题。

QML模块-qtquick-控制的样式-微风

QtQuick 2 - 制作自定义调色板对象并将其作为属性投放到另一个自定义窗口小部件（用于指定颜色属性）

1 个答案: