QtQuick 2 - 制作自定义调色板对象并将其作为属性扔给另一个自定义小部件（用于分配颜色属性）

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 是为分享知识而设计的（或者甚至可能是为了询问你不太了解的东西），所以我认为 post 它在那里是合理的，因为我需要专家的知识。如果您对这个问题有任何其他观点，我将很高兴听到。感谢任何帮助。

谢谢斯维亚托斯拉夫

更新：

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

property BreezePalette palette: BreezePalette

所以，我的第二个答案是 - 这种方法对用户有用吗？它提供了我需要的东西，完全符合预期。

Answer 1

很晚才回答，但是有一个模块有 breeze 主题。

qml-module-qtquick-controls-styles-breeze

QtQuick 2 - 制作自定义调色板对象并将其作为属性扔给另一个自定义小部件（用于分配颜色属性）

QtQuick 2 - Make custom palette object and throw it as property to another custom widget (for assigning color properties)

properties

colors

object

qml

qtquick2

QtQuick 2 - 制作自定义调色板对象并将其作为 属性 扔给另一个自定义小部件（用于分配颜色属性）

QtQuick 2 - Make custom palette object and throw it as property to another custom widget (for assigning color properties)

properties

colors

object

qml

qtquick2

QtQuick 2 - 制作自定义调色板对象并将其作为属性扔给另一个自定义小部件（用于分配颜色属性）