QT中QSS樣式表的詳細介紹

轉自個人博客

**Qt樣式表(Qt Style Sheets,簡稱QSS)**是一種類似于HTML中的CSS(層疊樣式表)的機制,用于自定義Qt應用程序的外觀。通過QSS,開發者可以輕松地修改控件的外觀,而無需更改底層代碼邏輯。這種方式不僅提高了開發效率,還增強了界面設計的靈活性。


1. QSS概要

1.1 QSS作用

QSS允許開發者通過聲明式的方式設置控件的外觀屬性,例如顏色、字體、邊框、間距等。與直接在代碼中設置樣式相比,QSS具有以下優點:

  • 分離樣式與邏輯:樣式和功能代碼分離,便于維護。
  • 動態切換主題:可以通過加載不同的QSS文件實現主題切換。
  • 跨平臺一致性:確保不同平臺上的控件外觀一致。

1.2 QSS與CSS的關系

QSS借鑒了CSS的設計思想,語法上非常相似。熟悉CSS的開發者可以快速上手QSS。然而,QSS是專門為Qt控件設計的,因此支持的屬性和選擇器可能與CSS有所不同。

1.3 QSS基本語法

QSS的基本語法如下:

選擇器 {屬性:;
}
  • 選擇器:用于指定要應用樣式的控件或控件組,支持多種類型的選擇器來具體選擇應用樣式的對象。
  • 屬性:控件的外觀屬性。
  • :屬性的具體取值,不同的屬性可能需要使用不同的值。
QPushButton {color: white;background-color: blue;border: 1px solid black;
}

1.4 QSS在QT中的使用

  1. 可以在Qt Designer中直接鍵入樣式表

  2. 在Qt中對指定控件使用setStyleSheet(樣式表字符串)方法設置。

    • 參數是字符串類型,引號內使用QSS語法,如果多行書寫,也要記得將每一行套用雙引號來轉化成一個字符串。
    • 樣式表是默認遞歸套用到子控件的,如果只想套用到指定的控件,就需要細分選擇選擇器。
    • 對一個控件不支持重復設置樣式表,只有最后一個設置的樣式表生效。但可以分別對父控件和子控件設置不同樣式表,默認子控件樣式在父控件之上生效。
    • 因為這種方法是直接對控件設置樣式表,所以也支持省略選擇器,以自動套用當前控件類型。
    // 對整個控件如下應用樣式表會套用到所有子控件QPushButton上
    auto myWidget = new QWidget();
    myWidget->setStyleSheet("QPushButton { background-color: yellow }"); 
    // 多行書寫需要每一行使用雙引號來合并成一個字符串
    myWidget->setStyleSheet("QWidget { background-color: #3a3a3a }""QPushButton { background-color: yellow }");// 也可以直接對控件設置樣式
    auto myButton = new QPushButton();
    myButton->setStyleSheet("background-color: yellow");

2. QSS選擇器

2.1 選擇器類型

QSS支持多種選擇器,常用的包括:

  1. 類型選擇器:根據控件類型應用樣式。具體支持的控件類型見2.2。

    QPushButton {color: red;
    }
    
  2. 類選擇器:根據控件的objectNameclass屬性應用樣式,使用**#**來指定控件名稱。

    可以先使用控件的getObjectName()方法獲取控件名稱,或者使用setObjectName(QString name)方法來指定控件名稱

    QPushButton#myButton { /* 允許省略QPushButton */background-color: green;
    }
    
    // 設置、查看控件名稱
    auto myButton = new QPushButton();
    myWidget->setObjectName("myButton");
    myWidget->getObjectName(); // 返回"myButton"
    
  3. 子控件選擇器:針對復合控件的子部件應用樣式,使用**::**來指定子控件。

    QComboBox::drop-down { /* 下拉按鈕 */image: url(dropdown.png); /* 自定義箭頭圖標 */
    }
    
  4. 狀態選擇器:根據控件的狀態(如hoverpressed)應用樣式,使用**:**來指定控件狀態。

    QPushButton:hover {background-color: yellow;
    }
    

2.2 選擇器控件列表

