QSS應用之QPushButton

 

1.單個按鈕qss屬性設置：

       setstylesheet 通過QString()包一個屬性，然后后面緊跟.append來追加屬性設置，分別在normal狀態下，hover狀態下，pressed狀態下，foucs選中狀態下等屬性的一些設置，例如：

btn->setStyleSheet(  QString( "QPushButton::Normal{ background-color:rgb(255,255,255);}"  )
                                  .append("QPushButton::hover { background-color:rgb(244,244,244);}")
                                  .append("QPushButton::pressed{ background-color:rgb(219,219,219);}")
                                  .append("QPushButton::focus { background-color:rgb(161, 175, 201);padding:-1;outline: none}")
                                  .append("QPushButton:focus { padding:-1;outline: none}")
);

2.整個項目控件的屬性設置：

        首先創建qss文件，例如：style.qss，把它加到資源文件中， 在代碼里加載文件，代碼如下

QFile file(":/style.qss"); file.open(QFile::ReadOnly); QString styleSheet = tr(file.readAll()); this->setStyleSheet(styleSheet); file.close();

qss文件內容如下：

QPushButton#myButton:normal/*鼠標正常時的效果*/
{
    color:#000000;
    background-color:rgb(40, 85, 20); /*改變背景色*/
    border-style:inset;/*改變邊框風格*/
    padding-left:4px;
    padding-top:4px;
}
 
/*鼠標懸浮時的效果*/
QPushButton#myButton:hover
{
    color:#0000ff;
    background-color:rgb(40, 85, 20); /*改變背景色*/
    border-style:inset;/*改變邊框風格*/
    padding-left:8px;
    padding-top:8px;
}
/*如果按下與懸浮想同時產生效果，hover必須寫在pressed的后面*/
/*鼠標按下時的效果*/
QPushButton#myButton:pressed
{
    color:#00ff00;
    background-color:rgb(40, 85, 20); /*改變背景色*/
    border-style:inset;/*改變邊框風格*/
    padding-left:6px;
    padding-top:6px;
}
 
/*鼠標不可用時的效果*/
QPushButton#myButton:disabled
{
    color:#000000;
    background-color:rgb(40, 85, 20); /*改變背景色*/
    border-style:inset;/*改變邊框風格*/
    padding-left:6px;
    padding-top:6px;
}
 
QPushButton
{
    color:red; /*文字顏色*/
    background-color:rgb(30, 78, 11);/*背景色*/
    border-style:outset; /*邊框風格*/
    border-width:2px;/*邊框寬度*/
    border-color:rgb(10, 46,112); /*邊框顏色*/
    border-radius:10px; /*邊框倒角*/
    font:bold 14px; /*字體*/
    font-family: Segoe UI;
    min-width:100px;/*控件最小寬度*/
    min-height:20px;/*控件最小高度*/
    padding:4px;/*內邊距*/
}
 
 
/*按鈕樣式*/
QPushButton:flat
{
    border:2px solid red;
}
 
/*當按鈕打開菜單時：ui->pushButton->setMenu(menu)*/
QPushButton:open
{
    background-color:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 #abdeac, stop: 1 #fafc12);
}
 
/*子選擇器：菜單*/
QPushButton::menu-indicator
{
    image:url(":/close_normal.png");
    /*image:none;去掉小三角號*/
    subcontrol-origin:padding;/*繪制subcontrol的參考矩形的位置*/
    subcontrol-position:bottom right;/*小三角的位置*/
}
 
QPushButton::menu-indicator:pressed, QPushButton::menu-indicator:open
{
    position:relative;
    top:4px;
    left:4px;
}

基本規則如下：

規則1：樣式規則由選擇器和聲明組成。選擇器指定哪些小部件受規則影響;聲明指定應該在小部件上設置哪些屬性。

如：QPushButton { color : green }。

其中QPushButton就是選擇器，'{ color : green }'是聲明部分。 color就是屬性，green就是指定給該屬性的值。

該語句的意思是QPushButton及其子類的前景色是綠色。

注意：Qt樣式表通常不區分大小寫，除了類名、對象名和Qt屬性名。

規則2：可以為同一個聲明指定多個選擇器，使用逗號(，)分隔選擇器。

QPushButton, QLineEdit, QLabel {color: red}

規則3：聲明多個屬性。在{}里面用 ; 分割

QPushButton { color: blue; background-color: red }

規則4：選擇器的不同寫法

 

規則5：控件中的子控件的樣式設置。

對於一個復雜的控件，很有必要去控制這個控件的子控件。比如QComboBox的下拉按鈕和QSpinBox的上下調整大小的箭頭按鈕。選擇器可以包含子控件，這些子控件可以將規則的應用程序限制為特定的小部件子控件。如：

QPushButton::pressed { image: url(pressed.png) }。指定了按下的填充圖片

規則6：偽狀態。選擇器可能包含偽狀態，這些偽狀態表示根據小部件的狀態限制規則的應用。偽狀態出現在選擇器的末尾，中間有一個冒號(:)。如：

QPushButton:hover { color: white } 表示當鼠標懸停時顏色為白色

偽狀態可以使用感嘆號！操作符進行否定。如：

QPushButton:!hover { color: red } 表示當鼠標不是懸停時顏色為紅色

還可以有多個偽狀態一起使用：

QCheckBox:hover:checked { color: white } 表示 當鼠標懸停 並且 該復選框被選中的時候顏色為白色

QCheckBox:hover, QCheckBox:checked { color: white } 表示當鼠標懸停或着被選中的時候 顏色為白色

 

 

規則7：優先順序的確定。如：

QPushButton#myButton{ color: gray }

QPushButton { color: red }

這兩條規則都會應用到名為myButton的按鈕上，但是他們為同一個屬性設置了不同的顏色，這會有沖突，

原文鏈接：https://blog.csdn.net/chenyijun/article/details/88664433