1. QSS

在網(wǎng)頁(yè)前端開(kāi)發(fā)領(lǐng)域中，CSS 是?個(gè)?關(guān)重要的部分. 描述了?個(gè)網(wǎng)頁(yè)的 “樣式”，從而起到對(duì)網(wǎng)頁(yè)美化的作用.

所謂樣式, 包括不限于大小、位置、顏?、背景、間距、字體等等.

網(wǎng)頁(yè)開(kāi)發(fā)作為 GUI 的典型代表，也對(duì)于其他客?端 GUI 開(kāi)發(fā)產(chǎn)?了影響，Qt 也是其中之?.

1.1 基本語(yǔ)法

Qt 仿照 CSS 的模式，引?了 QSS，來(lái)對(duì) Qt 中的控件做出樣式上的設(shè)定，從而允許程序猿寫(xiě)出界?更好看的代碼

由于 Qt 本身的設(shè)計(jì)理念和網(wǎng)頁(yè)前端還是存在?定差異的，因此 QSS 中只能?持部分 CSS 屬性；整體來(lái)說(shuō) QSS 要比 CSS 更簡(jiǎn)單?些

注意：如果通過(guò) QSS 設(shè)置的樣式和通過(guò) C++ 代碼設(shè)置的樣式?jīng)_突，則 QSS 優(yōu)先級(jí)更?

對(duì)于 CSS 來(lái)說(shuō), 基本的語(yǔ)法結(jié)構(gòu)?常簡(jiǎn)單.

選擇器 {
	屬性名: 屬性值;
}

QSS 沿?了這樣的設(shè)定.

選擇器 {
	屬性名: 屬性值;
}

• 選擇器 描述了 “哪個(gè) widget 要應(yīng)用樣式規(guī)則”
• 屬性 則是?個(gè)鍵值對(duì)，屬性名表?要設(shè)置哪種樣式，屬性值表?了設(shè)置的樣式的值.

QPushButton {
	color: red;
}

上述代碼的含義表示，針對(duì)界?上所有的 QPushButton，都把文本顏色設(shè)置為紅色

1.2 設(shè)置方式

1.2.1 指定控件樣式設(shè)置

QWidget 中包含了 setStyleSheet 方法，可以直接設(shè)置樣式.

給指定控件設(shè)置樣式之后，該控件的子元素也會(huì)受到影響.

Widget::Widget(QWidget *parent)
	: QWidget(parent)
	, ui(new Ui::Widget)
{
	ui->setupUi(this);
	// 給 Widget 本?設(shè)置樣式.
	//樣式對(duì)于子控件同樣生效
	this->setStyleSheet("QPushButton { color: red;} ");
	
	//ui->pushButton->setStyleSheet("QPushButton { color: red; }");
}

1.2.2 全局樣式設(shè)置

還可以通過(guò) QApplication 的 setStyleSheet ?法設(shè)置整個(gè)程序的全局樣式.

全局樣式優(yōu)點(diǎn):

• 使同?個(gè)樣式針對(duì)多個(gè)控件?效，代碼更簡(jiǎn)潔.
• 所有控件樣式內(nèi)聚在?起，便于維護(hù)和問(wèn)題排查.

在 CSS 中也存在類(lèi)似的優(yōu)先級(jí)規(guī)則，通常來(lái)說(shuō)都是 “局部” 優(yōu)先級(jí)?于 “全局” 優(yōu)先級(jí)； 相當(dāng)于全局樣式先 “奠定基調(diào)” ，再通過(guò)指定控件樣式來(lái) “特事特辦”

對(duì)于第?個(gè)按鈕來(lái)說(shuō)，由于局部樣式的存在，它的顏色為綠色；對(duì)于第二個(gè)按鈕，兩種設(shè)置方式設(shè)置的樣式，疊加起來(lái)了，形如上述這種屬性疊加的效果，我們稱(chēng)為 “層疊性”.

1.2.3 從文件加載樣式表

上述代碼都是把樣式通過(guò)硬編碼的方式設(shè)置的，這樣使 QSS 代碼和 C++ 代碼耦合在?起了，并不方便代碼的維護(hù)，因此更好的做法是把樣式放到單獨(dú)的文件中，然后通過(guò)讀取文件的方式來(lái)加載樣式。

