當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Qss换肤设置

發布時間：2023/12/14 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 Qss换肤设置小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言：本文大部分的內容來源于同類博客。章節1.1-1.3 摘自參考文檔：http://www.th7.cn/web/html-css/201405/37286.shtml。1.4摘自參考文檔。https://blog.csdn.net/Staranywhere/article/details/106967756。本文僅用作知識點整理。

? ?1.1?Qss的功能及結構

? ?1.2?QSS基本屬性設置

? ?1.3? Qss過濾選擇器和優先級

? ?1.4 偽狀態集合

? ?1.5 利用動態屬性分層次設置

? ? 1.6?代碼中加載Qss

? ? 1.7 Qss高亮配置

? ? 1.8 Qss編輯工具

1.1? Qss的功能

Qt程序界面中控件的背景圖片、大小、字體顏色、字體類型、按鈕狀態變化等屬性可以通過Qss文件來設置，美化UI界面。實現界面和程序的分離，快速切換皮膚。

? ? 從層次上來說：

控件可分為前景與背景

前景：多包含文件，圖片等內容

背景：多包含圖片，圖形等內容

從結構上來說：

由于QT style是模擬CSS的布局結構，因此其滿足CSS的盒子模型

從里到外的4個區域分別是：

1： content

2: padding

3: border

4: margin

1.2? QSS基本屬性設置

Qss的強大在于組合功能的強大，這里只是簡單介紹基本功能，將簡單功能組合起來才能實現好看的效果。

Qss背景屬性（Background）

屬性	描述	CSS
background	在一個聲明中設置所有的背景屬性。	1
background-attachment	設置背景圖像是否固定或者隨著頁面的其余部分滾動。	1
background-color	設置元素的背景顏色。	1
background-image	設置元素的背景圖像。	1
background-position	設置背景圖像的開始位置。	1
background-repeat	設置是否及如何重復背景圖像。	1
background-clip	規定背景的繪制區域。	3
background-origin	規定背景圖片的定位區域。	3
background-size	規定背景圖片的尺寸。	3

QSS邊框屬性（Border?和 Outline）

屬性	描述	CSS
border	在一個聲明中設置所有的邊框屬性。	1
border-bottom	在一個聲明中設置所有的下邊框屬性。	1
border-bottom-color	設置下邊框的顏色。	2
border-bottom-style	設置下邊框的樣式。	2
border-bottom-width	設置下邊框的寬度。	1
border-color	設置四條邊框的顏色。	1
border-left	在一個聲明中設置所有的左邊框屬性。	1
border-left-color	設置左邊框的顏色。	2
border-left-style	設置左邊框的樣式。	2
border-left-width	設置左邊框的寬度。	1
border-right	在一個聲明中設置所有的右邊框屬性。	1
border-right-color	設置右邊框的顏色。	2
border-right-style	設置右邊框的樣式。	2
border-right-width	設置右邊框的寬度。	1
border-style	設置四條邊框的樣式。	1
border-top	在一個聲明中設置所有的上邊框屬性。	1
border-top-color	設置上邊框的顏色。	2
border-top-style	設置上邊框的樣式。	2
border-top-width	設置上邊框的寬度。	1
border-width	設置四條邊框的寬度。	1
outline	在一個聲明中設置所有的輪廓屬性。	2
outline-color	設置輪廓的顏色。	2
outline-style	設置輪廓的樣式。	2
outline-width	設置輪廓的寬度。	2
border-bottom-left-radius	定義邊框左下角的形狀。	3
border-bottom-right-radius	定義邊框右下角的形狀。	3
border-image	簡寫屬性，設置所有 border-image-*?屬性。	3
border-image-outset	規定邊框圖像區域超出邊框的量。	3
border-image-repeat	圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。	3
border-image-slice	規定圖像邊框的向內偏移。	3
border-image-source	規定用作邊框的圖片。	3
border-image-width	規定圖片邊框的寬度。	3
border-radius	簡寫屬性，設置所有四個 border-*-radius?屬性。	3
border-top-left-radius	定義邊框左上角的形狀。	3
border-top-right-radius	定義邊框右下角的形狀。	3
box-decoration-break	�0�2	3
box-shadow	向方框添加一個或多個陰影。	3

