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

1、Qt Creator快速入門快速入門第第2版版第第8 8章章 界面外觀界面外觀(1課時(shí)） 一個(gè)完善的應(yīng)用程序不僅應(yīng)該有實(shí)用的功能，還要有一個(gè)完善的應(yīng)用程序不僅應(yīng)該有實(shí)用的功能，還要有一個(gè)漂亮的外觀，這樣才能使應(yīng)用程序更加友善，更加吸一個(gè)漂亮的外觀，這樣才能使應(yīng)用程序更加友善，更加吸引用戶。引用戶。 作為一個(gè)跨平臺(tái)的作為一個(gè)跨平臺(tái)的UI開(kāi)發(fā)框架，開(kāi)發(fā)框架，Qt提供了強(qiáng)大而靈活提供了強(qiáng)大而靈活的界面外觀設(shè)計(jì)機(jī)制。這一章將學(xué)習(xí)在的界面外觀設(shè)計(jì)機(jī)制。這一章將學(xué)習(xí)在Qt中設(shè)計(jì)應(yīng)用程序中設(shè)計(jì)應(yīng)用程序外觀的相關(guān)知識(shí)，在本章開(kāi)始會(huì)對(duì)外觀的相關(guān)知識(shí)，在本章開(kāi)始會(huì)對(duì)Qt風(fēng)格風(fēng)格QStyle和調(diào)色和調(diào)色板板QPal

2、ette進(jìn)行簡(jiǎn)單介紹，然后再對(duì)進(jìn)行簡(jiǎn)單介紹，然后再對(duì)Qt樣式表（樣式表（Qt Style Sheets）進(jìn)行重點(diǎn)講解，最后還會(huì)涉及不規(guī)則窗體和透）進(jìn)行重點(diǎn)講解，最后還會(huì)涉及不規(guī)則窗體和透明窗體的實(shí)現(xiàn)方法。明窗體的實(shí)現(xiàn)方法。主主 要要 內(nèi)內(nèi) 容容n8.1 Qt風(fēng)格風(fēng)格n8.2 Qt樣式表樣式表n8.3 特殊效果窗體特殊效果窗體n8.4 小結(jié)小結(jié)8.1 Qt風(fēng)格風(fēng)格 Qt中的各種風(fēng)格是一組繼承自中的各種風(fēng)格是一組繼承自QStyle的類。的類。QStyle類是一個(gè)抽象基類，它類是一個(gè)抽象基類，它封裝了一個(gè)封裝了一個(gè)GUI的外觀，的外觀，Qt的內(nèi)建（的內(nèi)建（built-in）部件使用它來(lái)執(zhí)行幾乎所有的

3、繪）部件使用它來(lái)執(zhí)行幾乎所有的繪制工作，以確保它們看起來(lái)可以像各個(gè)平臺(tái)上的本地部件一樣。一些風(fēng)格已經(jīng)制工作，以確保它們看起來(lái)可以像各個(gè)平臺(tái)上的本地部件一樣。一些風(fēng)格已經(jīng)內(nèi)置在了內(nèi)置在了Qt中，例如中，例如Windows風(fēng)格和風(fēng)格和Motif風(fēng)格；而有些風(fēng)格只在特定的平臺(tái)風(fēng)格；而有些風(fēng)格只在特定的平臺(tái)上才有效，例如上才有效，例如Windows XP風(fēng)格、風(fēng)格、Windows Vista風(fēng)格和風(fēng)格和Mac OS X風(fēng)格。風(fēng)格。 使用不同風(fēng)格預(yù)覽程序使用不同風(fēng)格預(yù)覽程序 首先進(jìn)入設(shè)計(jì)模式，可以先修改界面，然后打開(kāi)首先進(jìn)入設(shè)計(jì)模式，可以先修改界面，然后打開(kāi)“工具工具”“界面編輯界面編輯器器”“預(yù)覽于預(yù)

4、覽于”菜單，這里列出了現(xiàn)在可用的幾種風(fēng)格，比如選擇菜單，這里列出了現(xiàn)在可用的幾種風(fēng)格，比如選擇“CDE風(fēng)格風(fēng)格”，預(yù)覽效果如下圖所示。，預(yù)覽效果如下圖所示。 使用不同風(fēng)格運(yùn)行程序使用不同風(fēng)格運(yùn)行程序n如果想使用不同的風(fēng)格來(lái)運(yùn)行程序，那么只需要調(diào)用如果想使用不同的風(fēng)格來(lái)運(yùn)行程序，那么只需要調(diào)用QApplication的的setStyle()函數(shù)指定要使用的風(fēng)格即可。函數(shù)指定要使用的風(fēng)格即可。 例如，在例如，在main()函數(shù)的函數(shù)的“QApplication a(argc, argv);”一行代碼后添加一行代碼后添加如下一行代碼：如下一行代碼： a.setStyle(new QMotifStyl

5、e); 這時(shí)運(yùn)行程序，便會(huì)使用這時(shí)運(yùn)行程序，便會(huì)使用Motif風(fēng)格。風(fēng)格。 n而如果不想整個(gè)應(yīng)用程序都使用相同的風(fēng)格，那么可以調(diào)用部件的而如果不想整個(gè)應(yīng)用程序都使用相同的風(fēng)格，那么可以調(diào)用部件的setStyle()函數(shù)來(lái)指定該部件的風(fēng)格。函數(shù)來(lái)指定該部件的風(fēng)格。 調(diào)色板調(diào)色板 調(diào)色板調(diào)色板QPalette類包含了部件各種狀態(tài)的顏色組。一個(gè)調(diào)色板包含三種狀態(tài)：類包含了部件各種狀態(tài)的顏色組。一個(gè)調(diào)色板包含三種狀態(tài)：激活（激活（Active）、失效（）、失效（Disabled）和非激活（）和非激活（Inactive）。）。Qt中的所有部中的所有部件都包含一個(gè)調(diào)色板，并且使用各自的調(diào)色板來(lái)繪制它們自身

6、，這樣可以使件都包含一個(gè)調(diào)色板，并且使用各自的調(diào)色板來(lái)繪制它們自身，這樣可以使用戶界面更容易配置，也更容易保持一致。調(diào)色板中的顏色組包括：用戶界面更容易配置，也更容易保持一致。調(diào)色板中的顏色組包括：n激活顏色組激活顏色組QPalette:Active，用于獲得鍵盤(pán)焦點(diǎn)的窗口；，用于獲得鍵盤(pán)焦點(diǎn)的窗口；n非激活顏色組非激活顏色組QPalette:Inactive，用于其他的窗口；，用于其他的窗口；n失效顏色組失效顏色組QPalette:Disabled，用于因?yàn)橐恍┰蚨豢捎玫牟考ú皇?，用于因?yàn)橐恍┰蚨豢捎玫牟考ú皇谴翱冢４翱冢?要改變一個(gè)應(yīng)用程序的調(diào)色板，可以先使用要改變一個(gè)應(yīng)用

7、程序的調(diào)色板，可以先使用QApplication:palette()函數(shù)來(lái)函數(shù)來(lái)獲取其調(diào)色板，然后對(duì)其進(jìn)行更改，最后再使用獲取其調(diào)色板，然后對(duì)其進(jìn)行更改，最后再使用QApplication:setPalette()函數(shù)來(lái)使用該調(diào)色板。更改了應(yīng)用程序的調(diào)色板，會(huì)影響到該程序的所有窗函數(shù)來(lái)使用該調(diào)色板。更改了應(yīng)用程序的調(diào)色板，會(huì)影響到該程序的所有窗口部件。如果要改變一個(gè)部件的調(diào)色板，可以調(diào)用該部件的口部件。如果要改變一個(gè)部件的調(diào)色板，可以調(diào)用該部件的palette()和和setPalette()函數(shù)，這樣只會(huì)影響該部件及其子部件。函數(shù)，這樣只會(huì)影響該部件及其子部件。 示例：示例：/ 獲取獲取pus

8、hButton的調(diào)色板的調(diào)色板QPalette palette1 = ui-pushButton-palette();/ 設(shè)置按鈕文本顏色為紅色設(shè)置按鈕文本顏色為紅色palette1.setColor(QPalette:ButtonText,Qt:red); / 設(shè)置按鈕背景色為綠色設(shè)置按鈕背景色為綠色palette1.setColor(QPalette:Button,Qt:green); / pushButton使用修改后的調(diào)色板使用修改后的調(diào)色板ui-pushButton-setPalette(palette1); / 設(shè)置設(shè)置lineEdit不可用不可用ui-lineEdit-setDi

9、sabled(true); QPalette palette2 = ui-lineEdit-palette();/ 設(shè)置行編輯器不可用時(shí)的背景顏色為藍(lán)色設(shè)置行編輯器不可用時(shí)的背景顏色為藍(lán)色palette2.setColor(QPalette:Disabled,QPalette:Base,Qt:blue);ui-lineEdit-setPalette(palette2); 設(shè)置調(diào)色板顏色時(shí)可以使用設(shè)置調(diào)色板顏色時(shí)可以使用setColor()函數(shù)，這個(gè)函數(shù)需要指定顏函數(shù)，這個(gè)函數(shù)需要指定顏色角色（色角色（Color Role）。在）。在QPalette中，顏色角色用來(lái)指定該顏中，顏色角色用來(lái)指定該

10、顏色所起的作用，例如是背景顏色或者是文本顏色等，主要的顏色色所起的作用，例如是背景顏色或者是文本顏色等，主要的顏色角色如下表所示。角色如下表所示。 8.2 Qt樣式表樣式表Qt樣式表是一個(gè)可以自定義部件外觀的十分強(qiáng)大的機(jī)制。樣式表是一個(gè)可以自定義部件外觀的十分強(qiáng)大的機(jī)制。Qt樣式表的樣式表的概念、術(shù)語(yǔ)和語(yǔ)法都受到了概念、術(shù)語(yǔ)和語(yǔ)法都受到了HTML的層疊樣式表（的層疊樣式表（Cascading Style Sheets，CSS）的啟發(fā)，不過(guò)與）的啟發(fā)，不過(guò)與CSS不同的是，不同的是，Qt樣式表應(yīng)用于部樣式表應(yīng)用于部件的世界。件的世界。nQt樣式表概述樣式表概述nQt樣式表語(yǔ)法樣式表語(yǔ)法n自定義部

11、件外觀和換膚自定義部件外觀和換膚Qt樣式表概述樣式表概述 樣式表使用文本描述。樣式表使用文本描述。n可以使用可以使用QApplication:setStyleSheet()函數(shù)將其設(shè)置到函數(shù)將其設(shè)置到整個(gè)應(yīng)用程序上；整個(gè)應(yīng)用程序上；n也可以使用也可以使用QWidget:setStyleSheet()函數(shù)將其設(shè)置到一函數(shù)將其設(shè)置到一個(gè)指定的部件（還有它的子部件）上。個(gè)指定的部件（還有它的子部件）上。n如果在不同的級(jí)別都設(shè)置了樣式表，那么如果在不同的級(jí)別都設(shè)置了樣式表，那么Qt會(huì)使用所有有會(huì)使用所有有效的樣式表，這被稱為樣式表的層疊。效的樣式表，這被稱為樣式表的層疊。 使用代碼設(shè)置樣式表使用代碼設(shè)

12、置樣式表例如：例如：/ 設(shè)置設(shè)置pushButton的背景為黃色的背景為黃色ui-pushButton-setStyleSheet(background:yellow);/ 設(shè)置設(shè)置horizontalSlider的背景為藍(lán)色的背景為藍(lán)色ui-horizontalSlider-setStyleSheet(background:blue); 這樣調(diào)用指定部件的這樣調(diào)用指定部件的setStyleSheet()函數(shù)只會(huì)對(duì)這個(gè)部件應(yīng)用該樣式表，如函數(shù)只會(huì)對(duì)這個(gè)部件應(yīng)用該樣式表，如果想對(duì)所有的相同部件都使用相同的樣式表，那么可以在它們的父部件上設(shè)果想對(duì)所有的相同部件都使用相同的樣式表，那么可以在它們的父

