QtQuick 2 - 創建自定義調色板對象並將其作爲屬性傳遞給另一個自定義控件（用於分配顏色屬性）

我試圖製作自定義按鈕和其他一些樣式爲KDE 5'Breeze'主題的元素。我考慮爲所有這些小部件製作分離的調色板對象（稱爲BreezePalette.qml，其中包含很多隻讀顏色屬性）（因爲我不希望它們以任何其他方式設置樣式，那就是他們稱爲Breeze）。主要概念是將調色板作爲小部件的屬性，並在main.qml中創建一個調色板，我可以將屬性theme更改爲light或dark。它看起來對我來說是合理的，因爲我計劃只將.qml文件的所有子集包括到項目中，而沒有任何其他附加文件給Qt本身（這使得它可移植且易於部署）。這是我的，有人可以讓我知道我該如何將古老作爲財產？QtQuick 2 - 創建自定義調色板對象並將其作爲屬性傳遞給另一個自定義控件（用於分配顏色屬性）

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是爲了分享知識而設計的（或者甚至可能要求你不熟悉的東西），我認爲將它發佈在那裏是合理的，因爲我需要專家的知識。如果您對這個問題有任何其他觀點，我很樂意聽到。讚賞任何幫助。

感謝斯維亞託斯

UPDATE：

就找到了答案，這個代碼片斷的工作，以及

property BreezePalette palette: BreezePalette

所以，我的第二個答案是 - 是很好的用戶這種方法嗎？它提供了我需要的東西，完全如我所料。

來源

2015-05-07 user3417815

相當遲的答案，但有一個模塊有微風的主題。

qml-module-qtquick-controls-styles-breeze

來源

2017-04-27 12:17:27 LtWorf

QtQuick 2 - 創建自定義調色板對象並將其作爲屬性傳遞給另一個自定義控件（用於分配顏色屬性）

回答

相關問題