Box?屬性

屬性	描述	CSS
overflow-x	如果內容溢出了元素內容區域，是否對內容的左/右邊緣進行裁剪。	3
overflow-y	如果內容溢出了元素內容區域，是否對內容的上/下邊緣進行裁剪。	3
overflow-style	規定溢出元素的首選滾動方法。	3
rotation	圍繞由 rotation-point?屬性定義的點對元素進行旋轉。	3
rotation-point	定義距離上左邊框邊緣的偏移點。	3

QSS字體屬性（Font）

屬性	描述	CSS
font	在一個聲明中設置所有字體屬性。	1
font-family	規定文本的字體系列。	1
font-size	規定文本的字體尺寸。	1
font-size-adjust	為元素規定 aspect 值。	2
font-stretch	收縮或拉伸當前的字體系列。	2
font-style	規定文本的字體樣式。	1
font-variant	規定是否以小型大寫字母的字體顯示文本。	1
font-weight	規定字體的粗細。	1

QSS外邊距屬性（Margin）

屬性	描述	CSS
margin	在一個聲明中設置所有外邊距屬性。	1
margin-bottom	設置元素的下外邊距。	1
margin-left	設置元素的左外邊距。	1
margin-right	設置元素的右外邊距。	1
margin-top	設置元素的上外邊距。	1

CSS?內邊距屬性（Padding）

屬性	描述	CSS
padding	在一個聲明中設置所有內邊距屬性。	1
padding-bottom	設置元素的下內邊距。	1
padding-left	設置元素的左內邊距。	1
padding-right	設置元素的右內邊距。	1
padding-top	設置元素的上內邊距。	1

CSS?定位屬性（Positioning）

屬性	描述	CSS
bottom	設置定位元素下外邊距邊界與其包含塊下邊界之間的偏移。	2
clear	規定元素的哪一側不允許其他浮動元素。	1
clip	剪裁絕對定位元素。	2
cursor	規定要顯示的光標的類型（形狀）。	2
display	規定元素應該生成的框的類型。	1
float	規定框是否應該浮動。	1
left	設置定位元素左外邊距邊界與其包含塊左邊界之間的偏移。	2
overflow	規定當內容溢出元素框時發生的事情。	2
position	規定元素的定位類型。	2
right	設置定位元素右外邊距邊界與其包含塊右邊界之間的偏移。	2
top	設置定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。	2
vertical-align	設置元素的垂直對齊方式。	1
visibility	規定元素是否可見。	2
z-index	設置元素的堆疊順序。	2

CSS?文本屬性（Text）

屬性	描述	CSS
color	設置文本的顏色。	1
direction	規定文本的方向 / 書寫方向。	2
letter-spacing	設置字符間距。	1
line-height	設置行高。	1
text-align	規定文本的水平對齊方式。	1
text-decoration	規定添加到文本的裝飾效果。	1
text-indent	規定文本塊首行的縮進。	1
text-shadow	規定添加到文本的陰影效果。	2
text-transform	控制文本的大小寫。	1
unicode-bidi	設置文本方向。	2
white-space	規定如何處理元素中的空白。	1
word-spacing	設置單詞間距。	1
hanging-punctuation	規定標點字符是否位于線框之外。	3
punctuation-trim	規定是否對標點字符進行修剪。	3
text-align-last	設置如何對齊最后一行或緊挨著強制換行符之前的行。	3
text-emphasis	向元素的文本應用重點標記以及重點標記的前景色。	3
text-justify	規定當 text-align 設置為 "justify" 時所使用的對齊方法。	3
text-outline	規定文本的輪廓。	3
text-overflow	規定當文本溢出包含元素時發生的事情。	3
text-shadow	向文本添加陰影。	3
text-wrap	規定文本的換行規則。	3
word-break	規定非中日韓文本的換行規則。	3
word-wrap	允許對長的不可分割的單詞進行分割并換行到下一行。	3