13、部件上設(shè)置樣式表。比如這里兩個(gè)部件都在置樣式表。比如這里兩個(gè)部件都在MainWindow上，可以為上，可以為MainWindow設(shè)設(shè)置樣式表：置樣式表：setStyleSheet(QPushButtonbackground:yellowQSliderbackground:blue);這樣，以后再往主窗口上添加的所有這樣，以后再往主窗口上添加的所有QPushButton部件和部件和QSlider部件的背部件的背景色都會(huì)改為這里指定的顏色。景色都會(huì)改為這里指定的顏色。 在設(shè)計(jì)模式使用樣式表在設(shè)計(jì)模式使用樣式表 進(jìn)入設(shè)計(jì)模式。在界面上點(diǎn)擊鼠標(biāo)右鍵，在彈出的菜單中選擇進(jìn)入設(shè)計(jì)模式。在界面上點(diǎn)擊鼠標(biāo)右鍵

14、，在彈出的菜單中選擇“改變樣式改變樣式表表”，這時(shí)會(huì)出現(xiàn)編輯樣式表對(duì)話框，在其中輸入如下代碼：，這時(shí)會(huì)出現(xiàn)編輯樣式表對(duì)話框，在其中輸入如下代碼：QPushButton 注意光標(biāo)留在第一個(gè)大括號(hào)后。然后點(diǎn)擊上面注意光標(biāo)留在第一個(gè)大括號(hào)后。然后點(diǎn)擊上面“添加顏色添加顏色”選項(xiàng)后面的下拉選項(xiàng)后面的下拉箭頭，在彈出的列表中選擇箭頭，在彈出的列表中選擇“background-color”一項(xiàng)。一項(xiàng)。 這時(shí)會(huì)彈出選擇顏色對(duì)話框，大家可以隨便選擇一個(gè)顏色，然后點(diǎn)擊這時(shí)會(huì)彈出選擇顏色對(duì)話框，大家可以隨便選擇一個(gè)顏色，然后點(diǎn)擊“確定確定按鈕按鈕”，這時(shí)會(huì)自動(dòng)添加代碼：，這時(shí)會(huì)自動(dòng)添加代碼：QPushButton

15、background-color: rgb(0, 85, 255);根據(jù)選擇的顏色不同，根據(jù)選擇的顏色不同，rgb()中的參數(shù)的數(shù)值也會(huì)不同?？梢钥吹剑谶@里設(shè)中的參數(shù)的數(shù)值也會(huì)不同。可以看到，在這里設(shè)置樣式表不僅很便捷而且很直觀，不僅可以設(shè)置顏色，還可以使用圖片，使置樣式表不僅很便捷而且很直觀，不僅可以設(shè)置顏色，還可以使用圖片，使用漸變顏色，或者更改字體。相似的，可以再設(shè)置用漸變顏色，或者更改字體。相似的，可以再設(shè)置QSlider的背景色。的背景色。 樣式表語(yǔ)法樣式表語(yǔ)法樣式規(guī)則：樣式規(guī)則：n樣式表包含了一系列的樣式規(guī)則，一個(gè)樣式規(guī)則由一個(gè)選擇符（樣式表包含了一系列的樣式規(guī)則，一個(gè)樣式規(guī)則由

16、一個(gè)選擇符（selector）和一個(gè)聲）和一個(gè)聲明（明（declaration）組成。選擇符指定了受該規(guī)則影響的部件；聲明指定了這個(gè)部件上）組成。選擇符指定了受該規(guī)則影響的部件；聲明指定了這個(gè)部件上要設(shè)置的屬性。例如：要設(shè)置的屬性。例如： QPushButtoncolor:red在這個(gè)樣式規(guī)則中，在這個(gè)樣式規(guī)則中，QPushButton是是選擇符選擇符，color:red是是聲明聲明，而，而color是是屬性屬性，red是是值值。這個(gè)規(guī)則指定了。這個(gè)規(guī)則指定了QPushButton和它的子類應(yīng)該使用紅色作為它們的前景色。和它的子類應(yīng)該使用紅色作為它們的前景色。nQt樣式表中一般不區(qū)分大小寫(xiě)，例

