前言

QtWidgets寫界面，經常需要用qss來寫樣式風格。qss不難懂，也不難學，而且也不用特意去學，只需要復制粘貼(*￣︶￣)。

所以我在此整理一下，為了下次能夠更快的設置好風格，我真是個熱愛工作的好同志。

常用控件樣式風格設置

各類按鈕（QPushButton為例）

QPushButton#searchButton{color:#ffffff;background: #0275FF;border-radius: 3px; } QPushButton#searchButton:hover,QPushButton#searchButton:pressed{background: rgb(70,98,217); }

QDateTimeEdit

QDateTimeEdit{border:none;border-radius:10px;background-color:rgba(8, 55, 132, 1);color:white;font-size:18px;padding:10px 40px 10px 40px; } QDateTimeEdit::up-arrow{image: url(:/res/dlg/up-button.png);}QDateTimeEdit::down-arrow {image: url(:/res/dlg/dropArrow.png);}

QGroupBox

QGroupBox{background:rgba(23, 70, 141, 200);border:1px solid black;border-radius:10px;margin-top:20px; } QGroupBox::title {color:#05edfe;subcontrol-origin: margin;subcontrol-position: top left;padding-top: 5;padding-left: 20; }

?QComboBox下拉框

QList<QComboBox*> comboxList=this->findChildren<QComboBox*>();foreach (QComboBox* box, comboxList) {box->setView(new QListView());} QComboBox:!enabled{border: 1px solid #CCCCCC;color:#B3B3B3; } QComboBox:enabled{ border: 1px solid #999999;border-radius: 3px;padding: 1px 5px 1px 10px;color:#666666;font-size:9pt; } QComboBox::drop-down {subcontrol-origin: padding;subcontrol-position: top right;padding-right:10px;width:20px; border:none; } QComboBox::down-arrow {image: url(:/res/down.png); } QComboBox QAbstractItemView{background:rgba(255,255,255,1);border:1px solid rgba(228,228,228,1);border-radius:0px 0px 5px 5px;font-size:14px;outline: 0px; }

QMenu的風格設置

QMenu{background:rgba(255,255,255,1);border:none; } QMenu::item{padding:11px 32px;color:rgba(51,51,51,1);font-size:12px; } QMenu::item:hover{background-color:#409CE1; } QMenu::item:selected{background-color:#409CE1; }

?QSplitter 布局分隔

QSplitter::handle {image:url(:/images/444.bmp); }QSplitter::handle:horizontal {width:5px; }QSplitter::handle:vertical {width:15px; }QSplitter::handle:pressed {background-color:#00FFFD; }

QScrollBar滾動條?

QScrollBar:vertical {border: none;background: #00000000;width: 20px;margin: 5px 0 5px 0;}QScrollBar::handle:vertical {max-width:16px;margin-left:5px;margin-right:5px;background:#3e74f7; border-radius:5px;}QScrollBar::add-line:vertical {border:none;background: #00000000;height: 1px;subcontrol-position: bottom;subcontrol-origin: margin;}QScrollBar::sub-line:vertical {border:none;background: #00000000;height: 1px;subcontrol-position: top;subcontrol-origin: margin;}QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {width: 0px;height: 0px;}QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {background: none;}QScrollBar:horizontal {border: none;background: #00000000;height: 20px;margin: 0px 5px 0px 5px;}QScrollBar::handle:horizontal {max-height:16px;margin-top:5px;margin-bottom:5px;background:#3e74f7; border-radius:5px;}QScrollBar::add-line:horizontal {border:none;background: #00000000;width: 1px;subcontrol-position: right;subcontrol-origin: margin;}QScrollBar::sub-line:horizontal {border:none;background: #00000000;width: 1px;subcontrol-position: left;subcontrol-origin: margin;}QScrollBar::up-arrow:horizontal, QScrollBar::down-arrow:horizontal {width: 0px;height: 0px;}QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {background: none;}

QTableView表格?

alternate-background-color來設置交替顏色

outline：設置內虛線

QTableView{border:none;outline:0px;background-color:rgb(255,255,255);alternate-background-color: #F6FAFF; } QTableView::item{color:#666666;font-size:16px;border-bottom: 1px solid rgba(0,0,0,0.2); } QTableView::item::selected{background:rgba(120,148,255,0.2); } QTableView QHeaderView::section, QTableView QHeaderView{font-size:18px;border:none;color:#ffffff;background:#7894FF;height:88px; }

QTreeView、QTreeWidget樹形結構

樹里面的脈絡，我覺得用qss設置出來的不太好看，而且各個部分的圖也不太好做，還不如虛線，這里提供Windows虛線顯示的方法：

ui->treeWidget->setStyle(QStyleFactory::create("windows")); QTreeView{background:transparent;border:none;font-size:14pt;font-weight:bold; } QTreeView::item{border:none;color:#ffffff; } QTreeView::item:selected{color:#05edfe;} QTreeView QHeaderView::section, QTreeView QHeaderView{background:transparent;font-size:12pt;color:#ffffff;height:41px; }QTreeView::branch:has-children:!has-siblings:closed, QTreeView::branch:closed:has-children:has-siblings {border-image: none;image: url(:/res2/ZJGL/branch-closed.png); /* > */ }QTreeView::branch:open:has-children:!has-siblings, QTreeView::branch:open:has-children:has-siblings {border-image: none;image:url(:/res2/ZJGL/branch-open.png); /* V */ } QTreeView::indicator{width:25px;height:25px; } QTreeView::indicator:checked {image: url(:/res/uncheck.png); } QTreeView::indicator:unchecked {image: url(:/res/checked.png); }

QLineEdit、編輯框?

QLineEdit:enabled,QTextEdit:enabled{ border: 1px solid #999999;border-radius: 3px;color:#666666;font-size:9pt; } QLineEdit:!enabled,QTextEdit:!enabled{border: 1px solid #CCCCCC;color:#B3B3B3; }

QCheckBox多選?

QCheckBox{color:#05edfe;font-size:28px;font-weight:bold; } QCheckBox::indicator {width: 52px;height: 52px; } QCheckBox::indicator:unchecked {image: url(:/res2/dlg/uncheck.png); } QCheckBox::indicator:checked {image: url(:/res2/dlg/checked.png); }

QTabWidget 頁簽

QTabBar::tab{border: 2px solid rgba(8, 42, 96, 127);background-color:rgba(78,87,105,127);width:160px; height:60px;font-size:22px;color:#05edfe;font-weight:bold; } QTabBar::tab:selected {background-color:rgba(6, 13, 85, 127) ;} QTabWidget::tab-bar {left:1px; top:1px; } QTabWidget::pane {background:transparent;border:none; }

QProgressBar進度條

QProgressBar {border: 1px solid #02246C;border-radius: 16px;color:#ffffff;font-size:32px;font-weight:bold;background-color:#010A20; }QProgressBar::chunk {background-color: #02C3F7;border-radius: 16px; }

自定義屬性?

舉個栗子：按鈕設置了自定義屬性'isCurrent',通過此屬性來辨別是否為當前按下的按鈕。

ui->clientButton->setProperty("isCurrent",true);ui->orderButton->setProperty("isCurrent",false); QPushButton#clientButton[isCurrent="true"]{border:none;border-image: url(:/res/rect.png);color:#0275FF;font: 20px "微軟雅黑"; } QPushButton#clientButton[isCurrent="false"]{border:none;color:#0275FF;font: 20px "微軟雅黑"; }

但是這個屬性變了，風格并沒有變，需要重新加載一遍qss（目前我不知道有啥簡便的方法）

void SalesWidget::on_clientButton_clicked() {ui->stackedWidget->setCurrentIndex(0);ui->clientButton->setProperty("isCurrent",true);ui->orderButton->setProperty("isCurrent",false);QString sheetStr=ui->clientButton->styleSheet();ui->clientButton->setStyleSheet("");ui->clientButton->setStyleSheet(sheetStr);sheetStr=ui->orderButton->styleSheet();ui->orderButton->setStyleSheet("");ui->orderButton->setStyleSheet(sheetStr); }

結束語

應該就這些了，后續再添加~

總結

以上是生活随笔為你收集整理的常用的控件样式风格设置(qss)——QtWidgets的全部內容，希望文章能夠幫你解決所遇到的問題。

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