1.3? Qss過濾選擇器和優先級

1.3.1??????????? Qss選擇器

Qss有一些規則用來設置符合規則的控件名稱，通常是按照通用屬性設置一類控件，對某個有特殊要求的在特別設置。避免大量的重復設置。分為

通配選擇器：*? ;所有的控件屬性設置

{

}

類型選擇器：QPushButton ; 匹配所有QPushButton和其子類的實例

QPushButton

{

}

3.類選擇器：? .QPushButton ;? 匹配所有QPushButton的實例，但是并不匹配其子類。這是與CSS中的類選擇器不一樣的地方，注意前面有一個點號

.QPushButton

{

}

4.屬性選擇器：QPushButton[flat="false"]; 匹配所有flat屬性是false的QPushButton實例，注意該屬性可以是自定義的屬性，不一定非要是類本身具有的屬性

QPushButton[flat="false"]

{

}

5.ID選擇器：? #myButton; 匹配所有id為myButton的控件實例，這里的id實際上就是objectName指定的值,針對特定名稱的控件設置屬性。

QPushButton#myButton1, #myButton2

{

}

6.后代選擇器： QDialog QPushButton ; 所有QDialog容器中包含的QPushButton，不管是直接的還是間接的。

QDialog QPushButton

{

}

7.子選擇器：? QDialog > QPushButton; 所有QDialog容器下面的QPushButton，其中要求QPushButton的直接父容器是QDialog

QDialog > QPushButton

{

}

1.4偽狀態集合

:active	此狀態在小部件駐留在活動窗口時設置
:adjoins-item	此狀態在QTreeView的::branch與一個item相鄰時設置
:alternate	當QAbstractItemView::alternatingRowColors()設置為真時，在繪制QAbstractItemView的行時，為每個交替行設置此狀態
:bottom	此item位于底部。例如，QTabBar有位于底部的選項卡
:checked	此item被選中。例如，QAbstractButton的checked狀態
:closable	此item可以被關閉。例如，QDockWidget的QDockWidget::DockWidgetClosable特性開啟時
:closed	此item處于關閉狀態。例如，QTreeView中未展開的item
:default	此item的默認狀態。例如，一個default的QPushButton或QMenu中的一個默認動作
:disabled	此item被禁用
:editable	如QComboBox是可編輯的
:edit-focus	此item具有編輯焦點(參考QStyle::State_HasEditFocus)。此狀態僅對Qt擴展應用程序可用
:enabled	此item已啟用
:exclusive	此item是一個獨占項組的一部分。例如，獨占QActionGroup中的菜單項
:first	此item是列表中的第一項。例如，QTabBar中的第一個選項卡
:flat	此item是平的。例如，一個扁平的QPushButton
:floatable	此item可以浮動。例如，QDockWidget的QDockWidget::DockWidgetFloatable的特性開啟時
:focus	此item具有輸入焦點
:has-children	此item具有子對象。例如，QTreeView中具有子項的項
:has-sibling	此item具有兄弟對象。例如，QTreeView中與之相鄰的項
:horizontal	此item處于水平方向
:hover	鼠標懸浮在此item上
:indeterminate	此item處于不確定狀態。例如，QCheckBox或QRadioButton被部分選中
:last	此item是列表中的最后一項。例如，QTabBar中的最后一個選項卡
:left	此item位于左側。例如，QTabBar有位于左側的選項卡
:maximized	此item處于最大化狀態。例如，一個最大化的QMdiSubWindow
:middle	此item是列表中的中間一項。例如，一個不在QTabBar中的開頭或結尾的選項卡
:minimized	此item處于最小化狀態。例如，一個最小化的QMdiSubWindow
:movable	此item可以被移動。例如， QDockWidget的QDockWidget::DockWidgetMovable特性開啟時
:no-frame	此item沒有邊框。例如，沒有邊框的QSpinBox或QLineEdit
:non-exclusive	此item是一個非獨占項組的一部分。例如，非獨占QActionGroup中的菜單項
:off	對可以切換的items，這適用于處于off狀態的item
:on	對可以切換的items，這適用于處于on狀態的widget
:only-one	此item是列表中的唯一的一項。例如，一個在QTabBar中單獨的選項卡
:open	此item處于打開狀態。例如，QTreeView中的展開項，或帶有菜單的QComboBox或QPushButton
:next-selected	此item是列表中的下一個被選中的項。例如，在QTabBar中當前選項卡的下一個要選中的選項卡
:pressed	鼠標正在按壓在此item上
:previous-selected	此item是列表中的上一個被選中的項。例如，在QTabBar中當前選項卡的上一個要選中的選項卡
:selected	此item處于選中狀態。例如，一個在QTabBar中被選中的選項卡或一個在菜單中被選中的菜單項
:top	此item位于頂部。例如，QTabBar有位于頂部的選項卡
:unchecked	此item處于未被選中狀
:vertical	此item處于垂直方向
:window	小部件是一個窗口(例如，一個頂層小部件)

