學(xué)習(xí)與分享之QSS

1、 歐陽(yáng)璐天朗時(shí)代研發(fā)中心 2014/5/26Hi！文檔說明文檔說明本PPT中采用的圖片和部分素材來自網(wǎng)絡(luò)截圖，部分截圖來源于自繪，語(yǔ)言組織由本人完成，歡迎提出建議和意見。素材鏈接：http:/ Maker For PDF/EPUB 資源包黑色皮膚資源包黑色皮膚1.什么是QSS樣式表？2.為什么要使用QSS編輯皮膚？3.如何使用樣式表？4.示例5.其他注意內(nèi)內(nèi) 容容 導(dǎo)導(dǎo) 覽覽什么是QSS樣式表先給大家看一段先給大家看一段QSS的樣式表的樣式表demo：QPushButton border: 2px solid #8f8f91; border-radius: 6px; background-co

2、lor: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #f6f7fa, stop: 1 #dadbde); min-width: 80px; QPushButton:pressed background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #dadbde, stop: 1 #f6f7fa); QPushButton:hover background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, st

3、op: 0 #dadbde, stop: 1 #f6f7fa); 樣式表存在于一個(gè)文件中，Qt樣式表的文件統(tǒng)一拓展名為*.qss，用來存放樣式和效果代碼。然后通過Qt程序的引用將定制的效果設(shè)置到程序中。 對(duì)對(duì)Qt程序界面的定制有兩種方法：程序界面的定制有兩種方法： 使用程序繼承并實(shí)現(xiàn)一個(gè)QStyle的子類 Qt樣式表的使用。樣式表的由來：樣式表的由來：仿照仿照CSS樣式表的模式對(duì)界面程序樣式進(jìn)行定制與修改。樣式表的模式對(duì)界面程序樣式進(jìn)行定制與修改。Qt樣式表的思想很大程度上是來自于HTML的層疊式樣式表(CSS)， 通過調(diào)用QWidget:setStyleSheet()或QApplicatio

4、n:setStyleSheet()從而可以為一個(gè)獨(dú)立的子部件、整個(gè)窗口，甚至是整個(gè)應(yīng)用程序指定一個(gè)樣式表。 樣式表的程序引用：樣式表的程序引用： 通過QStyle的一個(gè)叫做QStyleSheetStyle的特殊子類來實(shí)現(xiàn)的。這個(gè)特殊的子類實(shí)際上是其他的系統(tǒng)特定風(fēng)格類的包裹類， 它會(huì)把通過樣式表指定的自定義外觀風(fēng)格應(yīng)用在底層的系統(tǒng)特定風(fēng)格之上。為什么要使用QSS編輯皮膚優(yōu)點(diǎn)優(yōu)點(diǎn): 樣式表的引入，使得定制Qt的外觀樣式變的非常簡(jiǎn)單。 程序和界面外觀定制進(jìn)行分離，獨(dú)立開發(fā)。 樣式定義精確到像素的級(jí)別 降低了服務(wù)器的成本 可以使用多套樣式，更換界面或者切換效果更加方便 便于維護(hù)，便于管理 界面更加友好

5、 使用方便等如何使用樣式表？1.樣式表原理：方箱模型樣式表原理：方箱模型 對(duì)于任何一個(gè)控件或者控件里的子部件，可以這樣了理解，相對(duì)于右圖，一個(gè)空間可以分為四個(gè)區(qū)域邊框：Margin ：控件最外圍的空白區(qū)域，總是透明的Border ：控件的外邊框Padding：控件的外邊空到內(nèi)顯示區(qū)域的空白區(qū)域Content：控件的最內(nèi)顯示區(qū)域注意：當(dāng)注意：當(dāng)Margin大小為大小為0時(shí)，控件大小就是顯示的實(shí)際大小時(shí)，控件大小就是顯示的實(shí)際大小.2.樣式表調(diào)整的對(duì)象：樣式表調(diào)整的對(duì)象：各個(gè)空間和控件中的各個(gè)子控件。3.樣式表調(diào)整的內(nèi)容：樣式表調(diào)整的內(nèi)容：控件大小控件位置控件狀態(tài)控件背景等當(dāng)然，首先我們得了解其通

6、用的格式通用的格式.4.樣式表基本語(yǔ)法：樣式表基本語(yǔ)法：一個(gè)樣式表由一系列的樣式規(guī)則構(gòu)成。每個(gè)樣式規(guī)則都有著下面的形式：selector attribute: value 選擇器(selector)通常是一個(gè)類名(例如QComboBox)，當(dāng)然也還有其他的語(yǔ)法形式。屬性(attribute)部分是一個(gè)樣式表屬性的名字，值(value)部分是賦給該屬性的值。selector #ObjectNameattribute: value ObjectName是一個(gè)指定的控件的名字，一般由程序中調(diào)用setObjectName()來指定。注意：注意：前一個(gè)的樣式，會(huì)被后來的樣式所覆蓋前一個(gè)的樣式，會(huì)被后來的

7、樣式所覆蓋.為了使用方便，我們還可以使用一種簡(jiǎn)化形式，這樣： selector1, selector2, ., selectorM attribute1: value1;attribute2: value2;.attributeN: valueN;如：QCheckBox, QComboBox, QSpinBox color: red;background-color: white;font: bold; 當(dāng)然也可以這樣： selector1#ObjectName1, selector2#ObjectName1, ., selectorM #ObjectName1 attribute1: val

8、ue1;attribute2: value2;.attributeN: valueN;如：QCheckBox#MainCheckBox, QComboBox#MainComboBox,QSpinBox#MainSpinBox color: red;background-color: white;font: bold;5.控件子控件了解：子部件微觀樣式化控件子控件了解：子部件微觀樣式化界面是如何通過qss來定制不同的效果？為什么同一種控件可以產(chǎn)生不同的顯示效果？這個(gè)就得從控件的構(gòu)成開始說。 這是一個(gè)滾動(dòng)條，如左圖，控件名為QScrollBar ，如圖所示，有著很多的子控件，而每一個(gè)子控件都可以定

9、制不同的效果，綜合起來就成了一套效果。因此在進(jìn)行QSS開發(fā)是需要了解的是某個(gè)控件分別有些什么子控件。下頁(yè)是一些基本的字控件（sub-control）列表：6.控件狀態(tài)及效果分析：控件狀態(tài)及效果分析：以下是幾種常見的狀態(tài)：示例1.控件大小等設(shè)定：控件大小等設(shè)定：對(duì)某一個(gè)控件的大小進(jìn)行調(diào)整很簡(jiǎn)單，使用width、height進(jìn)行調(diào)整即可，當(dāng)然也可以添加min-、max-前綴進(jìn)行修飾，最小單位為像素（PX)，用于調(diào)整界面整體效果，如：QWidget#MainWindowsHeadBar margin:0px;/margin外框?yàn)?個(gè)像素 border:2px solid red;/border顯示

10、width: 36px;/控件寬 height: 23px;/控件高 border-image:url(IMAGE_PATH/minimize.png) 1; /圖片 當(dāng)然這是控件大??？那么線條呢？呼當(dāng)然這是控件大小？那么線條呢？呼 如上綠色字體：如上綠色字體：2px：線條為：線條為2個(gè)像素個(gè)像素solid：實(shí)線：實(shí)線red：紅色：紅色以下為線條以下為線條border-style的可選項(xiàng)，可以參照如下：的可選項(xiàng)，可以參照如下：其他：其他：border-radius：為設(shè)置圓角：為設(shè)置圓角border:1px solid transparent; /寬度為寬度為1px的透明實(shí)線（什么都看不到）的

11、透明實(shí)線（什么都看不到）2.控件位置等排版控件位置等排版此模塊主要介紹的是相對(duì)定位：此模塊主要介紹的是相對(duì)定位：位置排版就是通過微調(diào)界面控件顯示位置進(jìn)行排版，先給大家看兩個(gè)效果，以MPR Maker For PDF為例：效果一：效果一：slider控件效果控件效果 使用前：使用后：效果一：設(shè)置對(duì)話框效果效果一：設(shè)置對(duì)話框效果 使用前：使用后：QFrame margin: 14px 18px 20px 18px;如上：進(jìn)行位置偏移設(shè)置表示上右下左四個(gè)方向分別為14 18 20 18個(gè)像素，同時(shí)，我們也可以分別指定margin-top、margin-right、margin-bottom、marg

