1. 程式人生 > >QT樣式表styleSheet(qss)幫助文件的使用,及相關術語、概念

QT樣式表styleSheet(qss)幫助文件的使用,及相關術語、概念

學習樣式表,最好的參考資料莫過於QT自帶的幫助文件,隨便開啟一個QT工程,點選->幫助->索引->styleSheet,即可開啟QT所有關於樣式表的幫助資訊,如下圖所示:


比如,我們想查查下拉列表控制元件QComboBox支援哪些樣式屬性,可以點選上圖中的QT style sheet reference,裡面就有介紹。

概念1:方盒模型box-model

點選上圖中的Customizing Qt Widgets Using Style Sheets ,見下圖:


由以上內容可見:一個控制元件widget的外觀被分成了4部分:邊緣margin、邊線border、填充padding、內容content

某個控制元件是否支援方盒模型,在QT style sheet reference章節裡都詳細說了,可自己查閱。

概念2:子控制元件sub-control

這一概念仍在這一章節:Customizing Qt Widgets Using Style Sheets 

幫助文件舉了個例子:下拉列表控制元件QComboBox,QT對這一控制元件的渲染分3部分:

  • Render the QComboBox { } rule      //渲染QComboBox 
  • Render the QComboBox::drop-down { } rule         //渲染下拉按鈕
  • Render the QComboBox::down-arrow { } rule      //渲染下拉箭頭
下拉按鈕是QComboBox的子控制元件,下拉箭頭是下拉按鈕的子控制元件,也即層次為:ComboBox->下拉按鈕->下拉箭頭 子控制元件的位置可以用subcontrol-position 和subcontrol-origin 這兩個屬性來定位, 定位以後,子控制元件也就可以使用方盒模型了 注意:幫助手冊要求:對於一些複雜控制元件,如QComboBox、QScrollBar,等,如果我們要對這些複雜控制元件的子控制元件設定屬性,那麼必須把子控制元件的全部屬性都設定一遍!!! 例如,對於pushButton,如果我們要設定QPushButton{},那麼同時要設定其滑鼠懸浮的樣式:QPushButton::hover{},滑鼠按下的樣式:QPushButton::pressed{}等