控件類型說明子部件偽狀態
QWidget所有控件的基類,支持通用樣式屬性(如背景顏色、邊框等)。
QAbstractScrollArea滾動區域的抽象基類,支持滾動條樣式。::corner(滾動條交匯處的角落區域),::viewport(滾動區域的內容視圖)
QDialog對話框的基類,支持對話框窗口和子控件的樣式。
QAbstractButton抽象按鈕基類,支持按鈕樣式(如文本、圖標、背景等)。:hover(鼠標懸停時),:pressed(鼠標按下時),:checked(按鈕被選中時),:unchecked(按鈕未被選中時),:disabled(按鈕被禁用時)
QPushButton標準按鈕控件,支持按鈕樣式。:hover(鼠標懸停時),:pressed(鼠標按下時),:checked(按鈕被選中時),:unchecked(按鈕未被選中時),:disabled(按鈕被禁用時),:default(默認按鈕),:flat(扁平化按鈕)
QRadioButton單選按鈕控件,支持單選按鈕樣式。:hover(鼠標懸停時),:pressed(鼠標按下時),:checked(按鈕被選中時),:unchecked(按鈕未被選中時),:disabled(按鈕被禁用時)
QCheckBox復選框控件,支持復選框樣式。:hover(鼠標懸停時),:pressed(鼠標按下時),:checked(按鈕被選中時),:unchecked(按鈕未被選中時),:indeterminate(不確定狀態),:disabled(按鈕被禁用時)
QComboBox下拉框控件,支持下拉按鈕、箭頭、列表項等子控件樣式。::drop-down(下拉按鈕),::down-arrow(下拉箭頭),::item(下拉列表中的項),::indicator(選中指示器):hover(鼠標懸停時),:pressed(鼠標按下時),:disabled(控件被禁用時),:on(下拉框打開時),:off(下拉框關閉時)
QScrollBar滾動條控件,支持滑塊、增加/減少按鈕等子控件樣式。::handle(滑塊),::add-line(增加按鈕),::sub-line(減少按鈕),::add-page(滑塊上方的背景區域),::sub-page(滑塊下方的背景區域):hover(鼠標懸停時),:pressed(鼠標按下時),:disabled(滾動條被禁用時)
QSlider滑塊控件,支持滑塊手柄樣式。::groove(滑槽),::handle(滑塊手柄),::add-page(滑塊上方的背景區域),::sub-page(滑塊下方的背景區域):hover(鼠標懸停時),:pressed(鼠標按下時),:disabled(滑塊被禁用時)
QProgressBar進度條控件,支持進度塊樣式。::chunk(進度塊):hover(鼠標懸停時),:disabled(進度條被禁用時)
QTabWidget標簽頁控件,支持標簽欄、標簽頁等子控件樣式。::pane(標簽頁的內容區域),::tab-bar(標簽欄):hover(鼠標懸停時),:disabled(控件被禁用時)
QTabBar標簽欄控件,支持標簽頁樣式。::tab(標簽頁),::close-button(關閉按鈕),::tear(拖拽分離的標簽),::scroller(滾動按鈕):hover(鼠標懸停時),:selected(標簽頁被選中時),:disabled(標簽頁被禁用時)
QHeaderView表頭控件,支持表格或樹形視圖的表頭樣式。::section(表頭單元格):hover(鼠標懸停時),:pressed(鼠標按下時),:disabled(表頭被禁用時)
QMenu菜單控件,支持菜單項、分隔符等樣式。::item(菜單項),::separator(分隔符),::indicator(選中指示器),::right-arrow(右箭頭),::left-arrow(左箭頭):hover(鼠標懸停時),:pressed(鼠標按下時),:disabled(菜單項被禁用時),:checked(菜單項被選中時),:unchecked(菜單項未被選中時)
QMenuBar菜單欄控件,支持菜單欄項樣式。::item(菜單欄項):hover(鼠標懸停時),:pressed(鼠標按下時),:disabled(菜單欄項被禁用時)
QToolBar工具欄控件,支持工具欄按鈕、分隔符等樣式。::separator(分隔符),::handle(拖動手柄):hover(鼠標懸停時),:pressed(鼠標按下時),:disabled(工具欄被禁用時)
QDockWidget停靠窗口控件,支持標題欄、關閉按鈕等樣式。::title(標題欄),::close-button(關閉按鈕),::float-button(浮動按鈕):hover(鼠標懸停時),:pressed(鼠標按下時),:disabled(停靠窗口被禁用時)
QStatusBar狀態欄控件,支持狀態欄消息樣式。
QMainWindow主窗口控件,支持中央部件、工具欄、狀態欄等樣式。
QLineEdit單行文本輸入框控件,支持文本、占位符、邊框等樣式。::clear-button(清除按鈕),::up-button(向上按鈕),::down-button(向下按鈕):hover(鼠標懸停時),:pressed(鼠標按下時),:disabled(輸入框被禁用時),:read-only(只讀模式)
QTextEdit多行文本編輯框控件,支持文本、滾動條等樣式。::corner(滾動條交匯處的角落區域),::viewport(滾動區域的內容視圖):hover(鼠標懸停時),:disabled(文本編輯框被禁用時)
QPlainTextEdit純文本編輯框控件,支持文本、滾動條等樣式。::corner(滾動條交匯處的角落區域),::viewport(滾動區域的內容視圖):hover(鼠標懸停時),:disabled(純文本編輯框被禁用時)
QSpinBox數值輸入框控件,支持上下箭頭按鈕、文本等樣式。::up-button(向上按鈕),::down-button(向下按鈕),::up-arrow(向上箭頭),::down-arrow(向下箭頭):hover(鼠標懸停時),:pressed(鼠標按下時),:disabled(數值輸入框被禁用時)
QDoubleSpinBox雙精度數值輸入框控件,支持上下箭頭按鈕、文本等樣式。::up-button(向上按鈕),::down-button(向下按鈕),::up-arrow(向上箭頭),::down-arrow(向下箭頭):hover(鼠標懸停時),:pressed(鼠標按下時),:disabled(雙精度數值輸入框被禁用時)
QDateTimeEdit日期時間輸入框控件,支持上下箭頭按鈕、文本等樣式。::up-button(向上按鈕),::down-button(向下按鈕),::up-arrow(向上箭頭),::down-arrow(向下箭頭):hover(鼠標懸停時),:pressed(鼠標按下時),:disabled(日期時間輸入框被禁用時)
QAbstractItemView抽象項視圖基類,支持表格、列表、樹形視圖的樣式。::item(項),::branch(分支節點),::indicator(選中指示器):hover(鼠標懸停時),:selected(項被選中時),:disabled(項被禁用時),:checked(項被選中時),:unchecked(項未被選中時)
QSplitter分割器控件,支持分割線樣式。::handle(拖動手柄):hover(鼠標懸停時),:pressed(鼠標按下時),:disabled(分割器被禁用時)
QCalendarWidget日歷控件,支持日歷網格、選中日期等樣式。::navigation-bar(導航欄),::month-button(月份按鈕),::year-button(年份按鈕),::prev-month-button(上一月按鈕),::next-month-button(下一月按鈕):hover(鼠標懸停時),:pressed(鼠標按下時),:disabled(日歷控件被禁用時)