創(chuàng)建 style.qss 文件，并添加到 resource.qrc 中.

• style.qss 是需要程序運(yùn)?時(shí)加載的，為了規(guī)避絕對(duì)路徑的問(wèn)題，仍然使用 qrc 的?式來(lái)組織 (即把資源?件內(nèi)容打包到 cpp 代碼中).
• Qt Creator 沒(méi)有提供創(chuàng)建 qss 文件的選項(xiàng)，咱們直接 右鍵 -> 新建?件 -> ?動(dòng)設(shè)置?件擴(kuò)展名為 qss 即可.

1.2.4 使用 Qt Designer 編輯樣式

QSS 也可以通過(guò) Qt Designer 直接編輯，從而起到實(shí)時(shí)預(yù)覽的效果. 同時(shí)也能避免 C++ 和 QSS 代碼的耦合.

此時(shí) Qt Designer 的預(yù)覽界?就會(huì)實(shí)時(shí)顯示出樣式的變化

當(dāng)我們發(fā)現(xiàn)?個(gè)控件的樣式不符合預(yù)期的時(shí)候, 要記得排查這四個(gè)地?:

• 全局樣式
• 指定控件樣式
• qss ?件中的樣式
• ui ?件中的樣式

2. 選擇器

QSS 的選擇器支持以下幾種:

2.1 類(lèi)型與類(lèi)選擇器

int main(int argc, char *argv[])
{
	QApplication a(argc, argv);
	//類(lèi)型選擇器，設(shè)置全局樣式
	a.setStyleSheet("QWidget { color: red; }");
	//類(lèi)選擇器
	//只是選擇 QWidget類(lèi), ?不會(huì)選擇QWidget 的?類(lèi) QPushButton了
	a.setStyleSheet(".QWidget { color: green; }");
	Widget w;
	w.show();
	return a.exec();
}

2.2 id選擇器

int main(int argc, char *argv[])
{
	QApplication a(argc, argv);
	// 設(shè)置全局樣式
	QString style = "";
	//類(lèi)型選擇器
	style += "QPushButton { color: yellow; }";
	//ID選擇器
	style += "#pushButton { color: red; }";
	style += "#pushButton_2 { color: green; }";
	a.setStyleSheet(style);
	Widget w;
	w.show();
	return a.exec();
}

當(dāng)某個(gè)控件身上，通過(guò)類(lèi)型選擇器和 ID 選擇器設(shè)置了沖突的樣式時(shí)，ID 選擇器樣式優(yōu)先級(jí)更?.

同理，如果是其他的多種選擇器作?同?個(gè)控件時(shí)出現(xiàn)沖突的樣式，也會(huì)涉及到優(yōu)先級(jí)問(wèn)題.

實(shí)踐中我們可以簡(jiǎn)單的認(rèn)為，選擇器描述的范圍越精準(zhǔn)，則優(yōu)先級(jí)越?，?般來(lái)說(shuō)，ID 選擇器優(yōu)先級(jí)是最?的.

2.3 并集選擇器

int main(int argc, char *argv[])
{
	QApplication a(argc, argv);
	// 設(shè)置全局樣式
	a.setStyleSheet("QPushButton, QLabel, QLineEdit { color: red; } ");
	Widget w;
	w.show();
	return a.exec();
}

運(yùn)行程序，可以看到這三種控件的文字顏?都設(shè)置為了紅色

并集選擇器是?種很好的代碼復(fù)用的?式，很多時(shí)候我們希望界?上的多個(gè)元素?格是統(tǒng)?的，就可以使?并集選擇器，把樣式屬性同時(shí)指定給多種控件

2.4 子控件選擇器

有些控件內(nèi)部包含了多個(gè) “子控件” ，比如 QComboBox 的下拉后的?板，?如 QSpinBox 的上下按鈕等

可以通過(guò)子控件選擇器 :: ，針對(duì)上述?控件進(jìn)?樣式設(shè)置.

也可直接在Qt Designer中右側(cè)的屬性編輯器設(shè)置

2.5 偽類(lèi)選擇器

