本篇介紹什么是樣式表，討論如何使用Qt樣式表Qss修改應(yīng)用程序外觀，并通過實(shí)例進(jìn)行講解。
了解HTML的同學(xué)都知道，一般在HTML中我們把樣式表叫做CSS，在Qt中我們稱之為QSS。QSS和CSS并不完全等同，語法完全類似，定義上存在一些差別。
QSS是Qt程序界面中用來設(shè)置控件的背景圖片、大小、字體顏色、字體類型、按鈕狀態(tài)變化等屬性，用于美化UI界面。實(shí)現(xiàn)界面和程序的分離，快速切換皮膚。
QSS最大的優(yōu)點(diǎn)就是簡(jiǎn)單便捷，我們可以通過它快速實(shí)現(xiàn)應(yīng)用程序的外觀界面。
QPushButton {color: red} //代表QPushButton 顏色為紅色
2）幾個(gè)選擇器可以指定相同的聲明，使用逗號(hào)“，”來分隔選擇器
//代表QPushButton ，QLineEdit，QComboBox 顏色為紅色
QPushButton，QLineEdit，QComboBox {color: red}
3）聲明部分的規(guī)則有多個(gè)屬性值時(shí)包含在花括號(hào){}中，以分號(hào);分隔，屬性之間在QSS之間是不區(qū)分大小寫的
QPushButton {color: red;background-color:white;}
Qt中設(shè)置樣式表最主要的函數(shù)為setStyleSheet
通過實(shí)例來介紹如何去設(shè)置Qt的樣式表，
1）新建工程
2）拉入一個(gè)按鈕，此時(shí)編譯運(yùn)行之后，按下按鈕其字體和顏色都是沒有發(fā)生變化的。
3）通過樣式表使得按下按鈕后其字體和顏色發(fā)生變化。
（1）修改按鈕中字體顏色ui->pushButton->setStyleSheet(QString("QPushButton{color:rgb(255,0,0)}"));實(shí)現(xiàn)按鈕中的字體顯示為紅色
Widget::Widget(QWidget *parent) :
QWidget(parent),
ui(new Ui::Widget)
{
ui->setupUi(this);
ui->pushButton->setStyleSheet(QString("QPushButton{color:rgb(255,0,0)}"));
}
運(yùn)行結(jié)果：
（2）設(shè)置按鈕按下后的顏色變化
以下代碼中：QPushButton:pressed表示按鈕按下后，顏色為background-color:rgb(200,200,200);，border-style:inset;表示內(nèi)邊框；color:rgb(0,255,0);字體顏色為color:rgb(0,255,0);，其中“\”代表本行寫不下，下行仍為同一行。
Widget::Widget(QWidget *parent) :
QWidget(parent),
ui(new Ui::Widget)
{
ui->setupUi(this);
ui->pushButton->setStyleSheet(QString("QPushButton:pressed{ \
background-color:rgb(200,200,200);\
border-style:inset;\
color:rgb(0,255,0);\
}\
QPushButton{color:rgb(255,0,0)}"));
}
運(yùn)行結(jié)果：未按下按鈕結(jié)果與上步一致，按下后字體顏色為綠色
上述的方法是使用setStyleSheet 函數(shù)實(shí)現(xiàn)QSS的方法，下來將會(huì)先介紹樣式表的屬性指向，然后利用QtCreate實(shí)現(xiàn)上述內(nèi)容，最終探討兩種實(shí)現(xiàn)方法的區(qū)別。
以下屬性值熟悉有什么內(nèi)容即可，在使用時(shí)再去具體查詢使用
1）QSS文本屬性
2）QSS背景屬性
3）QSS邊框?qū)傩?br>
4）QSS Box屬性
我們將控件的一個(gè)區(qū)域稱為Box，這個(gè)Box的內(nèi)容如果溢出了如何處理，均使用Box屬性進(jìn)行設(shè)置
5）QSS 字體屬性
6）QSS 外邊框?qū)傩?br> 控件之間的間距可以使用外邊框?qū)傩栽O(shè)置
7）QSS 內(nèi)邊框?qū)傩?br>
8）QSS 位置屬性
#if 0
ui->pushButton->setStyleSheet(QString("QPushButton:pressed{ \
background-color:rgb(200,200,200);\
border-style:inset;\
color:rgb(0,255,0);\
}\
QPushButton{color:rgb(255,0,0)}"));
#endif
2）在UI中選擇按鈕，右鍵選擇“改變樣式表”，將樣式表中設(shè)置的內(nèi)容粘貼至“編輯樣式表”中
運(yùn)行之后得到的效果與使用setStyleSheet函數(shù)設(shè)置樣式表一樣
在“編譯輸出”位置查看
UI文件可以通過uic.exe來生成ui_widget.h，通過以下的構(gòu)造函數(shù)中的ui->setupUi(this);加載界面
Widget::Widget(QWidget *parent) :
QWidget(parent),
ui(new Ui::Widget)
{
ui->setupUi(this);
}
ui->setupUi(this);其實(shí)就是在ui_widget.h中，代開ui_widget.h進(jìn)行查看
對(duì)應(yīng)內(nèi)容如下：
#include <QtWidgets/QWidget>
QT_BEGIN_NAMESPACE
class Ui_Widget
{
public:
QPushButton *pushButton;
void setupUi(QWidget *Widget)
{
if (Widget->objectName().isEmpty())
Widget->setObjectName(QStringLiteral("Widget"));
Widget->resize(475, 384);
pushButton = new QPushButton(Widget);
pushButton->setObjectName(QStringLiteral("pushButton"));
pushButton->setGeometry(QRect(150, 160, 112, 34));
pushButton->setStyleSheet(QLatin1String("QPushButton:pressed{ background-color:rgb(200,200,200);\n"
" border-style:inset;\n"
" color:rgb(0,255,0);\n"
"}\n"
"QPushButton{color:rgb(255,0,0)}"));
retranslateUi(Widget);
QMetaObject::connectSlotsByName(Widget);
} // setupUi
void retranslateUi(QWidget *Widget)
{
Widget->setWindowTitle(QApplication::translate("Widget", "Widget", Q_NULLPTR));
pushButton->setText(QApplication::translate("Widget", "PushButton", Q_NULLPTR));
} // retranslateUi
};
namespace Ui {
class Widget: public Ui_Widget {};
} // namespace Ui
QT_END_NAMESPACE
#endif // UI_WIDGET_H
可以看到工具自動(dòng)生成代碼如下，是與我們自己寫的代碼實(shí)際上是一樣的。
pushButton->setStyleSheet(QLatin1String("QPushButton:pressed{ background-color:rgb(200,200,200);\n"
" border-style:inset;\n"
" color:rgb(0,255,0);\n"
"}\n"
"QPushButton{color:rgb(255,0,0)}"));
可以看出兩種方法都是使用setStyleSheet實(shí)現(xiàn)的，原理上是一樣的。
樣式表除了上述作用，最大的作用是改變應(yīng)用的皮膚
1）起始頁面的qss文件的加載
文章來源：http://www.zghlxwxcb.cn/news/detail-594734.html
2）通過按鈕實(shí)現(xiàn)不同樣式的切換
實(shí)現(xiàn)方法，通過按鈕實(shí)現(xiàn)不同樣式表的加載
9.學(xué)習(xí)視頻地址：
【Qt學(xué)習(xí)系列】11.Qt樣式表Qss
【Qt學(xué)習(xí)系列】11.Qt樣式表Qss（2）文章來源地址http://www.zghlxwxcb.cn/news/detail-594734.html
到了這里，關(guān)于01_1_Qt工程實(shí)踐_Qt樣式表Qss（什么是QSS；基本語法；setStyleSheet函數(shù)；樣式表的屬性值；利用QtCreate實(shí)現(xiàn)樣式切換；樣式表實(shí)現(xiàn)皮膚改變實(shí)例）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
