文章目錄

• 主要流程：
• • 導入QSS文件：
  • • 1. 添加Qt Resource File文件，輸入名稱
    • 2. 在工程文件目錄下先建一個".txt"文件，重新命名后綴為".qss"
    • 3. 右鍵添加現有文件qss.qss
    • 4. 完成添加
    • 5. 將 qss樣式應用到整個工程
• QSS編寫語法
• • 常見問題
  • • 1. 繼承于Widget的主界面背景圖無法顯示
    • 2. 大多數無效問題
    • 3. 幾個簡單的例子
    • • QPushButton:
      • QLineEdit：
      • QListWidget
      • QListView
      • QProgressBar
      • QScrollBar
      • QTableView
      • QComboBox

?

主要流程：

導入QSS文件：

1. 添加Qt Resource File文件，輸入名稱

2. 在工程文件目錄下先建一個".txt"文件，重新命名后綴為".qss"

3. 右鍵添加現有文件qss.qss

4. 完成添加

5. 將 qss樣式應用到整個工程

QFile file(":/qss/mainQss.qss"); file.open(QIODevice::ReadOnly); setStyleSheet(file.readAll());

QSS編寫語法

常見問題

1. 繼承于Widget的主界面背景圖無法顯示

需要添加一行代碼

setAttribute(Qt::WA_StyledBackground);

再在qss文件中添加以下代碼即可，#后跟隨的是你的widget名稱，替換成自己的即可

QWidget#widget{background-image: url(:/img/img/darkbule.png); }

2. 大多數無效問題

由于Qss文件沒有自動查錯的功能，所以常常是輸入的句式有問題，導致的無效。
比如以下代碼是無效的：

#前后不能有空格：

QWidget # widget{background-image: url(:/img/img/darkbule.png); }

所以這個時候去官方文檔查看正確的語法即可。
官方文檔：https://doc.qt.io/qt-5/stylesheet-reference.html

3. 幾個簡單的例子

QPushButton:

/*按鈕正常態*/ QPushButton#btn_load,#btn_configure{color: rgb(255, 255, 255);font: 10pt "黑體";border: none;background-color: transparent;border-image: url(:/images/images/按鈕.png); }/*按鈕懸浮態*/ QPushButton#btn_load:hover,#btn_configure:hover{color: rgb(255, 255, 255);font: 10pt "黑體";border: none;background-color: transparent;border-image: url(:/images/images/按鈕1.png); }/*按鈕禁用態*/ QPushButton#btn_load:disabled{color: rgb(145, 145, 145);font: 10pt "黑體";border: none;background-color: transparent;border-image: url(:/images/images/按鈕4.png); }/*按鈕點擊態*/ QPushButton:pressed{background-color:rgba(0, 0, 127, 50); }/*按鈕已被選態*/ QPushButton:checked{background:rgba(0, 170, 255, 50); }

QLineEdit：

/*輸入框：常態*/ QLineEdit {border: 1px solid #A0A0A0; /* 邊框寬度為1px，顏色為#A0A0A0 */border-radius: 3px; /* 邊框圓角 */padding-left: 5px; /* 文本距離左邊界有5px */background-color: #F2F2F2; /* 背景顏色 */color: #1d92dc; /* 文本顏色 */selection-background-color: #A0A0A0; /* 選中文本的背景顏色 */selection-color: #F2F2F2; /* 選中文本的顏色 */font-family: "Microsoft YaHei"; /* 文本字體族 */font-size: 10pt; /* 文本字體大小 */ }/* 鼠標懸浮在QLineEdit時的狀態 */ QLineEdit:hover {border: 1px solid #298DFF;border-radius: 3px;background-color: #F2F2F2;color: #298DFF;selection-background-color: #298DFF;selection-color: #F2F2F2; }/* QLineEdit在禁用時的狀態 */ QLineEdit:disabled {border: 1px solid #CDCDCD;background-color: #CDCDCD;color: #B4B4B4; }

QListWidget

QListWidget#listWidget{border: none;background-color: transparent;border-width: 1px 1px 1px 1px;border-style: solid;border-color: rgb(18, 76, 224); }/*子控件item被選態*/ QListWidget::item:selected{ background: rgba(38, 174, 227, 50); }

QListView

QListView::item{border: 1px solid #1d92dc; }QListView::item::hover{background: rgba(29, 164, 220, 50); }QListView::item:selected:!active {background: rgba(29, 164, 220, 50); }QListView::item:selected:active {background: rgba(29, 164, 220, 100); }

QProgressBar

/*進度條*/ QProgressBar{color: rgb(255, 255, 255);font: 10pt "黑體";border:none; /*無邊框*/background:rgb(54,54,54);border-radius:5px;text-align:center; /*文本的位置*/ }/*進度條：運行態*/ QProgressBar::chunk {background-color:rgb(38, 174, 227);border-radius:4px;background-color: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #6bbaf3, stop: 1.0 #0696ff); /* 進度條塊漸變背景顏色 */ }

QScrollBar

/*豎直滾動條*/ QScrollBar:vertical{/*background: white;*/width: 8px;padding-top:18px;padding-bottom:18px;border-image: url(:/images/images/scroll_subpage.png) 0 4 0 4 repeat repeat; } /*豎直滾動條子控件：把手*/ QScrollBar::handle:vertical{min-height: 40px;border-width: 0px 4px 0px 4px;border-image: url(:/images/images/scroll_handle.png) 0 4 0 4 repeat repeat; } /*豎直滾動條子控件：滾動條上面和下面區域*/ QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical{width: 8px;border-width: 0px 4px 0px 4px;border-image: url(:/images/images/scroll_subpage.png) 0 4 0 4 repeat repeat; }

QTableView

QTableView{color: rgb(225, 225, 255); /*字體顏色*/border: 1px solid #1d92dc; /*邊框顏色*/gridline-color:#1d92dc; /*grid線顏色*/background-color: transparent; /*背景顏色*/text-align:center; /*對齊方式*/ }/*TableView表頭*/ QHeaderView::section{ background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 rgba(5, 88, 164, 255), stop:1 rgba(5, 54, 112, 255));color: rgb(29, 213, 220);padding-left: 4px;border: 1px solid #1d92dc;min-height: 30px; }

QComboBox

/*下拉框*/ QComboBox{font: 12pt "黑體";border-color: white;color: #15618c; }/*當下拉框打開時 */ QComboBox QAbstractItemView {font: 12pt "黑體";color: #15618c; }QComboBox QAbstractItemView::item {height: 20px; }

總結

以上是生活随笔為你收集整理的【QT】QSS使用总结的全部內容，希望文章能夠幫你解決所遇到的問題。

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