3. QSS屬性列表

以下是QSS支持的常用屬性及其詳細說明:

3.1 顏色與背景

屬性描述示例
color設置文本顏色color: red;
background-color設置背景顏色background-color: blue;
background-image設置背景圖片background-image: url(bg.png);
background設置背景顏色和圖片background: red url(bg.png);
background-repeat設置背景圖片重復方式background-repeat: no-repeat;
background-position設置背景圖片位置background-position: center;

3.2 字體

屬性描述示例
font-family設置字體名稱font-family: Arial;
font-size設置字體大小font-size: 14px;
font-weight設置字體粗細font-weight: bold;
font-style設置字體樣式(如斜體)font-style: italic;
font綜合設置字體屬性font: bold 14px Arial;

3.3 邊框

屬性描述示例
border設置邊框樣式border: 1px solid black;
border-radius設置圓角半徑border-radius: 5px;
border-color設置邊框顏色border-color: red;
border-width設置邊框寬度border-width: 2px;
border-style設置邊框樣式(如實線、虛線)border-style: dashed;

3.4 間距與對齊

屬性描述示例
padding設置內邊距padding: 10px;
margin設置外邊距margin: 5px;
text-align設置文本對齊方式text-align: center;
spacing設置控件內部間距spacing: 5px;
alignment設置內容對齊方式alignment: Qt::AlignCenter;

