在Qt creator5.14中使用QSS 美化Qt界面

QSS簡介

QSS稱爲Qt Style Sheets也就是Qt樣式表，它是Qt提供的一種用來自定義控件外觀的機制，它有着與css3相似的語法，或者在某種意義上它可以說是對css3進行某些特化後的子集。
Qt控件自身的外觀有時很難滿足我們的需要，這時候一般會有兩種常見的解決方案，第一種是通過重寫paintEvent來實現控件的自繪，這種方式最靈活，然而學習和使用成本也是最高的；另一種則是使用qss，通過qss控制widgets的外觀表達。而qss的強大之處在於它不僅簡單易學，而且功能強大，對自定義組件也能提供良好的支持。

基本選擇器

僞狀態選擇器

示例

說明

通過一個基本的示例演示qss的基本使用，對於有css基礎的人來說很容易上手

新建項目

新建一個Qt Widgets Application項目，在窗體上添加一個tabWidget控件，然後修改mainwindow.cpp代碼在窗體上添加一下組件。

mainwindow.cpp代碼如下:

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDebug>
#include <QLabel>
#include <QLineEdit>
#include <QPushButton>
#include <QRadioButton>
#include <QCheckBox>
#include <QStandardItemModel>
#include <QTableView>
#include <QVBoxLayout>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    ui->tabWidget->clear();//清空選項卡
setCentralWidget(ui->tabWidget);

    QWidget *tab1=new QWidget(this);
    QWidget *tab2=new QWidget(this);
    //--------------------------------------------------
    QTableView  *tableView = new QTableView;
    //提供了用於存儲自定義數據的通用模型
    QStandardItemModel *model = new QStandardItemModel(5,4);
    model->setHeaderData(0,Qt::Horizontal,tr("第一季度"));
    model->setHeaderData(1,Qt::Horizontal,tr("第二季度"));
    model->setHeaderData(2,Qt::Horizontal,tr("第三季度"));
    model->setHeaderData(3,Qt::Horizontal,tr("第四季度"));
    //循環插入數據
    for(int row=0;row<5;row++)
    {
        model->insertRows(row,1); //插入一行
        model->setData(model->index(row,0), qrand()%1000+1000); //插入第一列 插入一個1000-2000的隨機數
        model->setData(model->index(row,1), qrand()%1000+1000);
        model->setData(model->index(row,2), qrand()%1000+1000);
        model->setData(model->index(row,3), qrand()%1000+1000);
    }
    tableView->setAutoScroll(true);//自動滾動條
    tableView->resizeColumnsToContents(); //根據內容調整大小
    
    tableView->setModel(model); //使用
    QVBoxLayout *vLayout = new QVBoxLayout();
    vLayout->addWidget(tableView);
    tab1->setLayout(vLayout);
    
    //--------------------------------------------------
    
    QGridLayout *layout = new QGridLayout;
    layout->addWidget( new QPushButton("我的按鈕"), 0, 0);
    layout->addWidget( new QPushButton("我的按鈕"), 0, 1);
    layout->addWidget( new QPushButton("我的按鈕"), 0, 2);
    layout->addWidget( new QPushButton("我的按鈕"), 0, 3);
    
    layout->addWidget( new QRadioButton("程序員"), 1, 0);
    layout->addWidget( new QRadioButton("設計"), 1, 1);
    layout->addWidget( new QRadioButton("測試"), 1, 2);
    layout->addWidget( new QRadioButton("文檔"), 1, 3);
    
    layout->addWidget( new QCheckBox("音樂"), 2, 0);
    layout->addWidget( new QCheckBox("電影"), 2, 1);
    layout->addWidget( new QCheckBox("遊戲"), 2, 2);
    layout->addWidget( new QCheckBox("睡覺"), 2, 3);
    
    for (int i = 3; i < 7; ++i) {
        QLabel *label = new QLabel(tr("第 %1 行:").arg(i + 1));
        QLineEdit *lineEdit = new QLineEdit;
        layout->addWidget(label , i + 1, 0);
        layout->addWidget(lineEdit, i + 1, 1);
    }
    tab2->setLayout(layout);
    //--------------------------------------------------------
    
    ui->tabWidget->setTabPosition(QTabWidget::North);//設置選項卡的位置東南西北，默認在北
    ui->tabWidget->addTab(tab1,tr("銷售"));//在後面添加選項卡
    ui->tabWidget->insertTab(1,tab2,QIcon(":/images/present.ico"),tr("其他控件"));//插入帶圖標的選項卡
    ui->tabWidget->setTabIcon(0,QIcon(":/images/hot.ico"));//設置選項卡圖標
    ui->tabWidget->setMovable(true);    
    ui->tabWidget->setTabToolTip(1,tr("一些組件"));//鼠標懸停彈出提示
    ui->tabWidget->usesScrollButtons();//選項卡滾動
}
MainWindow::~MainWindow()
{
    delete ui;
}

添加QSS資源

1.在項目目錄下創建名稱爲“resource”文件夾
2.在Qt creater中新建資源文件Qt Resource File，可以點擊“瀏覽”按鈕，打開工程所在的目錄下，選擇“resource”文件夾。輸入資源名稱可爲“qss”點擊“下一步”->點擊“完成”。

