Qt Creator快速入門 第8章 界面外觀

《QtCreator快速入門》第2版第8章界面外觀(1課時）整理課件一個完善的應(yīng)用程序不僅應(yīng)該有實用的功能，還要有一個漂亮的外觀，這樣才能使應(yīng)用程序更加友善，更加吸引用戶。作為一個跨平臺的UI開發(fā)框架，Qt提供了強(qiáng)大而靈活的界面外觀設(shè)計機(jī)制。這一章將學(xué)習(xí)在Qt中設(shè)計應(yīng)用程序外觀的相關(guān)知識，在本章開始會對Qt風(fēng)格QStyle和調(diào)色板QPalette進(jìn)行簡單介紹，然后再對Qt樣式表（QtStyleSheets）進(jìn)行重點講解，最后還會涉及不規(guī)則窗體和透明窗體的實現(xiàn)方法。整理課件主要內(nèi)容8.1Qt風(fēng)格8.2Qt樣式表8.3特殊效果窗體8.4小結(jié)整理課件8.1Qt風(fēng)格Qt中的各種風(fēng)格是一組繼承自QStyle的類。QStyle類是一個抽象基類，它封裝了一個GUI的外觀，Qt的內(nèi)建（built-in）部件使用它來執(zhí)行幾乎所有的繪制工作，以確保它們看起來可以像各個平臺上的本地部件一樣。一些風(fēng)格已經(jīng)內(nèi)置在了Qt中，例如Windows風(fēng)格和Motif風(fēng)格；而有些風(fēng)格只在特定的平臺上才有效，例如WindowsXP風(fēng)格、WindowsVista風(fēng)格和MacOSX風(fēng)格。

整理課件使用不同風(fēng)格預(yù)覽程序

首先進(jìn)入設(shè)計模式，可以先修改界面，然后打開“工具”→“界面編輯器”→“預(yù)覽于”菜單，這里列出了現(xiàn)在可用的幾種風(fēng)格，比如選擇“CDE風(fēng)格”，預(yù)覽效果如下圖所示。

整理課件使用不同風(fēng)格運行程序如果想使用不同的風(fēng)格來運行程序，那么只需要調(diào)用QApplication的setStyle()函數(shù)指定要使用的風(fēng)格即可。例如，在main()函數(shù)的“QApplicationa(argc,argv);”一行代碼后添加如下一行代碼：a.setStyle(newQMotifStyle);這時運行程序，便會使用Motif風(fēng)格。

而如果不想整個應(yīng)用程序都使用相同的風(fēng)格，那么可以調(diào)用部件的setStyle()函數(shù)來指定該部件的風(fēng)格。

整理課件調(diào)色板調(diào)色板QPalette類包含了部件各種狀態(tài)的顏色組。一個調(diào)色板包含三種狀態(tài)：激活（Active）、失效（Disabled）和非激活（Inactive）。Qt中的所有部件都包含一個調(diào)色板，并且使用各自的調(diào)色板來繪制它們自身，這樣可以使用戶界面更容易配置，也更容易保持一致。調(diào)色板中的顏色組包括：激活顏色組QPalette::Active，用于獲得鍵盤焦點的窗口；非激活顏色組QPalette::Inactive，用于其他的窗口；失效顏色組QPalette::Disabled，用于因為一些原因而不可用的部件（不是窗口）。要改變一個應(yīng)用程序的調(diào)色板，可以先使用QApplication::palette()函數(shù)來獲取其調(diào)色板，然后對其進(jìn)行更改，最后再使用QApplication::setPalette()函數(shù)來使用該調(diào)色板。更改了應(yīng)用程序的調(diào)色板，會影響到該程序的所有窗口部件。如果要改變一個部件的調(diào)色板，可以調(diào)用該部件的palette()和setPalette()函數(shù)，這樣只會影響該部件及其子部件。整理課件示例：//獲取pushButton的調(diào)色板QPalettepalette1=ui->pushButton->palette();//設(shè)置按鈕文本顏色為紅色palette1.setColor(QPalette::ButtonText,Qt::red);//設(shè)置按鈕背景色為綠色palette1.setColor(QPalette::Button,Qt::green);//pushButton使用修改后的調(diào)色板ui->pushButton->setPalette(palette1);//設(shè)置lineEdit不可用ui->lineEdit->setDisabled(true);QPalettepalette2=ui->lineEdit->palette();//設(shè)置行編輯器不可用時的背景顏色為藍(lán)色palette2.setColor(QPalette::Disabled,QPalette::Base,Qt::blue);ui->lineEdit->setPalette(palette2);設(shè)置調(diào)色板顏色時可以使用setColor()函數(shù)，這個函數(shù)需要指定顏色角色（ColorRole）。在QPalette中，顏色角色用來指定該顏色所起的作用，例如是背景顏色或者是文本顏色等，主要的顏色角色如下表所示。

整理課件8.2Qt樣式表Qt樣式表是一個可以自定義部件外觀的十分強(qiáng)大的機(jī)制。Qt樣式表的概念、術(shù)語和語法都受到了HTML的層疊樣式表（CascadingStyleSheets，CSS）的啟發(fā)，不過與CSS不同的是，Qt樣式表應(yīng)用于部件的世界。Qt樣式表概述Qt樣式表語法自定義部件外觀和換膚整理課件Qt樣式表概述樣式表使用文本描述?？梢允褂肣Application::setStyleSheet()函數(shù)將其設(shè)置到整個應(yīng)用程序上；也可以使用QWidget::setStyleSheet()函數(shù)將其設(shè)置到一個指定的部件（還有它的子部件）上。如果在不同的級別都設(shè)置了樣式表，那么Qt會使用所有有效的樣式表，這被稱為樣式表的層疊。

整理課件使用代碼設(shè)置樣式表例如：//設(shè)置pushButton的背景為黃色ui->pushButton->setStyleSheet("background:yellow");//設(shè)置horizontalSlider的背景為藍(lán)色ui->horizontalSlider->setStyleSheet("background:blue");

這樣調(diào)用指定部件的setStyleSheet()函數(shù)只會對這個部件應(yīng)用該樣式表，如果想對所有的相同部件都使用相同的樣式表，那么可以在它們的父部件上設(shè)置樣式表。比如這里兩個部件都在MainWindow上，可以為MainWindow設(shè)置樣式表：setStyleSheet("QPushButton{background:yellow}QSlider{background:blue}");

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

整理課件在設(shè)計模式使用樣式表進(jìn)入設(shè)計模式。在界面上點擊鼠標(biāo)右鍵，在彈出的菜單中選擇“改變樣式表”，這時會出現(xiàn)編輯樣式表對話框，在其中輸入如下代碼：QPushButton{}注意光標(biāo)留在第一個大括號后。然后點擊上面“添加顏色”選項后面的下拉箭頭，在彈出的列表中選擇“background-color”一項。這時會彈出選擇顏色對話框，大家可以隨便選擇一個顏色，然后點擊“確定按鈕”，這時會自動添加代碼：QPushButton{background-color:rgb(0,85,255);} 根據(jù)選擇的顏色不同，rgb()中的參數(shù)的數(shù)值也會不同?？梢钥吹?，在這里設(shè)置樣式表不僅很便捷而且很直觀，不僅可以設(shè)置顏色，還可以使用圖片，使用漸變顏色，或者更改字體。相似的，可以再設(shè)置QSlider的背景色。整理課件樣式表語法樣式規(guī)則：樣式表包含了一系列的樣式規(guī)則，一個樣式規(guī)則由一個選擇符（selector）和一個聲明（declaration）組成。選擇符指定了受該規(guī)則影響的部件；聲明指定了這個部件上要設(shè)置的屬性。例如：QPushButton{color:red} 在這個樣式規(guī)則中，QPushButton是選擇符，{color:red}是聲明，而color是屬性，red是值。這個規(guī)則指定了QPushButton和它的子類應(yīng)該使用紅色作為它們的前景色。Qt樣式表中一般不區(qū)分大小寫，例如color、Color、COLOR和COloR表示相同的屬性。只有類名，對象名和Qt屬性名是區(qū)分大小寫的。一些選擇符可以指定相同的聲明，只需要使用逗號隔開，例如：QPushButton,QLineEdit,QComboBox{color:red}一個樣式規(guī)則的聲明部分是一些屬性：值對組成的列表，它們包含在大括號中，使用分號隔開。例如：QPushButton{color:red;background-color:white}整理課件選擇符類型Qt樣式表支持在CSS2中定義的所有選擇符。下表列出了最常用的選擇符類型。整理課件子控件對一些復(fù)雜的部件修改樣式，可能需要訪問它們的子控件，例如QComboBox的下拉按鈕，還有QSpinBox的向上和向下的箭頭等。選擇符可以包含子控件來對部件的特定子控件應(yīng)用規(guī)則，例如：QComboBox::drop-down{image:url(dropdown.png)}

這樣的規(guī)則可以改變所有的QComboBox部件的下拉按鈕的樣式。

整理課件偽狀態(tài)選擇符可以包含偽狀態(tài)來限制規(guī)則在部件的指定的狀態(tài)上應(yīng)用。偽狀態(tài)出現(xiàn)在選擇符之后，用冒號隔離，例如：QPushButton:hover{color:white}這個規(guī)則表明當(dāng)鼠標(biāo)懸停在一個QPushButton部件上時才被應(yīng)用。偽狀態(tài)可以使用感嘆號來表示否定，例如要當(dāng)鼠標(biāo)沒有懸停在一個QRadioButton上時才應(yīng)用規(guī)則，那么這個規(guī)則可以寫為：QRadioButton:!hover{color:red}偽狀態(tài)還可以多個連用，達(dá)到邏輯與效果，例如當(dāng)鼠標(biāo)懸停在一個被選中的QCheckBox部件上時才應(yīng)用規(guī)則，那么這個規(guī)則可以寫為：QCheckBox:hover:checked{color:white}如果有需要，也可以使用逗號來表示邏輯或操作，例如：QCheckBox:hover,QCheckBox:checked{color:white}整理課件沖突解決當(dāng)幾個樣式規(guī)則對相同的屬性指定了不同的值時就會產(chǎn)生沖突。例如：QPushButton#okButton{color:gray}QPushButton{color:red} 這樣okButton的color屬性便產(chǎn)生了沖突。解決這個沖突的原則是：特殊的選擇符優(yōu)先。在這里，因為QPushButton#okButton一般代表一個單一的對象，而不是一個類所有的實例，所以它比QPushButton更特殊，那么這時便會使用第一個規(guī)則，okButton的文本顏色為灰色。相似的，有偽狀態(tài)比沒有偽狀態(tài)優(yōu)先。如果兩個選擇符的特殊性相同，則后面出現(xiàn)的比前面的優(yōu)先。Qt樣式表使用CSS2規(guī)范來確定規(guī)則的特殊性。整理課件層疊 樣式表可以被設(shè)置在QApplication上，或者父部件上，或者子部件上。部件有效的樣式表是通過部件祖先的樣式表和QApplication上的樣式表合并得到的。 當(dāng)發(fā)生沖突時，部件自己的樣式表優(yōu)先于任何繼承的樣式表，同樣，父部件的樣式表優(yōu)先于祖先的樣式表。

整理課件自定義部件外觀當(dāng)使用樣式表時，每一個部件都被看做是擁有四個同心矩形的盒子，如下圖所示。這四個矩形分別是內(nèi)容（content）、填襯（padding）、邊框（border）和邊距（margin）。邊距、邊框?qū)挾群吞钜r等屬性的默認(rèn)值都是0，這樣四個矩形恰好重合。

