Qt樣式表之一:Qt樣式表和盒子模型介紹


一、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之上。



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM