QT styleSheet是快速美化界面的神器,本文簡單介紹並記錄本人經常使用的幾種styleSheet使用習慣。
單一控件很簡單,不詳細說明,操作方法是:
控件上右鍵,如圖選擇並設置
1.觸發式UI隨鼠標事件改變
關鍵詞:hover / pressed / checked
QPushButton#pushButton:<span style="color:#ff0000;">hover</span>{
background-color: qconicalgradient(cx:0.5, cy:0.522909, angle:179.9, stop:0.494318 rgba(181, 225, 250, 255), stop:0.5 rgba(222, 242, 251, 255));
border-radius:0px;
border: 1px solid #3C80B1;
}
QPushButton#pushButton:<span style="color:#ff0000;">pressed</span>{
border: 3px solid #3C80B1;
}
QPushButton#pushButton:<span style="color:#ff0000;">checked</span>{
background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0.0284091, stop:0 rgba(67, 88, 89, 177), stop:1 rgba(110, 161, 164, 195));
border-radius:0px;
border: 1px solid #5F92B2;
}
2. 多態UI的設計
關鍵詞:hover 和 checked
控件需要設置爲checkable
QPushButton#pushButton:hover{
background-color: qconicalgradient(cx:0.5, cy:0.522909, angle:179.9, stop:0.494318 rgba(181, 225, 250, 255), stop:0.5 rgba(222, 242, 251, 255));
border-radius:0px;
border: 1px solid #3C80B1;
}
QPushButton#pushButton:checked{
background-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0 rgba(57, 241, 37, 153), stop:1 rgba(153, 241, 143, 195));
border-radius:5px;
border: 1px solid #5F92B2;
}
3. tabWidget的設計
需要對每個tab單獨設置,否則有兩種情況:一是設置不會生效,二是tab裏面的控件全部被改變
</pre><p><pre class="css" name="code">QWidget#tab
{
background-color: qlineargradient(spread:pad, x1:0.079, y1:0.6125, x2:0.948, y2:0.165, stop:0.0852273 rgba(203, 233, 255, 219), stop:0.710227 rgba(207, 235, 255, 216), stop:0.829545 rgba(203, 233, 255, 223), stop:1 rgba(178, 215, 240, 207));
}
QWidget#tab_2
{
background-color: qlineargradient(spread:pad, x1:0.079, y1:0.6125, x2:0.948, y2:0.165, stop:0.0852273 rgba(203, 233, 255, 219), stop:0.710227 rgba(207, 235, 255, 216), stop:0.829545 rgba(203, 233, 255, 223), stop:1 rgba(178, 215, 240, 207));
}
以上是比較簡易的界面美化,更多的以後再貼...