12、in-left四個(gè)屬性。QFrame margin-top: 14px;margin-right: 18px;margin-bottom: 20px;margin-left: 18px; 我們也可以同樣的將這些屬性應(yīng)用于任何一個(gè)支持方箱模型的Qt部件，例如：QCheckBox、 QLabel、QLineEdit、QListView、QMenu、QPushButton、QTextEdit、和QToolTip，甚至也可以將其作用于子部件上。同時(shí)，采取此方法能夠?qū)崿F(xiàn)按下彈起的狀態(tài)，就是實(shí)現(xiàn)采用當(dāng)鼠標(biāo)按下動(dòng)作的時(shí)候，讓控件的顯示位置向右下方移動(dòng)幾個(gè)像素，來模擬這個(gè)狀態(tài)。/MPR Maker PDF 工

13、具欄Qcombobox下拉框按下動(dòng)作效果實(shí)現(xiàn)QToolBar#CommonToolBar QComboBox:down-arrow:on top: 1px; left: 1px; 3.控件圖片等顯示控件圖片等顯示設(shè)置某一個(gè)背景的圖片，有如下三種方法：設(shè)置某一個(gè)背景的圖片，有如下三種方法：1.background-image2.background3.border-image4.image區(qū)別：區(qū)別：border-image：圖片顯示采取拉伸效果為默認(rèn)缺省background-image：圖片顯示采取重復(fù)效果為默認(rèn)缺省image：圖片顯示采取原圖大小為默認(rèn)缺省background：包含backg

14、round-image1.background-image是background中的一種，background還包含其他屬性，有color，repeat，position等等；2.border-image和background-image，前者是在控件的border區(qū)域進(jìn)行設(shè)置，后者是整體，包括margin區(qū)域，且同時(shí)設(shè)置，前者會(huì)覆蓋在后者的圖片之上。3. image不會(huì)改變圖片大小傳說中的傳說中的九宮格九宮格：實(shí)用性很強(qiáng)大：實(shí)用性很強(qiáng)大先給個(gè)贊！如下：先給個(gè)贊！如下：了解：了解：圖片在實(shí)際的應(yīng)用中，如果不使用九宮格方式，圖片會(huì)進(jìn)行自動(dòng)復(fù)制重繪平鋪顯示或者進(jìn)行對(duì)應(yīng)比例的像素畫放大，如果存在陰影

15、等會(huì)出現(xiàn)陰影模糊，顯示效果變差。而解決這個(gè)問題的方法就是九宮格。原理：原理： 程序自動(dòng)按照所分配的像素進(jìn)行四邊的切割，然后保留邊界的圖片數(shù)據(jù)，自動(dòng)將中間的數(shù)據(jù)進(jìn)行像素化拉伸。使用舉例：使用舉例： border-image: url(button.png) 4 4 4 4 stretch stretch;/圖片 上 右 下 左 拉伸（缺省） 拉伸（缺省）border-width：4 4 4 4；/必須有4.其他注意其他注意1.控件命名控件命名一個(gè)界面中存在很多不同的控件，而且控件可能需要不同的效果，及時(shí)現(xiàn)在沒有，所以在編寫的過程中，盡可能的對(duì)空間進(jìn)行統(tǒng)一命名和增加使用的作用域，以減少后期的維護(hù)時(shí)

16、間成本。請(qǐng)調(diào)用setobjectname。 /*ScrollBar Vertical TreeView*/QWidget#DialogCentralWidget QTreeWidget#DialogTreeWigdet QScrollBar:vertical border:1px solid transparent;表示：設(shè)置存在于表示：設(shè)置存在于DialogCentralWidget這個(gè)這個(gè)widget窗口中的窗口中的DialogTreeWidget樹形控件中的控件樹形控件中的控件QScrollBar里面的垂直滾動(dòng)條的默認(rèn)顯示效果。里面的垂直滾動(dòng)條的默認(rèn)顯示效果。2.控件設(shè)計(jì)顯示控件設(shè)計(jì)顯示 在進(jìn)行控件的顯示的時(shí)候，如果在其他狀態(tài)中存在某個(gè)設(shè)定，如大小，寬度，應(yīng)該在主狀態(tài)中也進(jìn)行編寫，如：/*ScrollBar Vertical TreeView*/QWidget#DialogCentralWidget QTreeWidget#DialogTreeWigdet QScrollBar:vertical border:1px solid