3.5 其他屬性

屬性描述示例
min-width設置最小寬度min-width: 100px;
max-width設置最大寬度max-width: 200px;
min-height設置最小高度min-height: 50px;
max-height設置最大高度max-height: 100px;
opacity設置透明度opacity: 0.5;
icon設置圖標icon: url(icon.png);
image設置圖片image: url(image.png);

4. QSS的高級用法

以下是Qt樣式表(QSS)的高級用法詳解。

4.1 偽狀態組合(多狀態疊加控制)

QSS允許通過組合多個偽狀態實現精確的交互反饋。

QPushButton:hover:checked { /* 按鈕同時懸停且被選中 */background-color: #FFA500;  /* 橙色 */border: 2px solid darkorange;
}

4.2 繼承與層疊機制

QSS遵循CSS的層疊規則,但需注意Qt控件的樣式繼承特性。即前面提到的子控件可以在父控件之上設置樣式。

QWidget {font-family: "Arial";font-size: 12pt;
}QPushButton { /* 是QWidget的子控件 *//* 繼承自QWidget的字體設置 */color: white;
}

4.3 動態屬性與條件樣式

通過QObject::setProperty()動態改變控件樣式。

先在代碼中設置屬性:

button->setProperty("priority", "high");

然后可以在QSS中匹配屬性,以指定設置樣式表:

QPushButton[priority="high"] {background-color: #FF4444;font-weight: bold;
}

附高級用法:狀態切換動畫

// 通過屬性切換實現動畫效果
button->setProperty("state", "active");
qApp->style()->unpolish(button);
qApp->style()->polish(button);

4.4 復雜選擇器組合

通過組合選擇器實現精準樣式定位。

  1. 相鄰兄弟選擇器

    QLineEdit + QPushButton {margin-left: 10px;  /* 緊接在輸入框后的按鈕 */
    }
    
  2. 層級嵌套選擇

    QTabWidget > QTabBar::tab:first-child {border-radius: 5px 0 0 0;  /* 第一個標簽頁特殊樣式 */
    }
    

4.5 自定義控件樣式

為自定義Widget實現完整QSS支持,可以自定義可樣式化的子部件,如下:

class CustomWidget : public QWidget {Q_OBJECTQ_PROPERTY(QString mode READ mode WRITE setMode)
public:// 注冊子部件類型Q_ENUMS(SubControls)enum SubControls { SC_Indicator = 0x1 };
};

然后在QSS中可以設置樣式表:

CustomWidget::indicator {width: 20px;height: 20px;
}

4.6 高效調試技巧

在實際編碼過程中,常用如下幾種快速定位樣式問題的方法。

  1. 樣式探測器

    qDebug() << widget->styleSheet();  // 輸出當前樣式
    
  2. 邊界高亮法

    * {border: 1px solid red !important;  /* 顯示所有控件邊界 */
    }
    
  3. 狀態監測法

    // 打印控件狀態
    qDebug() << "Hover:" << button->underMouse()<< "Pressed:" << button->isDown();
    

4.7 性能優化策略

  • 避免全局選擇器:盡量使用ID或類選擇器
  • 合并重復樣式:減少重復屬性定義
  • 預編譯QSS:將樣式表編譯為二進制資源
  • 分層加載:按模塊動態加載樣式表
/* 優化前 */
QPushButton#okBtn { color: white; }
QPushButton#cancelBtn { color: white; }/* 優化后 */
#okBtn, #cancelBtn {color: white;
}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/89156.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/89156.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/89156.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Spring 依賴注入:官方推薦方式及最佳實踐

Spring 依賴注入&#xff1a;官方推薦方式及最佳實踐 你正在遭遇以下困境嗎&#xff1f; 項目變大后&#xff0c;依賴關系像一團亂麻&#xff0c;牽一發而動全身&#xff1f;單元測試難如登天&#xff0c;被迫啟動整個Spring容器&#xff1f;NullPointerException 總在運行時突…

