Style

講到元件，一定會講到 style，假設你今天設計一個 Button 元件，使用者 (Application) 一定會希望可以設定字型大小、顏色等等樣式，來產生出符合他們整體 style 的 Button。

最簡單的 style

Qml Styling 是 Qt Wiki 上一份在講 style 的文件，裡頭提到有 3 種方法可以達到 style，但實際上：

1. 第一種我覺得根本稱不上 style，因為它就是直接把你元件中的屬性改掉，只是因為抽成了一個自訂元件，所以改元件的 style，全部用到的地方都會跟著被調整。

2. 第二種是使用 Singleton，但其實就只是把原本 style 相關的屬性拆到另一個單獨的 singleton QML 而已，可以想像成是一個 global property 的概念。

3. 第三種是把上面兩個加起來，變成是 Component + Singleton Style QML。

實務上會碰到的問題

但身為一個專業的軟體開發人員，你的元件實務上會被很多不同的軟體使用，有些軟體 Button 要黑色，有些軟體要白色，也有些軟體是裡面有紅、黃、綠三種顏色的 Button，這時侯你就會發現上面三個方法好像沒有把事情講完的感覺，你 Style.qml 裡面到底是要設黑色還是設白色?

完整設計

假設我今天設計一個 Button Component，那它應該要長成這樣子

Button.qml

import QtQuick 2.4
import "."

Rectangle {
    property string bgColor:ButtonStyle.bgColor
    property string textColor:ButtonStyle.textColor
    ...
}

ButtonStyle.qml

pragma Singleton
import QtQuick 2.4
QtObject {
    property string bgColor: "#001100"
    property string textColor: "#fefeff"
    property QtObject  borderStyle:
    QtObject {
        readonly property int none: 0
        readonly property int glow: 1
        ...
        }

}

qmldir

singleton ButtonStyle ButtonStyle.qml

那麼實際使用情況會是這樣：

應用程式是灰色系，先把原本預設的 ButtonStyle.bgColor 在執行期覆寫掉，則所有的 Button 都會長一樣 你可以自己找一個時間點，把 ButtonStyle.bgColor 設成你要的值，如

Component.onCompleted: {
    ButtonStyle.bgColor = "#EEEEEE"
}

則你這個應用程式全部的 Button 顏色都會是#EEEEEE。

如果有某個 Button 比較特別要換自己的顏色，如 DELETE 想用紅色，那就是它自己指定 color:"red" 即可。

[UserManagement.qml]

Button {
    id: btnDelete
    color:"red"
    width: inptBoxPortWidth
    text: "DELETE USER"
    borderStyle: ButtonStyle.borderStyle.glow
}

上面還有一個 borderStyle: ButtonStyle.borderStyle.glow，這個值是 readonly，可以拿來當 enum 使用。

如果整個程式中有很多地方用黑色 Button ,也很多地方用紅色 Button，那就是要另外寫二個 Button出來

BlackButton {
    Button {
    color:"black"
    }
}

RedButton {
    Button {
    color:"red"
    }
}

註記

用 Singleton 可以減少一些 overhead，像 enum 這種一定是所有人都長一樣的東西，在設計上會盡量使用 singleton 來增進效能。