17、如樣式表中一般不區(qū)分大小寫(xiě)，例如color、Color、COLOR和和COloR表示相同的屬表示相同的屬性。只有類名，對(duì)象名和性。只有類名，對(duì)象名和Qt屬性名是區(qū)分大小寫(xiě)的。屬性名是區(qū)分大小寫(xiě)的。n一些選擇符可以指定相同的聲明，只需要使用逗號(hào)隔開(kāi)，例如：一些選擇符可以指定相同的聲明，只需要使用逗號(hào)隔開(kāi)，例如： QPushButton,QLineEdit,QComboBoxcolor:redn一個(gè)樣式規(guī)則的聲明部分是一些屬性：值對(duì)組成的列表，它們包含在大括號(hào)中，使用一個(gè)樣式規(guī)則的聲明部分是一些屬性：值對(duì)組成的列表，它們包含在大括號(hào)中，使用分號(hào)隔開(kāi)。例如：分號(hào)隔開(kāi)。例如： QPushButtonc

18、olor:red;background-color:white選擇符類型選擇符類型Qt樣式表支持在樣式表支持在CSS2中定義的所有選擇符。下表列出了最常用的選擇符類型。中定義的所有選擇符。下表列出了最常用的選擇符類型。 子控件子控件 對(duì)一些復(fù)雜的部件修改樣式，可能需要訪問(wèn)它們的子控件，例如對(duì)一些復(fù)雜的部件修改樣式，可能需要訪問(wèn)它們的子控件，例如QComboBox的下拉按鈕，還有的下拉按鈕，還有QSpinBox的向上和向下的箭頭等。的向上和向下的箭頭等。選擇符可以包含子控件來(lái)對(duì)部件的特定子控件應(yīng)用規(guī)則，例如：選擇符可以包含子控件來(lái)對(duì)部件的特定子控件應(yīng)用規(guī)則，例如： QComboBox:drop-

19、downimage:url(dropdown.png) 這樣的規(guī)則可以改變所有的這樣的規(guī)則可以改變所有的QComboBox部件的下拉按鈕的樣式。部件的下拉按鈕的樣式。 偽狀態(tài)偽狀態(tài)n選擇符可以包含偽狀態(tài)來(lái)限制規(guī)則在部件的指定的狀態(tài)上應(yīng)用。偽狀態(tài)出現(xiàn)在選選擇符可以包含偽狀態(tài)來(lái)限制規(guī)則在部件的指定的狀態(tài)上應(yīng)用。偽狀態(tài)出現(xiàn)在選擇符之后，用冒號(hào)隔離，例如：擇符之后，用冒號(hào)隔離，例如： QPushButton:hovercolor:whiten這個(gè)規(guī)則表明當(dāng)鼠標(biāo)懸停在一個(gè)這個(gè)規(guī)則表明當(dāng)鼠標(biāo)懸停在一個(gè)QPushButton部件上時(shí)才被應(yīng)用。偽狀態(tài)可以使部件上時(shí)才被應(yīng)用。偽狀態(tài)可以使用感嘆號(hào)來(lái)表示否定，例如

20、要當(dāng)鼠標(biāo)沒(méi)有懸停在一個(gè)用感嘆號(hào)來(lái)表示否定，例如要當(dāng)鼠標(biāo)沒(méi)有懸停在一個(gè)QRadioButton上時(shí)才應(yīng)用上時(shí)才應(yīng)用規(guī)則，那么這個(gè)規(guī)則可以寫(xiě)為：規(guī)則，那么這個(gè)規(guī)則可以寫(xiě)為： QRadioButton:!hovercolor:redn偽狀態(tài)還可以多個(gè)連用，達(dá)到邏輯與效果，例如當(dāng)鼠標(biāo)懸停在一個(gè)被選中的偽狀態(tài)還可以多個(gè)連用，達(dá)到邏輯與效果，例如當(dāng)鼠標(biāo)懸停在一個(gè)被選中的QCheckBox部件上時(shí)才應(yīng)用規(guī)則，那么這個(gè)規(guī)則可以寫(xiě)為：部件上時(shí)才應(yīng)用規(guī)則，那么這個(gè)規(guī)則可以寫(xiě)為： QCheckBox:hover:checkedcolor:whiten如果有需要，也可以使用逗號(hào)來(lái)表示邏輯或操作，例如：如果有需要，也可

