當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

超详细的QSS样式表入门Demo

發(fā)布時間：2023/12/14 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了超详细的QSS样式表入门Demo 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

超詳細(xì)的QSS樣式表入門Demo📄

文章目錄

超詳細(xì)的QSS樣式表入門Demo📄
- @[toc]
- 1、說明🔑
- 2、Qt控件樣式💡
- - 2.1 QAbstractScrollArea
  - 2.2 QCheckBox
  - 2.3 QRadioButton
  - 2.4 QPushButton
  - 2.5 QToolButton
  - 2.6 QComboBox
  - 2.7 QDockWidget
  - 2.8 QFrame、QLabel、QToolTip
  - 2.9 QGroupBox
  - 2.10 QLineEdit
  - 2.11 QMainWindow
  - 2.12 QMenu
  - 2.13 QMenuBar
  - 2.14 QProgressBar
  - 2.15 QScrollBar
  - 2.16 QSizeGrip
  - 2.17 QSlider
  - 2.18 QAbstractSpinBox
  - 2.19 QSplitter
  - 2.20 QStatusBar
  - 2.21 QTabWidget
  - 2.22 QListView
  - 2.23 QHeaderView、QTableView、QTableWidget
  - 2.24 QToolBar
  - 2.25 QToolBox
  - 2.26 QToolTip
  - 2.27 QDial
  - 2.28 QCalendarWidget
  - 2.29 QTreeView、QTreeWidget
- 3、源代碼📌

更多精彩內(nèi)容

👉個人內(nèi)容分類匯總 👈

pdf版本下載📝

1、說明🔑

十分詳細(xì)的Qss樣式表練習(xí)Demo，為了效果明顯有些樣式進(jìn)行了夸張，所以不一定好看;
包含了常用控件的Qss樣式；

2、Qt控件樣式💡

2.1 QAbstractScrollArea

QAbstractScrollArea作為父類，他的樣式表適用于QListView、QTextEdit、QPlainTextEdit、QTextBrowser、QTreeWidget、 QGraphicsView、QMdiArea、QScrollArea等控件。
效果
關(guān)鍵代碼
ui->mdiArea->setBackground(Qt::NoBrush); // 如果不設(shè)置則QMdiArea的qss樣式不會生效
關(guān)鍵Qss樣式表
/********************QAbstractScrollArea樣式**********************/ QAbstractScrollArea{ /* background-color: rgba(255, 0, 0, 150);*/ /* 設(shè)置背景色*/background-image: url(:/image/bg.PNG); /* 設(shè)置背景圖片*/background-repeat:no-repeat; /* 設(shè)置背景圖像是否及如何重復(fù)*/background-position:center; /* 設(shè)置背景圖像的起始位置*/background-attachment: scroll; /* 背景圖像是否固定或者隨著頁面的其余部分滾動 */color: rgb(0, 255, 0); }/*由于QScrollArea里還有一層QWidget，所以需要將這一層QWidget設(shè)置透明才可以通過QAbstractScrollArea設(shè)置背景*/ QScrollArea #scrollAreaWidgetContents {background-color: rgba(255, 255, 255, 0); }

2.2 QCheckBox

效果
關(guān)鍵代碼
ui->checkBox->setTristate(true); // 開啟QCheckBox不確定態(tài)(開啟三態(tài)復(fù)選框)
關(guān)鍵Qss樣式表
/********************復(fù)選框樣式**********************/ QCheckBox{spacing:15px; /*設(shè)置標(biāo)簽和矩形框的間距*/ }QCheckBox::indicator{width: 15px; /*設(shè)置復(fù)選框矩形部分大小*/height: 15px; }QCheckBox::indicator:unchecked {image: url(:/image/正方形-未選中.png); /* 設(shè)置未選中狀態(tài)矩形部分圖片*/ }QCheckBox::indicator::checked {image: url(:/image/復(fù)選框-選中.png); /*設(shè)置選中狀態(tài)*/ }QCheckBox::indicator::indeterminate{image: url(:/image/復(fù)選框-未全選.png); /*設(shè)置不確定狀態(tài)*/ }QCheckBox::indicator:unchecked:hover, QCheckBox::indicator::checked:hover, QCheckBox::indicator::indeterminate:hover{width: 16px;height: 16px; /*設(shè)置矩形部分鼠標(biāo)懸停狀態(tài)*/ }QCheckBox::indicator:unchecked:pressed, QCheckBox::indicator::checked:pressed, QCheckBox::indicator::indeterminate:pressed{background-color: rgb(8, 202, 255); /*設(shè)置矩形部分鼠標(biāo)按下背景色*/ }

2.3 QRadioButton

效果
關(guān)鍵Qss樣式表
/********************單選框樣式**********************/QRadioButton::indicator{width:15px;height:15px; }QRadioButton::indicator:unchecked {image: url(:/image/單選框-未選中.png); }QRadioButton::indicator:checked{ image: url(:/image/單選框-選中.png); }QRadioButton::indicator:unchecked:hover, QRadioButton::indicator:checked:hover{width: 16px;height: 16px; }QRadioButton::indicator:unchecked:pressed, QRadioButton::indicator:checked:pressed{background-color: rgb(8, 202, 255); }

2.4 QPushButton