3. 添加.qss文件。
右鍵“*.qrc”—>選擇“add prefix”—>在彈出的窗口中輸入“/Qss”。操作完成後，到對應的“resource”目錄下創建“Qss”文件夾，並在文件夾內創建擴展名稱爲".qss"。


4. 對應的“resource”目錄下創建“Qss”文件夾，並在文件夾內創建擴展名稱爲”style.qss"的文件。

style.qss代碼如下:

/* 控件的背景 */
.QWidget {
   background-color: beige;
}

QToolBar {
    background-color: beige;
}

QDialog, QFileDialog {
    background-color: beige;
}

QTabWidget::pane { /* 選項卡小部件框架 */
    border-top: 2px solid #C2C7CB;
}

QTabWidget::tab-bar {
    left: 5px; /* 向右移動 5px */
}

QTabBar, QTabWidget {
    background-color: beige;
}
QTabBar::tab {
     background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                 stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
     border: 1px solid darkkhaki;
     border-bottom-color: #C2C7CB; /*與窗格顏色相同 */
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     min-width: 8ex;
     padding: 2px;
 }
QTabBar::tab:selected, QTabBar::tab:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                stop: 0 #fafafa, stop: 0.4 #f4f4f4,
                                stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}

QTabBar::tab:selected {
    border-color: #9B9B9B;
    border-bottom-color: #C2C7CB; /* 與窗格顏色相同 */
}

QTabBar::tab:!selected {
    margin-top: 2px; /* 使未選定的選項卡看起來更小 */
}

/* 不錯的Windows XP風格的密碼字符. */
QLineEdit[echoMode="2"] {
    lineedit-password-character: 9679;
}

QHeaderView::section {
     background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
                                       stop:0 #616161, stop: 0.5 #505050,
                                       stop: 0.6 #434343, stop:1 #656565);
     color: white;
     padding-left: 4px;
     border: 1px solid #6c6c6c;
 }

 QHeaderView::section:checked
 {
     background-color: red;
 }


/* 我們爲按鈕提供最小寬度和最小高度
使它們看起來優雅，不受文本寬度的影響。 */
QPushButton {
    background-color: palegoldenrod;
    border-width: 2px;
    border-color: darkkhaki;
    border-style: solid;
    border-radius: 5;
    padding: 3px;
    min-width: 9ex;
    min-height: 2.5ex;
}

QPushButton:hover {
   background-color: khaki;
}

/* 增加填充，這樣當按下按鈕時文本會移動。 */
QPushButton:pressed {
    padding-left: 5px;
    padding-top: 5px;
    background-color: #d0d67c;
}

QLabel, QAbstractButton {
    font: bold;
}

/* 用棕色標記強制字段。 */
.mandatory {
    color: brown;
}

/* 狀態欄上的粗體文本看起來很糟糕。 */
QStatusBar QLabel {
   font: normal;
}

QStatusBar::item {
    border-width: 1;
    border-color: darkkhaki;
    border-style: solid;
    border-radius: 2;
}

QStackedWidget, QComboBox, QLineEdit, QSpinBox, QTextEdit, QListView, QWebView, QTreeView, QHeaderView {
    background-color: cornsilk;
    selection-color: #0a214c;
    selection-background-color: #C19A6B;
}

QListView {
    show-decoration-selected: 1;
}

QListView::item:hover {
    background-color: wheat;
}

/* 在填充中保留1個像素空間。當得到焦點時，就消除填充並擴大邊界。
    看起來像物品在發光。 */
QLineEdit, QFrame {
    border-width: 1px;
    padding: 1px;
    border-style: solid;
    border-color: darkkhaki;
    border-radius: 5px;
}

/* 消除填充並增加邊框。 */
QLineEdit:focus, QFrame:focus {
    border-width: 3px;
    padding: 0px;
}

/* QLabel控件  */
QLabel {
    border: none;
    padding: 0;
    background: none;
}

/*  QLabel 上的 QToolTip提示  */
QToolTip {
    border: 2px solid darkkhaki;
    padding: 5px;
    border-radius: 3px;
    opacity: 200;
}

/* 懸停時背景顏色改變*/
QRadioButton:hover, QCheckBox:hover {
    background-color: wheat;
}

/* 對話框的按鈕遵循Windows樣式 */
QDialogButtonBox {
    button-layout: 0;
}

在窗體上應用qss樣式

修改main.cpp

#include "mainwindow.h"

#include <QApplication>
#include <QFile>
#include <QDebug>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    //加載qss文件
    QFile qssFile(":/Qss/style.qss");
    qssFile.open(QFile::ReadOnly); //以只讀方式打開
    if(qssFile.isOpen())
    {
        QString qss = QLatin1String(qssFile.readAll());
        qApp->setStyleSheet(qss);
        qssFile.close();
    }
    else
    {
        qDebug() << "無法打開文件";
    }


    MainWindow w;
    w.show();
    return a.exec();
}

運行結果對比

沒有使用樣式之前