21、以使用逗號(hào)來(lái)表示邏輯或操作，例如： QCheckBox:hover,QCheckBox:checkedcolor:white沖突解決沖突解決 當(dāng)幾個(gè)樣式規(guī)則對(duì)相同的屬性指定了不同的值時(shí)就會(huì)產(chǎn)生沖突。例如：當(dāng)幾個(gè)樣式規(guī)則對(duì)相同的屬性指定了不同的值時(shí)就會(huì)產(chǎn)生沖突。例如： QPushButton#okButton color: gray QPushButton color: red 這樣這樣okButton的的color屬性便產(chǎn)生了沖突。解決這個(gè)沖突的原則是：特殊的屬性便產(chǎn)生了沖突。解決這個(gè)沖突的原則是：特殊的選擇符優(yōu)先。在這里，因?yàn)檫x擇符優(yōu)先。在這里，因?yàn)镼PushButton#okButton一

22、般代表一個(gè)單一的對(duì)一般代表一個(gè)單一的對(duì)象，而不是一個(gè)類所有的實(shí)例，所以它比象，而不是一個(gè)類所有的實(shí)例，所以它比QPushButton更特殊，那么這時(shí)便更特殊，那么這時(shí)便會(huì)使用第一個(gè)規(guī)則，會(huì)使用第一個(gè)規(guī)則，okButton的文本顏色為灰色。的文本顏色為灰色。 相似的，有偽狀態(tài)比沒(méi)有偽狀態(tài)優(yōu)先。如果兩個(gè)選擇符的特殊性相同，則后相似的，有偽狀態(tài)比沒(méi)有偽狀態(tài)優(yōu)先。如果兩個(gè)選擇符的特殊性相同，則后面出現(xiàn)的比前面的優(yōu)先。面出現(xiàn)的比前面的優(yōu)先。Qt樣式表使用樣式表使用CSS2規(guī)范來(lái)確定規(guī)則的特殊性。規(guī)范來(lái)確定規(guī)則的特殊性。層疊層疊 樣式表可以被設(shè)置在樣式表可以被設(shè)置在QApplication上，或者父部件上

23、，上，或者父部件上，或者子部件上。部件有效的樣式表是通過(guò)部件祖先的樣式或者子部件上。部件有效的樣式表是通過(guò)部件祖先的樣式表和表和QApplication上的樣式表合并得到的。上的樣式表合并得到的。當(dāng)發(fā)生沖突時(shí)，部件自己的樣式表優(yōu)先于任何繼承的當(dāng)發(fā)生沖突時(shí)，部件自己的樣式表優(yōu)先于任何繼承的樣式表，同樣，父部件的樣式表優(yōu)先于祖先的樣式表。樣式表，同樣，父部件的樣式表優(yōu)先于祖先的樣式表。 自定義部件外觀自定義部件外觀 當(dāng)使用樣式表時(shí)，每一個(gè)部件都被看做是擁有四個(gè)同心矩形的盒子，如下圖當(dāng)使用樣式表時(shí)，每一個(gè)部件都被看做是擁有四個(gè)同心矩形的盒子，如下圖所示。這四個(gè)矩形分別是內(nèi)容（所示。這四個(gè)矩形分別是內(nèi)

24、容（content）、填襯（）、填襯（padding）、邊框）、邊框（border）和邊距（）和邊距（margin）。邊距、邊框?qū)挾群吞钜r等屬性的默認(rèn)值都是）。邊距、邊框?qū)挾群吞钜r等屬性的默認(rèn)值都是0，這樣四個(gè)矩形恰好重合。，這樣四個(gè)矩形恰好重合。 /*主界面背景主界面背景*/QMainWindow /*背景圖片背景圖片*/background-image: url(:/image/beijing01.png);/*按鈕部件按鈕部件*/QPushButton/*背景色背景色*/background-color: rgba(100, 225, 100, 30);/*邊框樣式邊框樣式*/borde

