Qt樣式表

Qt樣式表

QT樣式表參考CSS層疊樣式表設計，不一樣之處在於QT樣式表應用於Widget世界。

能夠使用QApplication::setStyleSheet()函數設置到整個應用程序上，也能夠使用QWidget::setStyleSheet()設置到某一個部件以及子部件上。若是在不一樣的級別都設置了樣式表，QT會使用全部有效的樣式表，稱爲樣式表的層疊。

this->setStyleSheet("QpushButton{background:yellow}QSlider{background:blue}");

QPushButton{
    border-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0 rgba(0, 0, 0, 255), stop:0.19397 rgba(0, 0, 0, 255), stop:0.202312 rgba(122, 97, 0, 255), stop:0.495514 rgba(76, 58, 0, 255), stop:0.504819 rgba(255, 255, 255, 255), stop:0.79 rgba(255, 255, 255, 255), stop:1 rgba(255, 158, 158, 255));
    background-color: rgb(65, 48, 255);
}

樣式表語法

樣式規則

QPushButton{color:red}

QPushButton是選擇符，{color:red}是聲明，color是屬性，red是值

選擇符

選擇符	示例	說明
通用選擇符	*	匹配全部部件
類型選擇符	QPushButton	匹配全部QPushButton實例和它的全部子類
屬性選擇符	QPushButton[flat = "false"]	匹配QPushButton的屬性flat爲false實例
類選擇符	.QPushButton	匹配全部QPushButton實例但不包含它的子類
ID選擇符	QPushButton#okButton	匹配全部QPushButton中以okButton爲對象名的實例
後代選擇符	QDialog QPushButton	匹配全部QPushButton實例，必須是QDialog的子孫部件
孩子選擇符	QDialog>QPushButton	匹配全部QPushButton實例，必須是QDialog的直接子部件

子控件

QComboBox的下拉按鈕子控件

QSpinBox的向上向下箭頭子控件

選擇符能夠包含子控件對部件的特定子控件應用規則

QComboBox::drop-down{image:url(dropdown.jpg)}此規則改變全部QComboBox部件的下拉按鈕樣式

僞狀態

QCheckBox:hover:checked{color:red} 當鼠標懸停在一個被選中的QCheckBox上時才應用規則。

衝突解決

特殊的優先

層疊

樣式表能夠設置在QApplication或者父部件上。部件有效的樣式表經過部件祖先的樣式表和QApplication上的樣式表合併獲得，當發生衝突時，部件本身的樣式表優先於任何繼承的樣式表，父部件優先於祖先的樣式表。

自定義部件外觀與換膚

盒子模型

內容（content）、填襯（padding）、邊框（border）、邊距（margin）

使用background-image來指定背景圖片，若是但願背景圖片隨着部件的大小變化，就必須使用border-image。

image屬性能夠用來在border-image之上繪製一個圖片、圖片對齊參考image-position屬性。

自定義部件外觀

/****************主界面背景*******************/
QMainWindow{
        background-image: url(:/image/beijing01.png);/*背景圖片*/
}

/****************按鈕部件*******************/
QPushButton{
     background-color: rgba(100, 225, 100, 30);/*背景色*/
     border-style: outset; /*邊框樣式*/
     border-width: 4px;  /*邊框寬度爲4像素*/
     border-radius: 10px; /*邊框圓角半徑*/
     border-color: rgba(255, 225, 255, 30);/*邊框顏色*/
     font: bold 14px;/*字體*/
     color:rgba(0, 0, 0, 100);/*字體顏色*/
     padding: 6px; /*填襯*/
}

QPushButton:hover{ /*鼠標懸停在按鈕上時*/
        background-color:rgba(100,255,100, 100);
        border-color: rgba(255, 225, 255, 200);
        color:rgba(0, 0, 0, 200);
}

QPushButton:pressed { /*按鈕被按下時*/
     background-color:rgba(100,255,100, 200);
     border-color: rgba(255, 225, 255, 30);
     border-style: inset;
     color:rgba(0, 0, 0, 100);
}

/****************滑塊部件*******************/


QSlider::handle:horizontal { /*水平滑塊的手柄*/
        image: url(:/image/sliderHandle.png);
 }

QSlider::sub-page:horizontal { /*水平滑塊手柄之前的部分*/
        border-image: url(:/image/slider.png);/*邊框圖片*/
 }

實現換膚功能

Qt樣式表能夠存放在一個以.qss爲後綴的文件中，能夠在程序中調用不一樣的.qss文件實現換皮膚功能。

QFile file(":/qss/my.qss");
    // 只讀方式打開該文件
    file.open(QFile::ReadOnly); 
    // 讀取文件所有內容，使用tr()函數將其轉換爲QString類型
    QString styleSheet = tr(file.readAll());
    // 爲QApplication設置樣式表
    qApp->setStyleSheet(styleSheet);

特殊效果窗體

不規則窗體和透明窗體

用到的時候再研究