Qt---自定義界面之 Style Sheet

此次講Qt Style Sheet（QSS），QSS是一種與CSS相似的語言，實際上這二者幾乎徹底同樣。既然談到CSS咱們就有必要說一下盒模型。

1. 盒模型（The Box Model）

在樣式中，每個UI控件均可以抽象成一個盒模型：

盒模型由4個同心矩形組成，從外到內分別是外邊距、邊界、內襯和內容，大部分UI視覺內容都包含在內容矩形中。默認狀況下，前三個矩形的大小屬性都是0，所以這四個矩形都重疊成一個了。這裏與前三個大小相關的屬性有：

• margin：代指外邊距矩形與邊界矩形之間的間距。
• border-width：代指外邊距矩形與內襯矩形之間的間距。
• padding：代指內襯矩形與內容矩形之間的間距。

2. QSS（Qt Style Sheet）

QSS與CSS類似，所以這裏只大概介紹QSS的特色：

• 子控件：Qt容許咱們控制複雜控件的子控件，例如QComboBox的下拉按鈕、QCheckBox的勾選框等等。
• 僞狀態：Qt包含一些特殊的狀態：last、first等。
• 支持自定義類的樣式設置：得力於Qt的元對象系統，QSS能夠對用戶本身定義的類進行樣式設置。
• 命名空間特殊語法：因爲C++中的命名控件寫法（::）與Q 的子控件寫法衝突，所以改用--來表示命名空間。
• Qt屬性支持：任何經過Q_PROPERTY定義的屬性和Q_ENUM枚舉類均可以被樣式化。

3. 自定義樣式實例

這裏咱們經過一個示例程序來接觸QSS，由於實例程序涉及多個控件但咱們篇幅有限，咱們只介紹菜單相關的樣式設置。菜單分爲兩部分：菜單欄(QMenuBar)、菜單(QMenu)。

3.1 菜單欄樣式

咱們把菜單欄寬度設置成大於等於菜單item的寬度60px（這裏的width不指代整個菜單欄的寬度，比較奇怪），防止item的寬度被菜單欄的寬度限制，而且設置灰色點邊框。

QMenuBar {
        width:60px;
        background-color:white;
        border:1px dotted gray;

}

item這裏代指菜單欄上的每一項菜單，咱們設置邊框位groove以使其看起來有凹凸效果；設置margin-right，這樣兩個item之間會有合適的間隔；咱們還在不一樣的狀態下設置不一樣的背景顏色，這樣交互上比較友好。

QMenuBar::item {
    height:15px;
    width:60px;

    background:transparent;
    border:2px groove gray;
    margin-right:1px;
}
QMenuBar::item:selected {
    color:green;
    background-color:rgb(236, 242, 245);
}
QMenuBar::item:pressed {
    color:green;
    background-color:rgb(233, 227, 227);
}

3.2 菜單樣式

菜單咱們設置成與菜單欄同樣；菜單的item指代每個菜單選項，咱們對其設置合適的margin和padding大小，border、item的selected和pressed狀態設置成菜單欄的樣式，使其看起來佈局空間合理且與菜單欄一致：

QMenu {
    background-color:white;
    border:1px solid rgb(0, 171, 255);
    padding:1px;
}
QMenu::item {

    height:15px;
    width:60px;

    background-color:white;
    margin:1px;

    padding:2px 2px 2px 20px;

    border:2px groove gray;
}
QMenu::item:selected {
    color:green;
    background-color:rgb(236, 242, 245);
}
QMenu::item:pressed {
    color:green;
    background-color:rgb(233, 227, 227);
}

咱們重繪菜單之間的間隔條（separator），簡單的用淺藍色填充1像素高的背景：

QMenu::separator {
    height:1px;
    margin:1px;
    background-color:lightblue;
}

菜單的選中指示框和子菜單咱們用圖片來顯示，圖片選用png格式，保持透明通道，使其與背景一致：

QMenu::indicator:checked {
    width:10px;
    height:10px;
    margin-left:3px;
    border:0px solid blue;
    image:url(:/checked-icon.png);
}
QMenu::right-arrow {
    width:15px;
    height:15px;
    image:url(:/right-arrow.png);
}

4. 運行結果

程序的完整運行結果以下：

代碼見連接。

5. 總結

優勢：

• 開發效率高，使用簡單。
• QSS繪製模式統一（盒模型），一次學習多處使用。

缺點：

• 與CSS同樣，某些繪製細節比較複雜，須要嘗試。例如QLCDNumber沒有文檔說明能夠應用QSS，可是實際上能夠設置border和color，然而hover狀態下color屬性無論用。
• 繪製控件相對比較受限制。由於同CSS同樣，繪製都是按照既有的規則進行，天然不能像Qt原生控件那樣靈活（可是我的以爲不少場景用QSS就夠用了）。
• 某些控件的子控件不能獨立繪製。一旦一個子控件設置了樣式，其餘子控件也須要設置。