整理課件/****************主界面背景*******************/QMainWindow{/*背景圖片*/background-image:url(:/image/beijing01.png);}/****************按鈕部件*******************/QPushButton{/*背景色*/background-color:rgba(100,225,100,30);/*邊框樣式*/border-style:outset;/*邊框?qū)挾葹?像素*/border-width:4px;/*邊框圓角半徑*/border-radius:10px;/*邊框顏色*/border-color:rgba(255,225,255,30);/*字體*/font:bold14px;/*字體顏色*/color:rgba(0,0,0,100);/*填襯*/padding:6px;}整理課件/*鼠標(biāo)懸停在按鈕上時*/QPushButton:hover{background-color:rgba(100,255,100,100);border-color:rgba(255,225,255,200);color:rgba(0,0,0,200);}/*按鈕被按下時*/QPushButton:pressed{background-color:rgba(100,255,100,200);border-color:rgba(255,225,255,30);border-style:inset;color:rgba(0,0,0,100);}/****************滑塊部件*******************//*水平滑塊的手柄*/QSlider::handle:horizontal{image:url(:/image/sliderHandle.png);}/*水平滑塊手柄以前的部分*/QSlider::sub:horizontal{/*邊框圖片*/border-image:url(:/image/slider.png);}整理課件實現(xiàn)換膚功能Qt樣式表可以存放在一個以.qss為后綴的文件中，這樣我們就可以在程序中調(diào)用不同的.qss文件來實現(xiàn)換膚的功能。例如通過下面的代碼使用樣式表：QFilefile(":/qss/my.qss");//只讀方式打開該文件file.open(QFile::ReadOnly);//讀取文件全部內(nèi)容，使用tr()函數(shù)將其轉(zhuǎn)換為QString類型QStringstyleSheet=tr(file.readAll());//為QApplication設(shè)置樣式表qApp->setStyleSheet(styleSheet); 這里讀取了Qt樣式表文件中的內(nèi)容，然后為應(yīng)用程序設(shè)置了樣式表。在換膚按鈕中這樣設(shè)置：voidMainWindow::on_pushButton_clicked(){QFilefile(":/qss/my1.qss");file.open(QFile::ReadOnly);QStringstyleSheet=tr(file.readAll());qApp->setStyleSheet(styleSheet);} 現(xiàn)在可以運行程序了，當(dāng)大家按下按鈕后，便會更改界面的外觀，這樣就實現(xiàn)了換膚功能。

整理課件8.3特殊效果窗體不規(guī)則窗體透明窗體整理課件不規(guī)則窗體Qt中提供了部件遮罩（mask）來實現(xiàn)不規(guī)則窗體。例如：先在構(gòu)造函數(shù)中添加如下代碼：QPixmappix;pix.load(":/image/yafeilinux.png");//加載圖片resize(pix.size());//設(shè)置窗口大小為圖片大小setMask(pix.mask());//為窗口設(shè)置遮罩然后在paintEvent()函數(shù)中將圖片繪制在窗口上：voidWidget::paintEvent(QPaintEvent*){QPainterpainter(this);//從窗口左上角開始繪制圖片painter.drawPixmap(0,0,QPixmap(":/image/yafeilinux.png"));}整理課件透明窗體方式一：使用setWindowOpacity()函數(shù)。例如：構(gòu)造函數(shù)里添加一行代碼：setWi