javaweb聽課筆記day1

MySQL數據模型 關系型數據庫: 通過表來存儲數據 關系型數據庫是建立在關系模型基礎上的數據庫&#xff0c;簡單說&#xff0c;關系型數據庫是由多張能互相連接的二維表組成的數據庫 優點: 都是使用表結構&#xff0c;格式一致&#xff0c;易于維護;使用通用的SQL語言操作…

《從量子奇境到前端優化:解鎖卡西米爾效應的隱藏力量》

卡西米爾效應由荷蘭物理學家亨德里克卡西米爾于1948年提出&#xff0c;它源于量子場論中“真空不空”的奇異觀點。在傳統認知里&#xff0c;真空是一片虛無&#xff0c;但量子理論指出&#xff0c;真空中充滿了持續漲落的能量&#xff0c;即零點能。想象有兩片中性的金屬板被放…

【學習筆記】強化學習的數學原理

軟活硬整&#xff0c;納什又把RL翻出來講了一遍&#xff0c;我以為是溫故而知新&#xff0c;原來是在賣書。 不過溫故而知新還是沒啥毛病的。 PS&#xff1a;今天裝Notepad時看到的&#xff0c;我還以為現在連用個Notepad都要給天線寶寶們捐款了。 文章目錄 PART 11 overview…

深入“火星棒球數據API”:用數據解鎖棒球世界的無限可能

在棒球運動日益數據化的今天&#xff0c;高效獲取和處理海量比賽信息已成為球隊制勝、媒體解讀、球迷深入理解比賽的關鍵。“火星棒球數據API” 應運而生&#xff0c;成為連接棒球智慧與大數據技術的橋梁。本文將探討這一API的核心價值、功能亮點及其如何重塑我們體驗和分析棒球…

[附源碼+數據庫+畢業論文]基于Spring+MyBatis+MySQL+Maven+jsp實現的校園服務平臺管理系統,推薦!

摘 要 現代經濟快節奏發展以及不斷完善升級的信息化技術&#xff0c;讓傳統數據信息的管理升級為軟件存儲&#xff0c;歸納&#xff0c;集中處理數據信息的管理方式。本校園服務平臺管理系統就是在這樣的大環境下誕生&#xff0c;其可以幫助管理者在短時間內處理完畢龐大的數據…

「Java EE開發指南」如何用MyEclipse創建一個WEB項目?(三)

在本文中&#xff0c;您可以找到有關WEB項目的信息。將了解&#xff1a; Web項目結構和參數Web開發生產力工具JSP代碼完成和驗證 這些特性在MyEclipse中可用。在上文中&#xff08;點擊這里回顧>>&#xff09;&#xff0c;我們為大家介紹了Web開發效率工具、Web項目參數…

笨方法學python -練習6

程序&#xff1a; print("Mary had a little lamb.") print("Its fleece was white as {}.".format(snow)) print("And everywhere that Mary went.") print("." * 10) # what′d that do? end1 "C" end2 "h&qu…

【MySQL】Binlog文件占用空間比較大,如何清理

一、前言 在進行一次數據導入之后&#xff0c;發現服務器磁盤爆滿&#xff0c;初步判斷是數據庫產生了大量binlog所致&#xff0c;接下來進行分析處理。 二、分析 1、查看磁盤空間 通過df -h命令&#xff0c;查看磁盤空間占用情況 2、查找占用文件或目錄 通過命令&#xff1a;…

車載診斷架構 --- 非易失性存儲器(NVM)相關設置項

我是穿拖鞋的漢子,魔都中堅持長期主義的汽車電子工程師。 老規矩,分享一段喜歡的文字,避免自己成為高知識低文化的工程師: 做到欲望極簡,了解自己的真實欲望,不受外在潮流的影響,不盲從,不跟風。把自己的精力全部用在自己。一是去掉多余,凡事找規律,基礎是誠信;二是…

C#: 輸入對話框窗口函數

這是一個 C# 輸入對話框函數&#xff0c;主要功能包括&#xff1a; 基礎功能&#xff1a;創建帶標題、提示文本和輸入框的對話框&#xff0c;返回用戶輸入或空字符串&#xff08;取消時&#xff09; 增強特性&#xff1a; 支持必填項驗證支持正則表達式格式驗證實時錯誤提示與…

