由于每次代碼都是在原有程序上修改，因此除了新建項目，不然一般會在學(xué)完后統(tǒng)一展示代碼。
提示：具體項目創(chuàng)建流程和注意事項見QT 學(xué)習(xí)筆記（一）
提示：具體項目準(zhǔn)備工作和細(xì)節(jié)講解見QT 學(xué)習(xí)筆記（二）

一、布局管理器

• 生成一個新的項目，具體步驟過程見提示。
• 所謂的 GUI 界面，就是一堆組件的疊加。我們創(chuàng)建一個窗口，把按鈕放在上面，把圖標(biāo)放在上面，這樣就成了一個界面。在放置時，組件的位置尤其重要。我們必須要指定組件放在哪里，以便窗口能夠按照我們需要的方式進(jìn)行渲染。這就涉及到組件定位的機制。
• 一般情況下布局都是通過 ui 控制器及進(jìn)行布局，通過代碼布局的話會顯得很抽象。
• QT 提供了兩種組件定位機制：絕對定位和布局定位。

1. 絕對定位

• 絕對定位就是一種最原始的定位方法：給出這個組件的坐標(biāo)和長寬值。
• 這樣，QT 就知道該把組件放在哪里以及如何設(shè)置組件的大小。
• 但是這樣做帶來的一個問題是，如果用戶改變了窗口大小，比如點擊最大化按鈕或者使用鼠標(biāo)拖動窗口邊緣，采用絕對定位的組件是不會有任何響應(yīng)的。
• 因為并沒有告訴 QT ，在窗口變化時，組件是否要更新自己以及如何更新。或者，還有更簡單的方法，就是禁止用戶改變窗口大小。

2. 布局定位

• 布局定位：只要把組件放入某一種布局，布局由專門的布局管理器進(jìn)行管理。當(dāng)需要調(diào)整大小或者位置的時候，Qt 使用對應(yīng)的布局管理器進(jìn)行調(diào)整。
• 布局定位完美的解決了使用絕對定位的缺陷。
• QT 提供的布局中以下三種是我們最常用的：
• （1）QHBoxLayout：按照水平方向從左到右布局。
• （2）QVBoxLayout：按照豎直方向從上到下布局。
• （3）QGridLayout：在一個網(wǎng)格中進(jìn)行布局，類似于 HTML 的 table。

3. 水平/垂直/網(wǎng)格布局

• 只有當(dāng) ui 界面當(dāng)中有控件，布局功能才會打開，在這里首先放置三個按鈕。

• QSpinBox 就是只能輸入數(shù)字的輸入框，并且?guī)в猩舷录^的步進(jìn)按鈕。
• QSlider 則是帶有滑塊的滑竿。
• 在網(wǎng)格布局之前，我們要先大致擺好我們要布局的樣子，之后在點擊網(wǎng)格布局按鈕。
• 在布局時，很有可能需要借助彈簧操作，如下：

• 我想讓按鈕水平布局后不要直接變成一整行，使其保持在中間，此時，我們就要使用彈簧功能（在放置之前，需要先取消整體布局的格式，不然仍會按照之前的格式進(jìn)行布局）。

• 分裂器水平布局和分裂器垂直布局的功能是可以手動拖動界面。

4. 實際練習(xí)

• 記得添加資源，我們才可以通過 Label 標(biāo)簽調(diào)用我們想要使用的圖片和動畫。
• 布局本身很簡單，但是需要大規(guī)模練習(xí)，才可以布置出好看的布局。
• （雖然有點丑，但基本實現(xiàn)預(yù)想功能。）

二、自定義控件

• 在搭建 QT 窗口界面的時候，在一個項目中很多窗口，或者是窗口中的某個模塊會被經(jīng)常性的重復(fù)使用。
• 一般遇到這種情況我們都會將這個窗口或者模塊拿出來做成一個獨立的窗口類，以備以后重復(fù)使用。
• 在使用 QT 的 ui 文件搭建界面的時候，工具欄欄中只為我們提供了標(biāo)準(zhǔn)的窗口控件，如果我們想使用自定義控件怎么辦？
• 以上一次做的登錄界面為例，添加一個微調(diào)和滑塊的功能。

1. ui 界面實現(xiàn)

• 這種方法沒有任何難度。

2. 代碼實現(xiàn)