效果
關(guān)鍵代碼
ui->pushButton_3->setAutoDefault(true); // 設(shè)置默認(rèn)按鍵(對應(yīng)QPushButton:default樣式) ui->pushButton_4->setFlat(true); // 設(shè)置后按鈕跟背景色融為一體（對應(yīng)QPushButton:flat） ui->but_icon->setIcon(this->style()->standardIcon(QStyle::SP_TitleBarMenuButton)); // 按鍵添加圖標(biāo)
關(guān)鍵Qss樣式表
/********************QPushButton樣式**********************/ QPushButton {border: 2px solid #8f8f91; /* 設(shè)置邊框粗細(xì)、樣式、顏色*/border-radius: 6px; /* 設(shè)置邊框圓角 */background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #f6f7fa, stop: 1 #dadbde);min-width: 80px; /* 設(shè)置按鍵的最小寬度 */min-height: 25px; }QPushButton:pressed{ /* 設(shè)置按鍵按下樣式 */background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #dadbde, stop: 1 #f6f7fa); }QPushButton:flat {border: none; /* no border for a flat push button */ }QPushButton:default { /* 設(shè)置默認(rèn)按鍵樣式 */border-color: rgb(85, 170, 255); }QPushButton:open { /* 設(shè)置菜單打開時button樣式*/background - color:qlineargradient(x1: 0 , y1: 0 , x2: 0 , y2: 1 ,stop: 0 #dadbde, stop: 1 #f6f7fa); }QPushButton::menu-indicator { /* 設(shè)置下拉箭頭 */subcontrol-origin: content; /* 父控件內(nèi)子控件的原點矩形。是QSS獨有的屬性。值為父控件的盒子模式的區(qū)域 */subcontrol-position: center right; /* 設(shè)置下拉箭頭顯示位置為水平方向上靠右，垂直方向居中*/ }QPushButton::menu-indicator:pressed, QPushButton::menu-indicator:open {position: relative; /* 指定了元素的定位類型*/top: 1px; left: 2px; /* 設(shè)置在點擊按鍵、打開菜單時偏移下拉箭頭*/ }

2.5 QToolButton

效果
說明：
- QToolButton::menu-button：右側(cè)綠色部分；
- QToolButton::menu-arrow：右側(cè)紅色部分。
關(guān)鍵Qss樣式表
/********************QToolButton樣式**********************/ QToolButton { /* 這里使用#tab_2限定樣式的作用范圍，防止影響其它tab中的控件樣式*/border:2px solid #8f8f91; /* 設(shè)置邊框 */border-radius: 6px; /* 圓角 */background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #f6f7fa, stop: 1 #dadbde);min-width: 80px;min-height: 25px; }QToolButton[popupMode="1"] { /* setPopupMode設(shè)置了MenuButtonPopup后的樣式*/padding-right: 20px; /* 設(shè)置元素右內(nèi)邊距*/ }QToolButton:pressed { /* 鼠標(biāo)按下樣式 */background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #dadbde, stop: 1 #f6f7fa); }QToolButton::menu-button { /* setPopupMode設(shè)置了MenuButtonPopup后包含下拉箭頭button的樣式*/border: 2px solid #8f8f91;border-top-right-radius: 6px;border-bottom-right-radius: 6px; /* 需要設(shè)置圓角和QToolButton一致*/width: 16px; /* 設(shè)置下拉箭頭button寬度 */ }QToolButton::menu-arrow { /* 設(shè)置下拉箭頭樣式 */image: url(:/image/下.png); }QToolButton::menu-arrow:open { /* 打開菜單時偏移下拉箭頭 */top: 1px;left: 1px; }

2.6 QComboBox

效果
說明：
- QComboBox::drop-down：綠色部分；
- QComboBox::down-arrow：紅色部分。
關(guān)鍵Qss樣式表
/********************QComboBox樣式**********************/ QComboBox {border: 1px solid gray;border-radius: 3px;padding: 1px 18px 1px 3px; /* 設(shè)置元素邊框與元素內(nèi)容之間的上右下左的內(nèi)邊距 */min-width: 6em; }QComboBox:editable { /* 設(shè)置可編輯的樣式*/background-color: white; }QComboBox:!editable, /* QComboBox不可編輯狀態(tài)*/ QComboBox::drop-down:editable { /* 下拉箭頭按鍵區(qū)域可編輯狀態(tài)*/background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3); }QComboBox:!editable:on, QComboBox::drop-down:editable:on { /* 當(dāng)彈出窗口打開時，QComboBox獲取“打開”狀態(tài)(打開下拉框狀態(tài))*/background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #D3D3D3, stop: 0.4 #D8D8D8,stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1); }QComboBox:on { /* 彈出下拉框窗口時移動文本*/padding-top: 3px;padding-left: 6px; }QComboBox::drop-down { /* 設(shè)置下拉按鍵*/subcontrol-origin: padding; /* 設(shè)置按鍵在QComboBox盒子模型中的參考位置margin border padding content*/subcontrol-position: top right; /* 設(shè)置按鍵位置靠上靠右*/background-color: rgb(245, 245, 245);width: 20px;border-left-width: 2px; /* 設(shè)置下拉按鍵左邊框?qū)挾?/border-left-color: rgb(0, 255, 0); /* 左邊框顏色*/border-left-style: solid;border-top-right-radius: 3px; /* 設(shè)置邊框圓角*/border-bottom-right-radius: 3px; }QComboBox::down-arrow { /* 設(shè)置下拉箭頭*/image: url(:/image/下.png); }QComboBox::down-arrow:on { /* 打開下拉框時移動下拉箭頭*/top: 1px;left: 1px; }QComboBox QAbstractItemView {border: 2px solid rgb(0, 255, 0); /* 設(shè)置下拉列表邊框*/selection-background-color: lightgray; /* 設(shè)置下拉列表選擇項的背景色*/ }

2.7 QDockWidget

效果
關(guān)鍵Qss樣式表
/********************QDockWidget樣式**********************/ QDockWidget {border: 2px solid rgb(0, 255, 0);titlebar-close-icon: url(:/image/close.png); /* 設(shè)置關(guān)閉按鍵圖標(biāo)*/titlebar-normal-icon: url(:/image/undock.png); /* 設(shè)置彈出窗口按鍵圖標(biāo)*/ }QDockWidget::title {text-align: right; /* 標(biāo)題文本右對齊*/background-color: rgb(0, 255, 0); /* 設(shè)置標(biāo)題欄背景色*/padding-right: 15px; /* 標(biāo)題元素的右內(nèi)邊距*/ }QDockWidget::close-button, /* 設(shè)置關(guān)閉、浮動窗口按鍵樣式*/ QDockWidget::float-button {border: 1px solid transparent; /* 設(shè)置邊框*/background: transparent; /* 設(shè)置背景色*/ } QDockWidget::close-button:hover, QDockWidget::float-button:hover {background: rgba(161, 161, 161, 70); /* 設(shè)置標(biāo)題欄按鍵鼠標(biāo)進(jìn)入的樣式*/ }QDockWidget::close-button:pressed, QDockWidget::float-button:pressed {padding: 1px -1px -1px 1px; /* 設(shè)置標(biāo)題欄按鍵鼠標(biāo)按下的樣式*/ }/* 設(shè)置標(biāo)題欄關(guān)閉按鍵、浮動窗口按鍵靠左 QDockWidget::close-button {subcontrol-position: top left;subcontrol-origin: margin;position: absolute;top: 0px; left: 0px; bottom: 0px;width: 14px; }QDockWidget::float-button {subcontrol-position: top left;subcontrol-origin: margin;position: absolute;top: 0px; left: 16px; bottom: 0px;width: 14px; } */

2.8 QFrame、QLabel、QToolTip

由于QLabel、QToolTip都是基于QFrame實現(xiàn)的，所以設(shè)置樣式的方法都差不多；
效果
關(guān)鍵Qss樣式表
/********************QFrame、QLabel、QToolTip樣式**********************/ QFrame, QLabel, QToolTip {border: 2px solid rgb(0, 255, 0);border-radius: 4px; /* 設(shè)置邊框圓角*/padding: 2px; }

2.9 QGroupBox

效果
關(guān)鍵Qss樣式表
/********************QGroupBox樣式**********************/ QGroupBox {background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #E0E0E0, stop: 1 #FFFFFF);border: 2px solid gray; /* 設(shè)置邊框*/border-radius: 5px; /* 邊框圓角*/margin-top: 1ex; }QGroupBox::title {subcontrol-origin: margin; /* 設(shè)置GroupBox標(biāo)題在盒子模型中的參考位置margin border padding content*/subcontrol-position: top center; /* 標(biāo)題位于頂部中心位置*/padding: 0 15px; /* 設(shè)置上下填充為0，左右填充為15*/background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #FF0ECE, stop: 1 #FFFFFF); /* 設(shè)置標(biāo)題背景色*/ }/*QGroupBox復(fù)選框和QCheckBox樣式一樣*/ QGroupBox::indicator{width: 15px; /*設(shè)置復(fù)選框矩形部分大小*/height: 15px; }QGroupBox::indicator:unchecked {image: url(:/image/正方形-未選中.png); /* 設(shè)置未選中狀態(tài)矩形部分圖片*/ }

2.10 QLineEdit

效果
關(guān)鍵Qss樣式表
/********************QLineEdit樣式，也適用于Item（如QListView、QTableView）**********************/ QLineEdit {border: 2px solid rgb(0, 255, 0); /* 設(shè)置邊框*/border-radius: 10px; /* 設(shè)置邊框圓角*/padding: 0 8px; /* 設(shè)置上下填充0，左右填充8*/selection-background-color: darkgray; /* 設(shè)置選中文本的背景色*/ }/* 當(dāng)echoMode設(shè)置為密文時的樣式*/ QLineEdit[echoMode="2"] {/*lineedit-password-character: 9679;*/ /*9679為Unicode的實心圓*/lineedit-password-character: 42; /*42為Unicode的星*/ }/* 只讀樣式*/ QLineEdit:read-only {color: rgb(200, 200, 200); }

2.11 QMainWindow

QMainWindow需要設(shè)置的樣式就是和QDockWidget之間的分割條（圖中黃色、紅色豎線）；
效果
關(guān)鍵Qss樣式表
/********************QMainWindow樣式**********************/ QMainWindow::separator { /* 窗口分割條樣式，例如QMainWindow和QDockWidget分割*/background: yellow;width: 10px;height: 10px; }QMainWindow::separator:hover { /* 鼠標(biāo)進(jìn)入*/background: red; }

2.12 QMenu

效果
關(guān)鍵代碼
// 設(shè)置菜單欄 QMenu* menuFile = ui->menubar->addMenu("文件"); QAction* open = menuFile->addAction("打開"); open->setCheckable(true); // 設(shè)置菜單項可選 menuFile->addSeparator(); // 添加分割欄(對應(yīng)QMenu::separator樣式) QAction* save = menuFile->addAction("保存"); save->setCheckable(true); // 設(shè)置菜單項可選 save->setIcon(this->style()->standardIcon(QStyle::SP_DialogSaveButton)); // 設(shè)置菜單圖標(biāo) ui->menubar->addMenu("編輯"); ui->menubar->addMenu("構(gòu)建");
關(guān)鍵Qss樣式表
/********************QMenu菜單樣式**********************/ QMenu {background-color: #55aaff; /* 設(shè)置菜單的背景，如果設(shè)置了QMenu::item無效*/border: 2px solid #55ff7f; /* 設(shè)置菜單邊框*/ }QMenu::item {background-color: transparent; /* 設(shè)置菜單項背景透明*/ }QMenu::item:selected { /* 當(dāng)用戶使用鼠標(biāo)或鍵盤選擇項目時*/background-color: rgba(85, 170, 255, 100); }QMenu::separator { /* 設(shè)置菜單欄分割線樣式*/height: 2px;background: red;margin-left: 15px; /* 設(shè)置左外邊距*/margin-right: 5px; }

2.13 QMenuBar

效果
關(guān)鍵Qss樣式表
/********************QMenuBar菜單欄樣式**********************/ QMenuBar {background-color: qlineargradient(spread:pad, x1:0.494318, y1:0.011, x2:0.517045, y2:1,stop:0.488636 rgba(85, 170, 255, 255), stop:0.914773 rgba(255, 255, 255, 255));spacing: 30px; /* 菜單欄項目之間的間距*/ }QMenuBar::item {padding: 10px 4px; /* 定義菜單項元素邊框與元素內(nèi)容之間的距離，上下距離10px，左右距離4px*/ }QMenuBar::item:selected { /* 選中的菜單項的樣式*/background: #FFFF00; }QMenuBar::item:pressed { /* 鼠標(biāo)在菜單項按下的樣式*/background: #FF00FF; }

2.14 QProgressBar

效果
說明：
- QProgressBar::chunk：橫向的進(jìn)度塊，藍(lán)色的小塊；
- QProgressBar::chunk:vertical：豎向的進(jìn)度塊；
關(guān)鍵Qss樣式表
/********************QProgressBar進(jìn)度條樣式**********************/ /* 設(shè)置進(jìn)度條邊框、圓角，這里有一個bug，QProgressBar默認(rèn)alignment的設(shè)置在使用qss后會將文本顯示到左上角, 可以重新設(shè)置alignment也可以使用text-align指定文本顯示位置*/ QProgressBar {border: 2px solid grey;border-radius: 5px;text-align: center; }QProgressBar:vertical { /* 豎向進(jìn)度條樣式*/border: 2px solid grey;border-radius: 5px;text-align: center; }/* 通過設(shè)置進(jìn)度快寬度和邊距可以得到一個條紋狀的進(jìn)度快*/ QProgressBar::chunk {background-color: #05B8CC; /* 設(shè)置進(jìn)度塊樣式*/width: 10px; /* 設(shè)置進(jìn)度塊寬度*/margin: 0.5px; /* 設(shè)置進(jìn)度塊外邊距*/ }QProgressBar::chunk:vertical {background-color: #05B8CC; /* 設(shè)置進(jìn)度塊樣式*/height: 10px; /* 設(shè)置進(jìn)度塊高度*/margin: 0.5px; /* 設(shè)置進(jìn)度塊外邊距*/ }

2.15 QScrollBar

效果
關(guān)鍵Qss樣式表
/********************QScrollBar橫向滾動條樣式**********************/ QScrollBar:horizontal { /* 設(shè)置橫滾動條樣式*/border: 2px solid grey;background: #32CC99;height: 20px;margin: 0px 20px 0px 20px; /* 設(shè)置滾動條上,右,下,左邊距*/ }QScrollBar::handle:horizontal { /* 設(shè)置滑動條中滑塊的樣式*/background: #05B8CC;border: 1px solid white;min-width: 20px; }QScrollBar::add-line:horizontal { /* 設(shè)置右按鍵*/border: 2px solid grey;background: rgb(255, 0, 0);width: 20px;subcontrol-position: right; /* 按鍵位于右側(cè)位置*/subcontrol-origin: margin; /* 設(shè)置按鍵在盒子模型中的參考位置margin border padding content*/ }QScrollBar::sub-line:horizontal { /* 設(shè)置左按鍵*/border: 2px solid grey;background: rgb(0, 255, 0);width: 20px;subcontrol-position: left;subcontrol-origin: margin; }QScrollBar::left-arrow:horizontal { /* 左按鍵中的箭頭區(qū)域樣式*/ /* border: 2px solid grey;width: 15px;height: 15px;*/image: url(:/image/左.png); }QScrollBar::right-arrow:horizontal { /* 右按鍵中的箭頭區(qū)域*/image: url(:/image/右.png); }QScrollBar::sub-page:horizontal { /* 設(shè)置滑動條左側(cè)區(qū)域樣式*/background: rgb(255, 0, 0); }QScrollBar::add-page:horizontal { /* 設(shè)置滑動條右側(cè)區(qū)域樣式*/background: none; }/********************QScrollBar豎向滾動條樣式**********************/ QScrollBar:vertical {border: 2px solid grey;background: #32CC99;width: 20px;margin: 20px 0px 20px 0px; /* 設(shè)置滾動條上,右,下,左邊距*/ }QScrollBar::handle:vertical { /* 設(shè)置滑動條中滑塊的樣式*/background: #05B8CC;border: 1px solid white;min-height: 20px; }QScrollBar::add-line:vertical { /* 設(shè)置下按鍵*/border: 2px solid grey;background: rgb(255, 0, 0);height: 20px;subcontrol-position: bottom; /* 按鍵位于底部位置*/subcontrol-origin: margin; /* 設(shè)置按鍵在盒子模型中的參考位置margin border padding content*/ }QScrollBar::sub-line:vertical { /* 設(shè)置上按鍵*/border: 2px solid grey;background: rgb(0, 255, 0);height: 20px;subcontrol-position: top;subcontrol-origin: margin; }QScrollBar::up-arrow:vertical { /* 上按鍵中的箭頭區(qū)域樣式*/ /* border: 2px solid grey;width: 15px;height: 15px;*/image: url(:/image/上.png); }QScrollBar::down-arrow:vertical { /* 下按鍵中的箭頭區(qū)域*/image: url(:/image/下d.png); }QScrollBar::sub-page:vertical { /* 設(shè)置滑動條上側(cè)區(qū)域樣式*/background: rgb(255, 0, 0); }QScrollBar::add-page:vertical { /* 設(shè)置滑動條下側(cè)區(qū)域樣式*/background: none; }

2.16 QSizeGrip

效果
關(guān)鍵Qss樣式表
/********************QSizeGrip樣式**********************/ /* 位于窗口右下角，用于調(diào)整窗口大小*/ QSizeGrip {background-color: qconicalgradient(cx:0, cy:0, angle:135,stop:0 rgba(0, 207, 255, 255),stop:0.301136 rgba(0, 250, 255, 69),stop:0.423533 rgba(0, 121, 255, 145),stop:0.45 rgba(0, 218, 255, 208),stop:0.477273 rgba(71, 255, 244, 130),stop:0.517045 rgba(71, 205, 255, 130),stop:0.55 rgba(0, 111, 255, 255),stop:0.57754 rgba(0, 255, 218, 130),stop:0.625 rgba(0, 175, 255, 69),stop:0.982955 rgba(7, 0, 255, 69));width: 20px;height: 20px; }

2.17 QSlider

效果
說明：
- QSlider::groove：整個滑動槽（圖2灰色部分，包含了sub-page、add-page）;
關(guān)鍵Qss樣式表
/********************QSlider橫向滑動條樣式**********************/ QSlider {background-color: rgba(170, 255, 255, 100); /* 設(shè)置滑動條主體*/ }QSlider::groove:horizontal {border: 1px solid #999999;height: 8px; /* 默認(rèn)情況下，凹槽會擴(kuò)展到滑塊的大小。通過給它一個高度，它有一個固定的大小*/background-color: qlineargradient(spread:reflect, x1:0.500364, y1:0.0561364, x2:0.5, y2:0.517045,stop:0 rgba(168, 164, 168, 250), stop:1 rgba(232, 232, 232, 255));border-radius: 4px; /* 設(shè)置滑動槽圓角*/ }QSlider::handle:horizontal {background-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.50565, fy:0.500409,stop:0 rgba(0, 0, 0, 255), stop:0.361582 rgba(0, 146, 146, 255),stop:0.649718 rgba(255, 255, 255, 255), stop:1 rgba(0, 177, 181, 255));border: 1px solid #5c5c5c;width: 14px;margin: -4px 0px; /* 使用負(fù)的邊距可以讓滑塊高度超過滑動槽高度*/border-radius: 8px; /* 通過設(shè)置圓角邊框得到圓形的滑塊 */ }QSlider::sub-page:horizontal { /* 設(shè)置滑塊滑過區(qū)域樣式（左側(cè)）*/border: 1px solid #999999;border-radius: 4px;background-color:qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0,stop:0 rgba(231,80,229, 255),stop:1 rgba(7,208,255, 255)); } QSlider::add-page:horizontal { /* 設(shè)置滑塊未滑過區(qū)域樣式（右側(cè)）*/border: 1px solid #999999;border-radius: 4px;background-color:qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0,stop:0 rgba(231,80,229, 255),stop:1 rgba(7,208,255, 255)); }/********************QSlider豎向滑動條樣式**********************/ QSlider::groove:vertical {background-color: qlineargradient(spread:reflect, x1:0, y1:0.510682, x2:0.5, y2:0.517045,stop:0 rgba(168, 164, 168, 250), stop:1 rgba(232, 232, 232, 255));position: absolute; /* 設(shè)置定位：絕對位置距離小部件的左側(cè)和右側(cè) 4px。在小部件上設(shè)置邊距也應(yīng)該工作......*//*left: 4px;*/ /* 元素左外邊距邊界與其包含塊左邊界之間的偏移*//*right: 4px;*/width: 8px;border-radius: 4px; /* 設(shè)置滑動槽圓角*/ }QSlider::handle:vertical { /* 設(shè)置滑塊樣式*/border: 1px solid #999999;background-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.50565, fy:0.500409,stop:0 rgba(0, 0, 0, 255), stop:0.361582 rgba(0, 146, 146, 255),stop:0.649718 rgba(255, 255, 255, 255), stop:1 rgba(0, 177, 181, 255));height: 14px;margin: 0px -4px;border-radius: 7px; }/* 設(shè)置了add-page、sub-page樣式后，groove樣式就失效了*/ QSlider::add-page:vertical { /* 設(shè)置滑塊滑過區(qū)域樣式（下側(cè)）*/background-color: rgb(0, 170, 255);border-radius: 4px; }QSlider::sub-page:vertical { /* 設(shè)置滑塊未滑過區(qū)域樣式（上側(cè)）*/background-color: rgb(0, 0, 0);border-radius: 4px; }

2.18 QAbstractSpinBox

效果
說明：
- QAbstractSpinBox::up-button：綠色部分控件；
- QAbstractSpinBox::up-arrow：紅色實心矩形部分。
關(guān)鍵Qss樣式表
/********************QAbstractSpinBox樣式，適用于QDateTimeEdit、QTimeEdit、QDateEdit、QDoubleSpinBox、QSpinBox**********************/ QAbstractSpinBox {text-align:right; /* 標(biāo)題文本右對齊*/height: 30px; /* 統(tǒng)一設(shè)置高度*//*padding-right: 15px; */ /* 設(shè)置元素的右內(nèi)邊距，為箭頭騰出空間*/border: 2px solid red; /* 設(shè)置了邊框后才會顯示【加減圖標(biāo)】*/background-color: qlineargradient(spread:pad, x1:0, y1:0.482591, x2:1, y2:0.477273,stop:0.0113636 rgba(85, 170, 255, 255),stop:1 rgba(255, 255, 255, 255));selection-color: #000000; /* 設(shè)置鼠標(biāo)選擇文本的顏色*/selection-background-color: #55ff7f; /* 設(shè)置鼠標(biāo)選擇文本的背景色*/ }/* 增加按鍵樣式*/ QAbstractSpinBox::up-button {subcontrol-origin: border; /* 設(shè)置按鍵在盒子模型中的參考位置margin border padding content*/subcontrol-position: top right; /* 設(shè)置按鍵停靠位置右上角*/border: 1px solid grey; /* 設(shè)置按鍵邊框，用于區(qū)分*/ }QAbstractSpinBox::up-arrow {border-image: url(:/image/上.png); /* 設(shè)置增加按鍵圖標(biāo)*/ }/* 減少按鍵樣式*/ QAbstractSpinBox::down-button {subcontrol-origin: border;subcontrol-position: bottom right;border: 1px solid grey; }QAbstractSpinBox::down-arrow {border-image: url(:/image/下d.png); /* 設(shè)置減少按鍵圖標(biāo)*/ }/* 設(shè)置鼠標(biāo)進(jìn)入按鍵的樣式*/ QAbstractSpinBox::up-button:hover, QAbstractSpinBox::down-button:hover {background-color: rgba(0, 170, 255, 100); }/* 設(shè)置鼠標(biāo)點擊按鍵的樣式*/ QAbstractSpinBox::up-button:pressed, QAbstractSpinBox::down-button:pressed{background-color: rgba(0, 170, 255, 200); }QAbstractSpinBox::up-arrow:disabled, /* 禁用狀態(tài)*/ QAbstractSpinBox::down-arrow:disabled, QAbstractSpinBox::up-arrow:off, /* 值為最大值時處于關(guān)閉狀態(tài)*/ QAbstractSpinBox::down-arrow:off {background-color: rgb(210, 210, 210); }/* 設(shè)置使用加減圖標(biāo)的樣式*/ QAbstractSpinBox[buttonSymbols="1"]::up-button {subcontrol-origin: border;subcontrol-position: right;border: 1px solid grey; } QAbstractSpinBox[buttonSymbols="1"]::up-arrow {border-image: url(:/image/加.png); }QAbstractSpinBox[buttonSymbols="1"]::down-button {subcontrol-origin: border;subcontrol-position: left;border: 1px solid grey; } QAbstractSpinBox[buttonSymbols="1"]::down-arrow {border-image: url(:/image/減.png); }

2.19 QSplitter

效果
關(guān)鍵Qss樣式表
/********************QSplitter樣式**********************/ #groupBox_13 QWidget { /* 為widget設(shè)置邊框，方便觀看邊界*/border: 1px solid red; }QSplitter::handle {height: 12px; /* 設(shè)置分割滑塊高度*/ }/* 設(shè)置水平分離布局滑塊樣式*/ QSplitter::handle:horizontal {background-color: qlineargradient(spread:reflect, x1:0, y1:0.510682, x2:0.5, y2:0.517045,stop:0 rgba(0, 204, 213, 250),stop:1 rgba(232, 232, 232, 255)); }/* 設(shè)置豎直分離布局滑塊樣式*/ QSplitter::handle:vertical {background-color: qlineargradient(spread:reflect, x1:0.494, y1:0.0106818, x2:0.5, y2:0.517045,stop:0 rgba(0, 204, 213, 250),stop:1 rgba(232, 232, 232, 255)); }/* 設(shè)置水平分離布局滑塊按下樣式*/ QSplitter::handle:horizontal:pressed {background-color: qlineargradient(spread:reflect, x1:0, y1:0.527727, x2:0.5, y2:0.517045,stop:0 rgba(255, 0, 0, 250),stop:1 rgba(232, 232, 232, 255)); } /* 設(shè)置豎直分離布局滑塊按下樣式*/ QSplitter::handle:vertical:pressed {background-color: qlineargradient(spread:reflect, x1:0.494, y1:0.0106818, x2:0.5, y2:0.517045,stop:0 rgba(255, 0, 0, 250),stop:1 rgba(232, 232, 232, 255)); }

2.20 QStatusBar

效果
關(guān)鍵Qss樣式表
/********************QStatusBar狀態(tài)欄樣式**********************/ QStatusBar {background: brown; /* 設(shè)置狀態(tài)欄背景色*/color: white; /* 設(shè)置狀態(tài)欄文本顏色*/ }QStatusBar QWidget{ /* 設(shè)置狀態(tài)欄中包含的部件的樣式*/color: white; }QStatusBar::item { /* 設(shè)置狀態(tài)欄中插入項的樣式*/border: 2px solid white;border-radius: 3px; }

2.21 QTabWidget

效果
關(guān)鍵Qss樣式表
/********************QTabWidget樣式**********************/ QTabWidget::pane { /* tabwidget窗格樣式*/border: 2px solid #C2C7CB;position: absolute; /* 指定了元素的定位類型static、relative、fixed、absolute、sticky*/top: -1em; /* 上邊距向上偏移1em*/ }/* tabBar標(biāo)簽欄在頂部時，tabBar欄向左邊距15*/ QTabWidget::tab-bar:top { /* left: 15px;*/ /* 標(biāo)簽欄向右偏移15*/alignment: center; /* 標(biāo)簽欄居中對齊*/ }QTabBar::tab {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);border: 2px solid #C4C4C3;padding: 2px; /* 設(shè)置內(nèi)邊距填充*/ }/* tab選中或者鼠標(biāo)進(jìn)入的樣式*/ QTabBar::tab:selected, QTabBar::tab:hover {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #fafafa, stop: 0.4 #f4f4f4,stop: 0.5 #e7e7e7, stop: 1.0 #fafafa); }/* tabBar為橫向選中的樣式，在頂部*/ QTabBar::tab:top:selected{border-color: red;border-bottom-color: #C2C7CB; /* 底部邊框顏色與pane邊框顏色相同*/ } /* tabBar為橫向未選中的樣式，在頂部*/ QTabBar::tab:top:!selected {margin-top: 2px; /* 設(shè)置元素的上部邊距，設(shè)置在選中里不生效*/ }/* tabBar為橫向選中的樣式，在底部*/ QTabBar::tab:bottom:selected{border-color: red;border-top-color: #C2C7CB;margin-top: 2px; /* 設(shè)置元素的下邊距，設(shè)置在未選中里不生效（我也不知道為啥）*/ }/* tabBar為橫向的樣式，在頂部或者底部*/ QTabBar::tab:top, QTabBar::tab:bottom {min-width: 80px;height: 20px;border-top-left-radius: 22px; /* 通過設(shè)置左上角，右下角圓角得到特殊圖形*/border-bottom-right-radius: 22px; }/* tabBar為豎向的樣式，在左側(cè)或者右側(cè)*/ QTabBar::tab:right, QTabBar::tab:left {min-height: 80px;width: 20px; }/* tabBar為豎向選中的樣式，在左側(cè)*/ QTabBar::tab:left:selected{border-color: red;border-right-color: #C2C7CB; /* 右側(cè)邊框顏色與pane邊框顏色相同*/ }/* tabBar為豎向未選中的樣式，在左側(cè)*/ QTabBar::tab:left:!selected {margin-left: 2px; /* 設(shè)置元素的左邊距*/ }/* tabBar為豎向選中的樣式，在右部*/ QTabBar::tab:right:selected {border-color: red;border-left-color: #C2C7CB;margin-left: 2px; /* 設(shè)置元素的左邊距*/ }/* 設(shè)置第一個tab選項卡未選中樣式*/ QTabBar::tab:first:!selected {border-left-color: #00FF00;border-left-width: 3px; }/* 設(shè)置中間所有的tab選項卡未選中樣式*/ QTabBar::tab:middle:!selected {border-bottom-color: #00FF00;border-bottom-width: 3px; }/* 設(shè)置最后一個tab選項卡未選中樣式*/ QTabBar::tab:last:!selected {border-right-color: #00FF00;border-right-width: 3px; }/* 如果只有一個tab選項卡時的樣式*/ QTabBar::tab:only-one {background: #00FFFF; }/*QTabBar的撕裂指示器，當(dāng)tab標(biāo)簽過多時前面的tab標(biāo)簽顯示不下時出現(xiàn)*/ QTabBar::tear {background-color: qlineargradient(spread:pad, x1:0, y1:0.482591, x2:1, y2:0.477273,stop:0.0113636 rgba(85, 170, 255, 255),stop:1 rgba(255, 255, 255, 255));width: 20px; }/* QTabBar的滾動條，當(dāng)tab標(biāo)簽過多時出現(xiàn)，包含兩個調(diào)節(jié)but*/ QTabBar::scroller {width: 50px; /* 設(shè)置兩個but容器的寬度來調(diào)整but大小*/ }/* 滾動按鈕是工具按鈕*/ QTabBar QToolButton {border: 2px solid #00FFFF;min-width: 0px; /* 因為在前面全局QToolButton最小寬度設(shè)置為80，這里需要還原*/min-height: 0px;margin-right: 2px; }/* 設(shè)置QTabWidget右上角右but樣式*/ QTabBar QToolButton::right-arrow {image: url(:/image/右.png); }/* 設(shè)置QTabWidget右上角左but樣式*/ QTabBar QToolButton::left-arrow {image: url(:/image/左.png); }/* 設(shè)置tab標(biāo)簽右側(cè)關(guān)閉but樣式*/ QTabBar::close-button {image: url(:/image/close.png);subcontrol-position: right; /* 這里有一個bug，只能設(shè)置right，否則but就會實現(xiàn)（不知道是不是我使用的問題還是就有這個bug）*/border: 1px solid red; }/* 鼠標(biāo)進(jìn)入樣式*/ QTabBar::close-button:hover {background-color: rgba(85, 170, 255, 150); }/* 鼠標(biāo)按下樣式*/ QTabBar::close-button:pressed {background-color: rgba(255, 0, 0, 150); }

2.22 QListView

效果
設(shè)置說明
- void setFlow(QListView::Flow flow)：設(shè)置橫向排列還是豎向排列；
- void setViewMode(QListView::ViewMode mode)：設(shè)置ListView視圖模式，只有設(shè)置了iconMode后才會顯示矩形；
- QAbstractItemView::alternatingRowColors ()：是否使用交替顏色繪制背景。
關(guān)鍵Qss樣式表
/********************QListView樣式，用于QListView、QListWidget、QUndoView**********************/ QListView {alternate-background-color: rgba(0, 170, 255, 50); /* 交替背景色, 使用的前提是開啟了隔行變色設(shè)置 setAlternatingRowColors(true);*/background-color: rgb(240, 240, 240);show-decoration-selected: 0; /* 0：選擇文本 1：選擇行*/ }/* 當(dāng)QAbstractItemView::alternatingRowColors () 設(shè)置為 true時，為繪制QAbstractItemView的行時的每個備用行設(shè)置此狀態(tài)。如果設(shè)置背景色則效果和alternate-background-color相同*/ QListView::item:alternate {border-bottom: 2px solid #00FFFF; /* 設(shè)置交替行的下邊框樣式*/ }QListView::item:selected {border: 2px solid red; /* 設(shè)置選中行的邊框*/ }QListView::item:selected:!active { /* 設(shè)置選中行失去焦點后的樣式*/ background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #ABAFE5, stop: 1 #8588B2); }QListView::item:selected:active { /* 控件獲得焦點時選中行的樣式*/background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #6a6ea9, stop: 1 #888dd9); }QListView::item:hover { /* 鼠標(biāo)進(jìn)入行的樣式*/background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #FFABFE, stop: 1 #DCDEF1); }/* 設(shè)置屬性ViewMode為IconMode，屬性Flow為LeftToRight時的樣式*/ QListView[flow="0"][viewMode="1"]::item {height: 50px;width: 50px; }

2.23 QHeaderView、QTableView、QTableWidget

效果
編號說明
QTableView QTableCornerButton::section
QHeaderView::down-arrow、QHeaderView::up-arrow
QTableView::indicator
關(guān)鍵Qss樣式表
/********************QHeaderView標(biāo)題行樣式**********************/ QHeaderView::section { /*標(biāo)題行樣式*/background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #FFABFE, stop: 1 #DCDEF1);color: white; /* 設(shè)置標(biāo)題行字體顏色*/padding-left: 10px; /* 設(shè)置元素左內(nèi)邊距*/border: 1px solid #6c6c6c; }QHeaderView::section:checked { /* 選中的單元格的標(biāo)題樣式，在QTableView有效*/background-color: red; }/* 標(biāo)題欄排序指示器樣式，需要設(shè)置setSortIndicatorShown(true)才生效*/ QHeaderView::down-arrow { border-image: url(:/image/下d.png); /* 設(shè)置向下按鍵圖標(biāo)*/width: 15px; /* 默認(rèn)圖標(biāo)很小，需要設(shè)置大一點才好觀察*/height: 15px; }QHeaderView::up-arrow { border-image: url(:/image/上.png); /* 設(shè)置向上按鍵圖標(biāo)*/width: 15px;height: 15px; }/********************QTableView、QTableWidget樣式**********************/ QTableView {background-color: #f0fffc;selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0.5, y2: 0.5,stop: 0 #00aaff, stop: 1 white); /* 選中單元格的背景*/}/* 表格左上角的按鍵樣式*/ QTableView QTableCornerButton::section {background: #ffff7f;border: 2px outset red; }/* 單元格中復(fù)選框未選中的樣式*/ QTableView::indicator:unchecked {background-color: #ff55ff; }

2.24 QToolBar

效果
關(guān)鍵Qss樣式表
/********************QToolBar樣式**********************/ QToolBar {background-color: qlineargradient(spread:pad, x1:0, y1:0.54, x2:0.994318, y2:0.517045,stop:0.0113636 #1f4037, stop:0.642045 #99f2c8);spacing: 20px; /* 工具欄中插入項之間的間距*/ }/* 工具欄可用于鼠標(biāo)移動的句柄樣式*/ QToolBar::handle {background: red; }

2.25 QToolBox

效果
關(guān)鍵Qss樣式表
/********************QToolBox樣式**********************/ QToolBox {background: red; /* 設(shè)置QToolBox底層背景*/ }/* 由于QToolBox底層背景上還有一層QWidget，所以直接設(shè)置背景色沒有效果，需要再設(shè)置QWidget背景*/ QToolBox QWidget {background-color: rgb(0, 225, 165); }QToolBox::tab {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);border-radius: 5px;color: black; }QToolBox::tab:selected {font: italic; }

2.26 QToolTip

效果
關(guān)鍵Qss樣式表
/********************QToolTip樣式**********************/ QToolTip {border: 2px solid darkgray; /* 設(shè)置邊框*/padding: 5px; /* 設(shè)置上下左右內(nèi)填充*/border-radius: 3px; /* 圓角*/opacity: 150; /* 不透明度，范圍[0-255]，只支持QToolTip*/ }

2.27 QDial

效果
關(guān)鍵Qss樣式表
/********************QDial樣式，很多樣式都無效**********************/ QDial {background-color: rgb(85, 255, 255); /* 不支持漸變*/ }QDial:!enabled{background-color: rgb(0, 0, 0); /* 不可用*/ }

2.28 QCalendarWidget

效果
編號說明
#qt_calendar_prevmonth：日歷中左箭頭按鍵樣式
#qt_calendar_navigationbar：日歷控件頭部導(dǎo)航欄樣式
#qt_calendar_monthbutton：月份按鍵樣式
#qt_calendar_yearbutton：年按鍵樣式
#qt_calendar_nextmonth：日歷中右箭頭按鍵樣式
#qt_calendar_calendarview：顯示日期部分是一個表格控件(QTableView)，包含7、8
關(guān)鍵Qss樣式表
/********************qcalendarwidget樣式**********************/ /* 日歷控件頭部導(dǎo)航欄樣式*/ #qt_calendar_navigationbar {background-color: qlineargradient(spread:pad, x1:0.489, y1:0.0456818, x2:0.477, y2:1, stop:0.0113636 rgba(0, 0, 0, 255), stop:0.954545 rgba(168, 168, 170, 255));height: 50px; }QCalendarWidget QToolButton {border: 2px solid #00ffff; /* 畫出日歷中所有QToolButton的邊框*/ }/* 日歷中左箭頭按鍵樣式*/ QCalendarWidget #qt_calendar_prevmonth {background: #d6d6a0; } /* 日歷中右箭頭按鍵樣式*/ QCalendarWidget #qt_calendar_nextmonth {background: #aa55ff; }/* 月份按鍵樣式*/ QCalendarWidget #qt_calendar_monthbutton {background: #aaff00; }/* 年按鍵樣式*/ QCalendarWidget #qt_calendar_yearbutton {background: #55aa7f; }/* 顯示日期部分是一個表格控件(QTableView)*/ #qt_calendar_calendarview {background: black;color: white;selection-color: red; /* 選擇日期單元格字體顏色*/alternate-background-color: rgb(128, 128, 128); /* 表頭樣式（表頭部分不是QHeaderView，所以使用QHeaderView來設(shè)置樣式是無效的*/selection-background-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.50565, fy:0.500409, /* 選中日期單元格背景顏色*/stop:0 rgba(0, 0, 0, 255), stop:0.361582 rgba(0, 146, 146, 255),stop:0.649718 rgba(255, 255, 255, 255), stop:1 rgba(0, 177, 181, 255)); }

2.29 QTreeView、QTreeWidget

效果
編號說明：
QTreeView::item:selected:active：鼠標(biāo)選中行有焦點的樣式
QTreeView::item:selected:!active：鼠標(biāo)選中行失去焦點的樣式
QTreeView::branch:has-siblings:!adjoins-item：有同級，與item不相鄰
QTreeView::branch:open:has-children:has-siblings：有同級、有子項、打開的節(jié)點
QTreeView::branch:closed:has-children:has-siblings：有同級、有子項，并且關(guān)閉的節(jié)點
QTreeView::branch:has-siblings:adjoins-item：有同級，與item相鄰
QTreeView::branch:!has-children:!has-siblings:adjoins-item：沒有同級、沒有子項、與item相鄰
QTreeView::branch:has-children:!has-siblings:closed：有子項、沒有同級、并且關(guān)閉的節(jié)點
QTreeView::branch:open:has-children:!has-siblings：沒有同級、有子項、打開的節(jié)點
QTreeView::branch：最底層空白位置
關(guān)鍵Qss樣式表
/********************QTreeView樣式**********************/ QTreeView {background-color: rgba(85, 255, 127, 100); /* 整體背景色*/alternate-background-color: rgba(255, 255, 0, 100); /* 交替行背景色，需要當(dāng)QAbstractItemView::alternatingRowColors () 設(shè)置為 true才生效*/ }QTreeView::item {border: 1px solid red;border-top-color: transparent; /* 設(shè)置上邊框透明*/border-bottom-color: transparent; }/* 鼠標(biāo)進(jìn)入樣式*/ QTreeView::item:hover {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #e7effd, stop: 1 #cbdaf1);border: 1px solid #bfcde4; }/* 鼠標(biāo)選中某行后的樣式*/ QTreeView::item:selected {border: 2px solid #FF7dbc; }/* 鼠標(biāo)選中行有焦點的樣式*/ QTreeView::item:selected:active{background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6ea1f1, stop: 1 #567dbc); }/* 鼠標(biāo)選中行失去焦點的樣式*/ QTreeView::item:selected:!active {background: #aaffff; }/*分支指示器樣式（左側(cè)小箭頭部分）*/ QTreeView::branch {background: palette(base); }/* has-siblings：QTreeView中具有同級的項（當(dāng)前節(jié)點下方同級） has-children：QTreeView中具有子項的項 adjoins-item：當(dāng)QTreeView的::branch與某個item相鄰時，將設(shè)置此狀態(tài) */ /* 有同級，與item不相鄰*/ QTreeView::branch:has-siblings:!adjoins-item {background: cyan; } /* 有同級，與item相鄰*/ QTreeView::branch:has-siblings:adjoins-item {background: red; }/*沒有同級、沒有子項、與item相鄰*/ QTreeView::branch:!has-children:!has-siblings:adjoins-item {background: blue; } /*有同級、有子項，并且關(guān)閉的節(jié)點*/ QTreeView::branch:closed:has-children:has-siblings {background: pink; } /*有子項、沒有同級、并且關(guān)閉的節(jié)點*/ QTreeView::branch:has-children:!has-siblings:closed {background: gray; } /* 有同級、有子項、打開的節(jié)點*/ QTreeView::branch:open:has-children:has-siblings {background: magenta; } /* 沒有同級、有子項、打開的節(jié)點*/ QTreeView::branch:open:has-children:!has-siblings {background: green; }
3、源代碼📌
- gitee
- github
  🎹🎹🎹🎹🎹🎹🎹🎹🎹🎹🎹

總結(jié)

以上是生活随笔為你收集整理的超详细的QSS样式表入门Demo的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：金蝶K3WISE15.1开启WEBAPI
下一篇： C#程序员整理的Unity 3D笔记（十