PCB工藝學習與總結-20250628

一、PCB板材 1、結構組成 基板:作為電路板的支撐體,通常由絕緣材料制成,如玻璃纖維或塑料。 導線:用于連接電路板上的各個元件,傳輸電流和信號。 元件:包括電阻、電容、電感、二極管、晶體管等,用于實現電路的各種功能。 焊盤:用于焊接元件引腳的金屬片,確保元件…

VUE2與VUE3項目環境變量創建與使用區別

環境變量文件是項目中的.env開頭的文件&#xff0c;如下圖&#xff1a; 下圖是VUE2.env文件中的配置&#xff0c;是以VUE_APP開頭的 VUE_APP_PAGE_TITLE系統 VUE_APP_SERVICE_PREFIX/gateway/xxxxx在使用時 只需要 調用 process.env.VUE_APP_SERVICE_PREFIX 就可以獲取到值 而…

php flush實時輸出線上環境好使,本地環境等待一段時間后一次性輸出結果的原因

近期對接deepseek接口時為了擁有較好的用戶體驗&#xff0c;等待答案返回時采用了flush分布輸出&#xff0c;但是線上環境下可以正常分布輸出&#xff0c;同樣代碼在本地總是等待許久后一次性出結果&#xff0c;排查許久&#xff0c;發現竟然是本地和線上不同的php加載模式導致…

【世紀龍科技】東風風光580汽車維護與底盤拆裝檢修仿真教學軟件

在職業院校汽車專業的教學實踐中&#xff0c;傳統的汽車維護與底盤拆裝實訓常面臨諸多挑戰。實車操作不僅存在安全隱患&#xff0c;設備損耗、教學成本高的問題也不容忽視&#xff1b;部分學生因操作機會有限&#xff0c;難以系統掌握規范流程和儀器使用&#xff0c;教師在教學…

React大型項目目錄結構設計

以下這種結構設計適合以下場景&#xff1a; 10人以上開發團隊協作長期維護的中大型項目需要高度模塊化和可擴展性的項目需要嚴格類型檢查的TypeScript項目 根據實際需求&#xff0c;可以適當調整模塊劃分和目錄結構&#xff0c;但保持核心的模塊化思想和分層架構是關鍵。 Re…

【C語言】超市管理系統丨完整源碼與實現解析

通過這個完整的超市管理系統&#xff0c;您將掌握C語言核心數據結構與文件操作技術 設計思路與核心數據結構 本系統使用動態數組管理商品數據&#xff0c;支持商品增刪改查、文件存儲和數據統計功能。系統采用模塊化設計&#xff0c;分為商品管理、文件操作和用戶界面三大模塊…

RK3506開發板:多核異構架構賦能高可靠性工業應用

在工業4.0與物聯網技術深度融合的當下&#xff0c;企業對嵌入式計算平臺的需求正從單一性能向高能效、高可靠、高實時性方向演進。RK3506開發板憑借其創新的三核A7單核M0多核異構架構、緊湊型設計及豐富的外設資源&#xff0c;成為電力、工業網關、HMI&#xff08;人機界面&…

【AIOT 領域-拆解智能對話全生態需求】??全雙工對話-單工對話-半雙工

在萬物互聯的物聯網時代&#xff0c;設備間的"對話方式"直接決定了數據傳輸的效率與可靠性。今天帶大家深入解析三種基礎通信模式&#xff0c;從工業傳感器到5G基站&#xff0c;一文看透數據傳輸的底層邏輯&#xff01; &#x1f50c; 單工通信&#xff1a;信息流的…

國產數據庫華為高斯的GaussDB創建數據表和添加字段及注釋

國產數據庫華為高斯的GaussDB創建數據表和添加字段及注釋 &#x1f538; 一、創建數據庫&#x1f538; 二、修改數據庫&#xff08;重命名&#xff09;&#x1f538; 三、創建數據表并加字段注釋&#x1f538; 四、修改表結構1. 添加字段? 添加字段的注釋2. 修改字段類型3. 修…