?1.5 利用動態屬性分層次設置

? ? ?為控件添加動態屬性，利用屬性選擇器。對界面進行分層次設置皮膚。

? ? ?界面色彩一般分為：主色（EssentialColour），輔助色（ComplementaryColors）

? ? ?點綴色（OrnamentColour）,中性色（NeutraColourl）。因此一般為界面控件添加四種動態屬性。

? ? ?各種色彩對應界面部分：

? ? ?主色：頂部標題欄和背景色

? ? ?輔助色：為主色臨近色或同系色。各子個模塊顏色

? ? ?點綴色：為主色的互補色，對標題或模塊進行裝飾。如邊框花邊

? ? ?中性色：以主色為色基的中性色。一般為文字。

? ? ?例：QMinWidno[EssentialColour=true]{background:#7F9AB8}(主色)

? ? ? ? ? ? QWidget[ComplementaryColors=true]{background:#7F9AB8}(輔助色)

? ? ? ? ? ? QWidget[OrnamentColour=true]{background:#7F9AB8}(點綴色)

? ? ? ? ? ? QWidget[NeutraColourl=true]{background:#7F9AB8}(中性色)

1.6 代碼中加載Qss：main.cpp中添加

QString?qss;
QFile?qssFile(pStyleSheet);???????
qssFile.open(QFile::ReadOnly);???
if(qssFile.isOpen()){?
? ?qss = QObject::tr(qssFile.readAll());?
? ?qApp->setStyleSheet(qss);?
? ?qssFile.close();?
}

1.7 Qss高亮配置

進入：工具 -> 選項 -> 環境 -> MIME 類型。

在【已注冊的MIME類型】處輸入“text/css”可以快速定位，然后在【詳情】中的“模式”處添加?*.qss，即將原來的“模式”改為：*.css;*.CSSL;*.qss。

注意：中間用分號（;）分隔

高亮

重新打開?qss 文件就可以高亮顯示了

1.8 Qss 編輯工具

? ? ?為什么要使用qss編輯工具？這是因為qt creater中編輯樣式后，不能實時查看編輯效果，導致調整控件樣式時效率極低。利用一款qss 編輯工具將樣式快速編輯好并導出qss文件，這樣能大大提高效率。推薦使用QssEditor編輯工具對qss進行編輯。作者：dmitrykx，是Qt4的開發者。qss editor 能高亮顯示關鍵字，實時查看編輯效果，能導出qss文件。

? ? ?資源地址：https://download.csdn.net/download/zeng675147/19952932?spm=1001.2014.3001.5501

總結

以上是生活随笔為你收集整理的Qss换肤设置的全部內容，希望文章能夠幫你解決所遇到的問題。

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

换肤
qss

上一篇： Corner芯片TT,FF,SS
下一篇： C语言杨辉三角的程序分析,C语言：打印杨