偽類(lèi)選擇器，是根據(jù)控件所處的某個(gè)狀態(tài)被選擇的，例如按鈕被按下，輸?框獲取到焦點(diǎn)，?標(biāo)移動(dòng)到某個(gè)控件上等.

• 當(dāng)狀態(tài)具備時(shí)，控件被選中，樣式?效.
• 當(dāng)狀態(tài)不具備時(shí)，控件不被選中，樣式失效.

使? : 的方式定義偽類(lèi)選擇器

常用的偽類(lèi)選擇器

這些狀態(tài)可以使? ! 來(lái)取反. ?如 :!hover 就是?標(biāo)離開(kāi)控件時(shí), :!pressed 就是鼠標(biāo)松開(kāi)時(shí), 等等.

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QString style = "";
    style += "QPushButton { color: red; }";
    style += "QPushButton:hover { color: green; }";
    style += "QPushButton:pressed { color: blue; }";
    a.setStyleSheet(style);
    Widget w;
    w.show();
    return a.exec();
}

可以看到，默認(rèn)情況下按鈕?字是紅?，?標(biāo)移動(dòng)上去是綠?，?標(biāo)按下按鈕是藍(lán)?.

3. 樣式屬性

3.1 盒模型

?個(gè)遵守盒模型的控件，由上述幾個(gè)部分構(gòu)成

• Content 矩形區(qū)域：存放控件內(nèi)容，比如包含的文本/圖標(biāo)等.
• Border 矩形區(qū)域: 控件的邊框.
• Padding 矩形區(qū)域: 內(nèi)邊距，邊框和內(nèi)容之間的距離.
• Margin 矩形區(qū)域: 外邊距，邊框到控件 geometry 返回的矩形邊界的距離

默認(rèn)情況下，外邊距、內(nèi)邊距、邊框?qū)挾榷际?0

可以通過(guò)?些 QSS 屬性來(lái)設(shè)置上述的邊距和邊框的樣式

下面，我們來(lái)設(shè)置一下邊框樣式與內(nèi)邊距

其中，border：5px solid red，相當(dāng)于 border-width: 5px; border-style: solid; border-color: red;（一般按照 寬度 → 樣式 → 顏色的順序書(shū)寫(xiě)，其它方式可能會(huì)解析失?。?/p>

再來(lái)設(shè)置一下外邊距

其中，margin的可以寫(xiě)多個(gè)，順序是：上-> 右 -> 下-> 左

3.2 控件常用樣式

下?，我們給出?些常用控件的樣式示例

按鈕

復(fù)選框

使用藍(lán)色作為默認(rèn)形態(tài).
使用綠色作為 hover 形態(tài).
使用紅色作為 pressed 形態(tài).

單選框也是如此，這里就不演示了

輸入框

關(guān)于顏色，其中有一個(gè)屬性 qlineargradient qlineargradient 有 6 個(gè)參數(shù)：

• x1, y1: 標(biāo)注了?個(gè)起點(diǎn)，
• x2, y2: 標(biāo)注了?個(gè)終點(diǎn)，這兩個(gè)點(diǎn)描述了?個(gè) “方向”，例如:
  • x1: 0, y1: 0, x2: 0, y2: 1 就是垂直?向從上向下 進(jìn)?顏?漸變.
  • x1: 0, y1: 0, x2: 1, y2: 0 就是?平?向從左向右 進(jìn)?顏?漸變.
  • x1: 0, y1: 0, x2: 1, y2: 1 就是從左上往右下?向 進(jìn)?顏?漸變.
• stop0 和 stop1 描述了兩個(gè)顏?. 漸變過(guò)程就是從 stop0 往 stop1 進(jìn)?漸變的.

菜單欄

對(duì)于菜單欄而言，它可以分為菜單欄與菜單項(xiàng)，它們各自有不同的樣式：

下面，我們就做一個(gè)樣式稍微綜合一點(diǎn)的案例：登錄界面

首先，我們先使用Qt Designer拖拽出來(lái)幾個(gè)控件，然后使用布局布局管理器來(lái)設(shè)置一下

由于頂層窗?的 QWidget ?法設(shè)置背景圖?， 因此我們需要再套上?層 QFrame，背景圖?就可以設(shè)置到 QFrame 上即可