• 先在 ui 界面預(yù)定位置放一個 Widget 容器。
• 然后，新建一個 smallwidget 小控件。
• 那么這個 smallwidget 可以作為獨立的窗口顯示，也可以作為一個控件來使用。
• 打開 QT 的 ui 文件，因為 smallwidget 是派生自 QWidget 類，所以需要在 ui 文件中先放入一個 QWidget 控件，然后再上邊鼠標(biāo)右鍵。

• 彈出提升窗口部件對話框。

• 添加之后，類名會顯示到上邊的列表框中，然后單擊提升按鈕，完成操作。我們可以看到，這個窗口對應(yīng)的類從原來的 QWidget 變成了 smallwidget 。
• 此時運行程序，會產(chǎn)生如下變化：

2.1 小控件頭文件 smallwidget.h

#ifndef SMALLWIDGET_H
#define SMALLWIDGET_H

#include <QWidget>
#include <QSpinBox>
#include <QSlider>
#include <QHBoxLayout>

class smallwidget : public QWidget
{
    Q_OBJECT
public:
    explicit smallwidget(QWidget *parent = nullptr);

public slots:

signals:

private:
    QSpinBox* spin;
    QSlider* slider;

public slots:
};

#endif // SMALLWIDGET_H

2.2 小控件源文件 smallwidget.cpp

#include "smallwidget.h"
#include <QSpinBox>
#include <QSlider>
#include <QHBoxLayout>

smallwidget::smallwidget(QWidget *parent) : QWidget(parent)
{
    QSpinBox *spin = new QSpinBox(this);
    QSlider *slider = new QSlider(Qt::Horizontal, this);

    // 創(chuàng)建布局對象
    QHBoxLayout* layout = new QHBoxLayout;

    // 將控件添加到布局中
    layout->addWidget(spin);
    layout->addWidget(slider);

    // 將布局設(shè)置到窗口中
    setLayout(layout);

    // 添加消息響應(yīng)
    connect(spin,static_cast<void (QSpinBox::*)(int)>(&QSpinBox::valueChanged),
            slider, &QSlider::setValue);
    connect(slider, &QSlider::valueChanged,
            spin, &QSpinBox::setValue);

}

三、QT 樣式表

• QT 樣式表的思想很大程度上是來自 HTML 的層疊式樣式表（CSS），通過調(diào)用 QWidget :: setStyleSheet() 或 QApplication :: setStyleSheet() ，可以為一個獨立的子部件，整個窗口，甚至是整個應(yīng)用程序指定一個樣式表。

1. QT 樣式規(guī)則

1.1 基本介紹

• 樣式表包含了一系列的樣式規(guī)則,每個樣式規(guī)則由選擇器 ( selector) 和聲明 ( decla-ration) 組成。選擇器指定了受該規(guī)則影響的部件，聲明指定了這個部件上要設(shè)置的屬性。例如：QPushButton{color:red}。
• 在這個樣式規(guī)則中，QPushButton 是選擇器，{ color: red } 是聲明。其中，color 是屬性，red 是值。
• 這個規(guī)則指定了 QPushButton 和它的子類應(yīng)該使用紅色作為前景色。QT 樣式表中一般不區(qū)分大小寫，例如： color，Color，COLOR 和 COloR 表示相同的屬性。只有類名，對象名和 QT 屬性名是區(qū)分大小寫的。一些選擇器可以指定相同的聲明，使用逗號隔開，例如：QPushButton，QLineEdit，QComboBox{color :red}。
• 為了使用方便，我們還可以使用一種簡化形式：

selector1，selector2， ...， selectorM{
attribute1: value1;
attribute2: value2;...
attoimuteM: xaluaN:
}

• 這種簡化模式可以同時為與 M 個選擇器相匹配的部件設(shè)置 N 種屬性。例如：

QCheckBox，QComboBox，QSpinBox{
color: red;
background-color: wh1te;
font: bold;
}

• 這個規(guī)則設(shè)置了所有的 QCheckBox 、QComboBox 和 QSpinBox 的前景色、背景色和字體。

1.2 實際演示

• 在 ui 界面當(dāng)中，放置一個 Label 標(biāo)簽。
• 可以直接規(guī)定具體顏色，即 red，yellow，blue 等等，也可以使用 RGB（R、G、B 都是在 0 到 255 之間） 配對顏色。
• 下面兩種都進(jìn)行展示。

文章來源地址http://www.zghlxwxcb.cn/news/detail-479757.html

• 背景色，前景色什么的同理，在此不過多敘述。

2. QT 盒子模型

