一、Qt樣式表介紹

Qt樣式表是一個可以自定義部件外觀的十分強大的機制，可以用來美化部件。Qt樣式表的概念、術語和語法都受到了HTML的層疊樣式表（Cascading Style Sheets, CSS)的啟發，不過與CSS不同的是，Qt樣式表應用于部件的世界。

二、使用代碼設置樣式表

樣式表使用文本描述，可以使用 QApplication:: setStyleSheet() 函數將其設置到整個應用程序上，也可以使用 QWidget::setStyleSheet() 函數將其設置到一個指定的部件（還有它的子部件）上。如果在不同的級別都設置了樣式表，那么Qt會使用所有有效的樣式表，這被稱為樣式表的層疊。下面來看一個簡單的例子。

新建Qt Gui應用，項目名稱為myStyleSheets，類名為MainWindow，基類保持QMainWindow不變。建立好項目后進入設計模式，向界面上拖入一個PushButton和一個Horizontal Slider，然后在mainwindow.cpp文件中的構造函數里添加如下代碼：

//設置pushButton的背景顏色為黃色 ui->pushButton->setStyleSheet("background:yellow"); //設置horizontalSlider的背貴為藍色 ui->horizontalSlider->setStyleSheet("background:blue");

這樣便設置了兩個部件的背景色。不過像這樣調用指定部件的setStyleSheet()函數只會對這個部件應用該樣式表，如果想對所有的相同部件都使用相同的樣式表，那么可以在它們的父部件上設置樣式表。因為這里兩個部件都在MainWindow上，所以可以為MainWindow設置樣式表。先注釋掉上面的兩行代碼，然后添加如下代碼：

this->setStyleSheet("background:blue");

這樣，以后再往主窗口上添加的所有QPushButton部件和QSlider部件的背景色都會改為這里指定的顏色。

三、在設計模式中設置樣式表

除了使用代碼來設置樣式表外，也可以在設計模式中為添加到界面上的部件設置樣式表，這樣更加直觀。先注釋掉上面添加的代碼，然后進入設計模式。在界面上右擊，在彈出的菜單中選擇“改變樣式表”，這時會出現編輯樣式表對話框，在其中輸入如下代碼：

QPushButton{ }

注意光標留在第一個大括號后。然后單擊上面“添加顏色”選項后面的下拉箭頭， 在彈出的列表中選擇“background-color”一項。這時會彈出選擇顏色對話框，隨便選擇一個顏色，然后單擊“確定按鈕”，這時會自動添加代碼：

QPushButton{background-color: rgb(0, 0, 255); }

可以看到，在這里設置樣式表不僅很便捷而且很直觀，不僅可以設置顏色，還可以使用圖片，使用漸變顏色或者更改字體。在設計模式，有時無法正常顯示設置好的樣式表效果，不過運行程序后會正常顯示的。這里是在MainWindow界面上設置了樣式表，當然，也可以按照這種方法在指定的部件上添加樣式表。

四、盒子模型介紹

使用Style Sheets時,所有的部件都被視為有四個同心矩形的盒子(box)：邊緣矩形(margin rectangle)，邊框矩形(border rectangle)，填充矩形(padding rectangle)和內容矩形(content rectangle)。盒子模型對四個矩形有詳細的描述，如下圖所示：

邊緣，邊框寬度和填充屬性默認為0。這樣四個矩形(margin, border, padding和content)重合。

使用background-image屬性，你可以為部件指定背景圖片。默認地，背景圖片只畫在邊框以內。背景圖片不隨部件大小改變而改變。提供一個隨部件大小改變而改變的背景或皮膚，必須使用border-image。因為border-image屬性提供了一個備選背景，所以并不需要再為部件指定一個背景圖片。在兩者都指定的情況下，border-image將畫于background-image之上。

轉載于:https://www.cnblogs.com/linuxAndMcu/p/11039691.html

總結

以上是生活随笔為你收集整理的Qt样式表之一：Qt样式表和盒子模型介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。