設(shè)置背景圖片，出來(lái)使用background-image之外，還有一個(gè)border-image，其中，border-image設(shè)置的背景，會(huì)隨著控件的大小而改變

QSS 本?給 Qt 提供了更豐富的樣式設(shè)置的能力，但是整體來(lái)說(shuō) QSS 的功能是不如 CSS 的，在 CSS 中，整個(gè)網(wǎng)頁(yè)的樣式，都是 CSS ?手負(fù)責(zé)，CSS 功能更強(qiáng)大，并且也更可控。

相比之下，Qt 中是以原? api 為主，來(lái)控制控件之間的尺?、位置等，QSS 只是起到輔助的作?；?且 Qt 中提供的?些 “組合控件” (像 QComboBox, QSpinBox 等) 內(nèi)部的結(jié)構(gòu)是不透明的，此時(shí)進(jìn)??些樣式設(shè)置也會(huì)存在?定的局限性

4. 繪圖

雖然 Qt 已經(jīng)內(nèi)置了很多的控件，但是不能保證現(xiàn)有控件就可以應(yīng)對(duì)所有場(chǎng)景，很多時(shí)候我們需要更強(qiáng)的 “?定制” 能力。

Qt 提供了畫(huà)圖相關(guān)的 API，可以允許我們?cè)诖?上繪制任意的圖形形狀，來(lái)完成更復(fù)雜的界?設(shè)計(jì).

所謂的 “控件” ，本質(zhì)上也是通過(guò)畫(huà)圖的?式畫(huà)上去的，畫(huà)圖 API 和控件之間的關(guān)系，可以類(lèi)?成機(jī)器指令和?級(jí)語(yǔ)?之間的關(guān)系。
控件是對(duì)畫(huà)圖 API 的進(jìn)?步封裝，畫(huà)圖 API 是控件的底層實(shí)現(xiàn).

繪圖 API 核?類(lèi)

繪圖 API 的使用，?般不會(huì)在 QWidget 的構(gòu)造函數(shù)中使用，而是要放到 paintEvent 事件中.

paintEvent 會(huì)在以下情況下被觸發(fā):

• 控件?次創(chuàng)建.
• 控件被遮擋，再解除遮擋.
• 窗口最小化，再恢復(fù).
• 窗口最小化，再恢復(fù).
• 控件大小發(fā)?變化時(shí).
• 主動(dòng)調(diào)? repaint() 或者 update() ?法(這兩個(gè)?法都是 QWidget 的?法).

4.1 繪制形狀

線(xiàn)段

//參數(shù)：
//p1：繪制起點(diǎn)坐標(biāo)
//p2：繪制終點(diǎn)坐標(biāo)
void drawLine(const QPoint &p1, const QPoint &p2);

矩形

//參數(shù)：
//x：窗?橫坐標(biāo)；
//y：窗?縱坐標(biāo)；
//width：所繪制矩形的寬度；
//height：所繪制矩形的?度；
void QPainter::drawRect(int x, int y, int width, int height)；

圓

//參數(shù)：
//center：中?點(diǎn)坐標(biāo)
//rx：橫坐標(biāo)
//ry：縱坐標(biāo)
void QPainter::drawEllipse(const QPoint &center, int rx, int ry)

4.2 繪制文本

文本

QPainter類(lèi) 中不僅提供了繪制圖形的功能，還可以使用 QPainter::drawText() 函數(shù)來(lái)繪制?字，也可以使用QPainter::setFont() 設(shè)置字體等信息

畫(huà)筆

QPainter 在繪制時(shí)，是有?個(gè)默認(rèn)的畫(huà)筆的。在使?時(shí)也可以?定義畫(huà)筆，在 Qt 中，QPen類(lèi)中定義了 QPainter 應(yīng)該如何繪制形狀、線(xiàn)條和輪廓。同時(shí)通過(guò) QPen類(lèi) 可以設(shè)置畫(huà)筆的線(xiàn)寬、顏?、樣式、畫(huà)刷等。