• 當(dāng)使用樣式表時，每一個部件都被看作擁有 4 個同心矩形的盒子，如下圖所示這 4 個矩形分別是內(nèi)容 ( content ) ，填襯 ( padding ) ，邊框 ( border ) 和邊距 ( margin ) 。邊距、邊框?qū)挾群吞钜r等屬性的默認(rèn)值都是 0 ，這樣 4 個矩形恰好重合。
• 可以使用 background-image 屬性來為部件指定一個背景。默認(rèn)的，background-image 只在邊框以內(nèi)的區(qū)域進(jìn)行繪制，這個可以使用 background-clip 屬性來更改。還可以使用 background-repeat 和 background-origin 來控制背景圖片的重復(fù)方式以及原點。
• 一個 background-image 無法隨著部件的大小自動縮放,如果想要背景隨著部件大小變化,那就必須使用 border-image 。如果同時指定了 background-image 和 borimage ，那么 border-image 會繪制在 background-image 上。
• 此外，image 屬性可以用來在 border-image 上繪制一個圖片。如果使用 image 指定的圖片大小與部件的大小不匹配,那么它不會平鋪或者拉伸。圖片的對齊方式可以使用 image-position 屬性來設(shè)置。
  

3. 子控件

• 對于一些復(fù)雜的部件修改樣式,可能需要訪問它們的子控件，比如 QComboBox 的下拉按鈕，還有 QSpinBox 的向上和向下箭頭等。選擇器可以包含子控件來對部件的特定子控件應(yīng)用規(guī)則，例如：

QComboxBox::drop-down{image:url(dropdown.png)}

• 這樣的規(guī)則可以改變所有 QComboBox 部件的下拉按鈕的樣式。Qt Style SheetsReference關(guān)鍵字對應(yīng)幫助文檔的 List of Stylable Widgets 一項中列出了所有可以使用的樣式表來自定義樣式的 Qt 部件，List of SubControls 一項中列出了所有可用的子控件。

4. 偽狀態(tài)

• 選擇器可以包含偽狀態(tài)來限制規(guī)則在部件的指定狀態(tài)上應(yīng)用。偽狀態(tài)出現(xiàn)在選擇器之后，用冒號隔離，例如：

QPushButton:hover{color:white}

• 這個規(guī)則表明當(dāng)鼠標(biāo)懸停在一個 QPushButton 部件上時才被應(yīng)用。偽狀態(tài)可以使用感嘆號來表示否定。例如，要當(dāng)鼠標(biāo)沒有懸停在一個 QRadioButton 上時才應(yīng)用規(guī)則，那么這個規(guī)則可以寫為：

QRadioButton:!hover{color:red}

• 偽狀態(tài)還可以多個連用，達(dá)到邏輯與效果。例如，當(dāng)鼠標(biāo)懸停在一個被選中的 QCheckBox 部件上時才應(yīng)用規(guī)則，那么這個規(guī)則可以寫為：

QCheckBox: hover:checked{color:white}

• 如果有需要，也可以使用逗號來表示邏輯或操作，例如：

QCheckBox : hover,QCheckBox;checked{color :white)

• 當(dāng)然，偽狀態(tài)也可以和子控件聯(lián)合使用：

QComboBox :: drop- down: hover { image;url(dropdown_bright.png)}

• Qt Style Sheets Reference 關(guān)鍵字對應(yīng)幫助文檔的 List of Pseudo-States 一項中列出了 Qt 支持的所有偽狀態(tài)。

5. 沖突解決

• 當(dāng)幾個樣式規(guī)則對相同的屬性指定了不同的值時就會產(chǎn)生沖突。例如：

QPushButton# okButton(color:gray}
QPushButton {color:red}

• 這樣，okButton 的 color 屬性便產(chǎn)生了沖突。
• 解決這個沖突的原則是：
• （1） 特殊的選擇器優(yōu)先。 因為 QPushButton# okButton 一般代表一個單一的對象，而不是一個類所有的實例，所以它比 QPushButton 更特殊，那么這時便會使用第一個規(guī)則，okButton 的文本顏色為灰色。
• （2） 有偽狀態(tài)比沒有偽狀態(tài)優(yōu)先。如果兩個選擇符的特殊性相同，則后面出現(xiàn)的比前面的優(yōu)先。Qt 樣式表使用 CSS2 規(guī)范來確定規(guī)則的特殊性。

6. 選擇器類型

• Qt 樣式表支持 css2 中的所有選擇器。表中列出常用的選擇器類型：

到了這里，關(guān)于QT 學(xué)習(xí)筆記（七）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！