qss使用心得

a. 多些使用負值和方向的結(jié)合解決問題；例如底部有白色線border-bottom? margin，字體上移padding-top:-2px

QTabBar::tab:selected? {border-image: url(:/Style/img/QLabel/tab.png); } QTabBar::tab:!selected? {margin-top:4px solid;border-bottom:-10px solid rgb(255,255,255);margin-bottom:-2px ;background-color: rgb(222, 222, 222);color: #1580B4;padding-top:-2px; } QTabBar::tab {font:13pt "PingFang SC Bold" ;?width:132px;height:47px;margin-right:4px;background-color: rgb(255, 255, 255);border-top-left-radius:5px;border-top-right-radius:5px;margin-bottom:0px; } QTabWidget:pane{border:solid 1px rbg(214,214,214);top:-1px; }

QProgressBar樣式

a. 樣式設(shè)置透明，直接使用單詞transparent;

QProgressBar {border: none;color: white;text-align: center;background: transparent; /*設(shè)置背景透明*/ } QProgressBar::chunk? {border: none;background-color: rgb(255,255,255); } /*加個邊框*/ QFrame#frame_value {border:1px solid #ffffff;border-radius: 2px;background-color:transparent; }

QSS使用

QSS類似于CSS可以用于設(shè)置控件樣式，由于QT style是模擬CSS的布局結(jié)構(gòu)，因此其滿足CSS的盒子模型可以統(tǒng)一UI上同類型的控件，不用一個個去設(shè)置樣式。。基本用法如下：

QSS文件的創(chuàng)建

（1）建立文本文件，寫入樣式表內(nèi)容，更改文件后綴名為qss；

（2）在工程中新建資源文件*.qrc，將qss文件加入資源文件qrc中，此處注意prefix最好為"/"，否則在調(diào)用qss文件時會找不到文件；

（3）通過傳入路徑\文件名的方式創(chuàng)建一個QFile對象，以readonly的方式打開，然后readAll，最后qApp->setStyleSheet就可以使qss生效。

2.QSS的使用

使用qss可將功能與界面的設(shè)計分離開，方便UI設(shè)計，也可以制作更多更美的界面。

在代碼中調(diào)用qss文件：（可以在構(gòu)造函數(shù)中設(shè)置）

/??? QFile styleSheet(":/qss/myStyle.qss"); if (!styleSheet.open(QIODevice::ReadOnly)) {qWarning("Can't open the style sheet file.");return; } qApp->setStyleSheet(styleSheet.readAll()); styleSheet.close();

如何獲取Qss的幫助？

在Qt幫助文檔中搜索關(guān)鍵字：Style Sheet

控件UI設(shè)計

添加邊框顏色

父窗體設(shè)置樣式不影響子控件

如果是在Creator中設(shè)置，可在stylesheet中加上”#XXX“，XXX是類名；例如 “#myGroupBox{color:red}”，那么group的背景色變成紅色的！

在代碼中設(shè)置同樣如此，setStyleSheet?(“#myGroupBox{color:red}”?); 一定要注意：myGroupBox是objectName，不然樣式表中識別不了！

widget控件不能添加背景圖片。

1. 下拉框 QComboBox ：

a. 點擊箭頭向上，QComboBox::drop-down:checked{}

b. 下拉列表：QAbstractItemView

c. 每一項：QAbstractItemView::item{height: 25px;}

2. 復(fù)選框和單選框：

QRadioButton::indicator::checked， image使用。

3. QRadioButton

a. 去除選中的圓圈：

QRadioButton::indicator::unchecked{

border:none;

}

4. QSS學(xué)習(xí)之Subcontrol(很詳細）

5. 官方樣式表：

Qt Style Sheets Examples

6. 給控件加邊框：

border: 1px solid rgb(210,210,210);

7. 界面開發(fā)工具：

picpick、qss三件套

8. no-repeat center的基本用法介紹

鏈接

a. 在border 和 background 設(shè)置背景圖的時候可以使用，no-repeat是該圖形不重復(fù)，就會出現(xiàn)一個，然后center就只會出現(xiàn)一次【background不是background-image】

b. 在默認情況下是repeat（平鋪）如下

d. no-repeat center如下：

官方樣式文檔：

* **Qt Style Sheets**

按鈕操作相關(guān)

Button:hover{}//按鈕獲取鼠標焦點

Button:pressed{}//按鈕壓下

Button:disabled{}//按鈕被禁止，按鈕無效

表格表頭屬性和滾動條屬性

QHeaderView {}不能單獨設(shè)置某個類型的table的表頭，因為表頭不屬于tablewidget里面的內(nèi)容。一個table有四部分組成：item、horizontalHeader，verticalHeader，cornerBottonEnabled

QHeaderView::section{}	選中
QScrollBar:horizontal QScrollBar:vertical	分水平和垂直。一個沒有height，另外一個沒有width屬性
QScrollBar	不分。都適應(yīng)。

border-image 和 background-image

* border可以覆蓋控件，并且讓按鈕的突起不會顯示

對于一個widget里面的所有控件的樣式設(shè)置，

例如widget名字：wg1

QWidget#wg1 QPushButton{}//改變wg1所有的button

QWidget#wg1 *{} //所有控件

選擇器

*任意窗口的部件

QDial	給定類的實例，包括子類
.QDial	給定類的實例，不包括子類
QDial#ageDial	給定對象名稱的窗口部件
QFrame > QDial	給定窗口部件的直接子窗體部件
QFrame QDial	給定窗體部件的子孫窗體部件
QPushButton[enable=“false”]	屬性選擇器，配合bt->style()->polish(bt);來一起使用。可以動態(tài)的改變樣式。 需要設(shè)置enable屬性，setProperty()和property（）

Qt樣式表中常見的子控件列表

::branchQTreeView的分支指示器

::chunk	QProgressBar的進度顯示塊
::close-button	QDockWidget或者QTabBar頁面的關(guān)閉按鈕
::down-arrow	ComboBox、QHeaderView（排序指示器）、QScrollBar或者QSpinBox的下拉箭頭
::down-button	QScrollBar或者QSpinBox的向下按鈕
::drop-down	ComboBox的下拉按鈕
::float-button	QDockWidget的浮動按鈕
::groove	QSlider的凹槽
::indicator	QAbstractItemView、QCheckBox、QRadioButon、可勾選的QMenu菜單項、或者可勾選的QGroupBox的指示器
::handle	QScrollBar、QSplitter或者QSlider的滑塊
::icon	QAbstractItemView或者QMenu的圖標
::item	QAbstractItemView、QMenuBar、QMenu或者QStatusBar的一個項
::left-arrow	QScrollBar的向左箭頭
::menu-arrow	具有下拉菜單的QToolButton的下拉箭頭
::menu-button	QToolButton的菜單按鈕
::menu-indicator	QPushButton的菜單指示器
::right-arrow	QMenu或者QScrollBar的右側(cè)箭頭
::pane	QTabwidget的面板
::scroller	QMenu或者QTabBar的卷軸
::section	QHeaderView的分段
::separator	QMenu或者QMainWindow的分割器
::tab	QTabBar或QToolBox的分頁
::tab-bar	QTableWidget的分頁條，這個子控件只用于控制QTabBar在QTabWidget中的位置，定義分頁的樣式使用::tab子控件
::text	QAbstracItemView的文字
::title	QGroupBox或者QDockWidget的標題
::up-arrow	QHeaderView(排序指示器），QScrollBar或者QSpinBox的向上箭頭
::up-button	QSpinBox的向上按鈕

偽狀態(tài)

:active當組件處于一個活動的窗體時，此狀態(tài)為真

:adjoins-item	QTreeView::branch與一個條目相鄰時，此狀態(tài)為真。
:alternate	當QAbstractItem的alternatingRowColors()屬性為true時，繪制交替的行時此狀態(tài)為真
:bottom	組件處于底部，如QTabBar的表頭位于底部
:checked	組件被勾選，如QAbstractButton的checked屬性為true
:closable	組件可以被關(guān)閉時候，為true
:closed	條目處于關(guān)閉狀態(tài)時，true
:default	條目是缺省的，如一個缺省的QPushButton按鈕
:disabled	條目被禁用
:editable	QComboBox是可編輯的
:edit-focus	條目有編輯焦點
:enabled	條目被使能
:exclusive	條目是一個排他性組的一部分，如一個排他性的QActionGroup的一個菜單項
:first	第一項，如QTabBar中的第一個項
:flat	條目是flat的，設(shè)置flat屬性為true
:focus	條目具有焦點
:has-chlidren	條目有子條目，如QTreeView的一個節(jié)點具有子節(jié)點
:horizontal	條目具有水平方向
:hover	鼠標移動到條目上方時
:last	最后項，和first相對
:left	條目位于左側(cè)，錄入QTabBar的頁頭位于左側(cè)
:maximized	條目處于最大化，例如最大化的QMdiSubWindow窗口
:minmized	條目處于最小化，例如最小化的QMdiSubWindow窗口
:movable	條目可移動的
:off	對于可以切換狀態(tài)的條目，其狀態(tài)處于“off”
:on
:open	條目處于打開狀態(tài)，如QTreeView的一個展開條目
:pressed	條目上按下鼠標
:read-only	只讀or不可編輯
:right	條目位于右側(cè)
:selected	條目被選中
:top	條目位于頂端
:unchecked	沒有選中
:vertical	條目處于垂直方向

輔助控制器

輔助控制器說明

::indicator	復(fù)選框，單選框、可選菜單項或可選群組框的指示器
::menu-indicator	按鈕的菜單指示器
::item	菜單

狀態(tài)可以和狀態(tài)結(jié)合：

例如：QCheckBox:check:hover{}

狀態(tài)補充：QComboBox:editable{}; 狀態(tài)還可以取反!editable;

QComboBox::down-arrow:on{}//如果組合框是打開的，向下箭頭將下移一個像素

a:link是超級鏈接的初始狀態(tài)

a:hover是把鼠標放上去時懸停的狀況

a:active?是鼠標點擊時

a:visited是訪問過后的情況

text-align:設(shè)置字體位置，text-align:centre;

屬性：

* padding：上右下左位置填充空間，位置在文字和窗體之間；支持padding-top;-right;-bottom;-left;

動態(tài)加載樣式QSS

可以適應(yīng)兩種情況：同一個widget/table里面同一控件存在兩種樣式；同一個控件需要兩種不同變化：最大化，最小化，鼠標聚焦的時候；

https://blog.csdn.net/liang19890820/article/details/51693956

• 水平線和垂直線Line 在樣式表中是使用QFrame來設(shè)置
• 日歷控件的樣式設(shè)置：

相關(guān)連接：https://blog.csdn.net/lycx1234/article/details/98883608

QCalendarWidget QTableView {font: 11pt "思源黑體 CN Medium"; }QCalendarWidget QMenu {font: 10pt "思源黑體 CN Medium"; }

總結(jié)

以上是生活随笔為你收集整理的QSS样式使用心得以及基础的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。