畫(huà)筆的顏?可以在實(shí)例化畫(huà)筆對(duì)象時(shí)進(jìn)?設(shè)置，畫(huà)筆的寬度是通過(guò) setWidth() 方法進(jìn)?設(shè)置，畫(huà)筆的風(fēng)格是通過(guò)setStyle(）方法進(jìn)行設(shè)置，設(shè)置畫(huà)刷主要是通過(guò) setBrush() ?法。

• 設(shè)置畫(huà)筆顏?：QPen::QPen(const QColor &color)
• 設(shè)置畫(huà)筆寬度：void QPen::setWidth(int width)
• 設(shè)置畫(huà)筆風(fēng)格：void QPen::setStyle(Qt::PenStyle style)

其中，畫(huà)筆的風(fēng)格如下：

畫(huà)刷

畫(huà)刷是使用 QBrush類(lèi) 來(lái)描述，畫(huà)刷大多用于填充。QBrush定義了QPainter的填充模式，具有樣式、顏?、漸變以及紋理等屬性。
畫(huà)刷的格式中定義了填充的樣式，使? Qt::BrushStyle 枚舉，默認(rèn)值是 Qt::NoBrush，也就是不進(jìn)?任何填充

4.3 繪制圖片

Qt 提供了四個(gè)類(lèi)來(lái)處理圖像數(shù)據(jù)：QImage、QPixmap、QBitmap 和 QPicture，它們都是常?的繪圖設(shè)備。

• QImage主要?來(lái)進(jìn)? I/O 處理，它對(duì) I/O 處理操作進(jìn)?了優(yōu)化，?且可以?來(lái)直接訪(fǎng)問(wèn)和操作像素；
• QPixmap 主要?來(lái)在屏幕上顯?圖像，它對(duì)在屏幕上顯?圖像進(jìn)?了優(yōu)化；
• QBitmap 是 QPixmap 的子類(lèi)，用來(lái)處理顏?深度為1的圖像，即只能顯示黑白兩種顏?；
• QPicture ?來(lái)記錄并重演 QPainter 命令。

下面我們來(lái)簡(jiǎn)單使用一下QPixmap:

平移圖片

平移圖片實(shí)際是通過(guò)改變坐標(biāo)來(lái)實(shí)現(xiàn)。QPainter類(lèi)中提供了 translate()函數(shù) 來(lái)實(shí)現(xiàn)坐標(biāo)原點(diǎn)的改變

關(guān)于繪制圖片，還有很多很多的設(shè)置，我們這里就不贅述了。

• 旋轉(zhuǎn)圖?
• 移動(dòng)畫(huà)家位置
• 保存/加載畫(huà)家的狀態(tài)

前?的代碼中我們是使? QWidget 作為繪圖設(shè)備，在 Qt 中還存在下列三個(gè)?較特殊的繪圖設(shè)備

1. QPixmap

QPixmap 核心特性:

• 使? QPainter 直接在上?進(jìn)?繪制圖形.
• 通過(guò)?件路徑加載并顯?圖?.
• 搭配 QPainter 的 drawPixmap()函數(shù), 可以把這個(gè)圖?繪制到?個(gè) QLabel、QPushButton 等控件上.
• 和系統(tǒng)/顯?設(shè)備強(qiáng)相關(guān), 不同系統(tǒng)/顯?設(shè)備下, QPixmap 的顯?可能會(huì)有所差別

2. QImage

QImage 的核心特性:

• 使? QPainter 直接在上?進(jìn)?繪制圖形.
• 通過(guò)?件路徑保存/加載圖?.
• 能夠針對(duì)圖?進(jìn)?像素級(jí)別的操作(操作某個(gè)指定的像素).
• 獨(dú)?于硬件的繪制系統(tǒng), 能夠在不同系統(tǒng)之上提供?致的顯?.

3. QPicture

QPicture 核?特性:

• 使? QPainter 直接在上?進(jìn)?繪制圖形.
• 通過(guò)?件路徑加載并顯?圖?.
• 能夠記錄 QPainter 的操作步驟.
• 獨(dú)?于硬件的繪制系統(tǒng), 能夠在不同系統(tǒng)之上提供?致的顯?.

總結(jié)

到此這篇關(guān)于QT使用QSS進(jìn)行界面美化的文章就介紹到這了,更多相關(guān)QT用QSS界面美化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論