25、r-style: outset; /*邊框?qū)挾葹檫吙驅(qū)挾葹?像素像素*/border-width: 4px; /*邊框圓角半徑邊框圓角半徑*/border-radius: 10px; /*邊框顏色邊框顏色*/border-color: rgba(255, 225, 255, 30); /*字體字體*/font: bold 14px; /*字體顏色字體顏色*/color:rgba(0, 0, 0, 100); /*填襯填襯*/padding: 6px; /*鼠標(biāo)懸停在按鈕上時(shí)鼠標(biāo)懸停在按鈕上時(shí)*/QPushButton:hover background-color:rgba(100,255,10

26、0, 100);border-color: rgba(255, 225, 255, 200);color:rgba(0, 0, 0, 200);/*按鈕被按下時(shí)按鈕被按下時(shí)*/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(:/i

27、mage/sliderHandle.png);/*水平滑塊手柄以前的部分水平滑塊手柄以前的部分*/QSlider:sub-page:horizontal /*邊框圖片邊框圖片*/border-image: url(:/image/slider.png);實(shí)現(xiàn)換膚功能實(shí)現(xiàn)換膚功能 Qt樣式表可以存放在一個(gè)以樣式表可以存放在一個(gè)以.qss為后綴的文件中，這樣我們就可以在為后綴的文件中，這樣我們就可以在程序中調(diào)用不同的程序中調(diào)用不同的.qss文件來(lái)實(shí)現(xiàn)換膚的功能。文件來(lái)實(shí)現(xiàn)換膚的功能。 例如通過(guò)下面的代碼使用樣式表：例如通過(guò)下面的代碼使用樣式表：QFile file(:/qss/my.qss);/

28、只讀方式打開(kāi)該文件只讀方式打開(kāi)該文件file.open(QFile:ReadOnly); / 讀取文件全部?jī)?nèi)容，使用讀取文件全部?jī)?nèi)容，使用tr()函數(shù)將其轉(zhuǎn)換為函數(shù)將其轉(zhuǎn)換為QString類型類型QString styleSheet = tr(file.readAll();/ 為為QApplication設(shè)置樣式表設(shè)置樣式表qApp-setStyleSheet(styleSheet); 這里讀取了這里讀取了Qt樣式表文件中的內(nèi)容，然后為應(yīng)用程序設(shè)置了樣式表。樣式表文件中的內(nèi)容，然后為應(yīng)用程序設(shè)置了樣式表。 在換膚按鈕中這樣設(shè)置：在換膚按鈕中這樣設(shè)置：void MainWindow:on_pus

29、hButton_clicked() QFile file(:/qss/my1.qss); file.open(QFile:ReadOnly); QString styleSheet = tr(file.readAll(); qApp-setStyleSheet(styleSheet);現(xiàn)在可以運(yùn)行程序了，當(dāng)大家按下按鈕后，便會(huì)更改界面的外觀，這現(xiàn)在可以運(yùn)行程序了，當(dāng)大家按下按鈕后，便會(huì)更改界面的外觀，這樣就實(shí)現(xiàn)了換膚功能。樣就實(shí)現(xiàn)了換膚功能。 8.3 特殊效果窗體特殊效果窗體n不規(guī)則窗體不規(guī)則窗體n透明窗體透明窗體不規(guī)則窗體不規(guī)則窗體 Qt中提供了部件遮罩（中提供了部件遮罩（mask）來(lái)實(shí)現(xiàn)不

30、規(guī)則窗體。例如：）來(lái)實(shí)現(xiàn)不規(guī)則窗體。例如：n先在構(gòu)造函數(shù)中添加如下代碼：先在構(gòu)造函數(shù)中添加如下代碼：QPixmap pix; pix.load(:/image/yafeilinux.png); / 加載圖片加載圖片resize(pix.size(); / 設(shè)置窗口大小為圖片大小設(shè)置窗口大小為圖片大小setMask(pix.mask(); / 為窗口設(shè)置遮罩為窗口設(shè)置遮罩n然后在然后在paintEvent()函數(shù)中將圖片繪制在窗口上：函數(shù)中將圖片繪制在窗口上：void Widget:paintEvent(QPaintEvent *) QPainter painter(this); / 從窗口左上角開(kāi)始繪制圖片從窗口左上角開(kāi)始繪制圖片 painter.drawPixmap(0,0,QPixmap(:/image/yafeilinux.png);透明窗體透明窗體方式一：使用方式一：使用setWindowOpacity()函數(shù)。例如：函數(shù)。例如：構(gòu)造函數(shù)里添加一行代碼：構(gòu)造函數(shù)里添加一行代碼：setWind