Qt QSS之QSlider滑動條美化


  首先什么是qss呢?QSS稱為Qt Style Sheets也就是Qt樣式表,它是Qt提供的一種用來自定義控件外觀的機制。QSS大量copy了CSS的功能,只不過QSS的可以看作是CSS簡化版,要弱很多,選擇器要少,可以使用的QSS屬性也要少很多,並不是所有的屬性都可以用在Qt的所有控件上。
下面我們來使用qss對滑動條slider進行美化。先上圖。

   這里藍色背景並非用qss美化,主要研究滑動條的美化過程。

 1 //滑動條槽(整體)的美化
 2 QSlider::groove:horizontal{  3  height: 12px;  4  left: 0px;  5  right: 0px;  6         border:0px;    //指定無邊框
 7         border-radius:6px;    //指定圓角
 8         background:rgba(0,0,0,50);  9  } 10  //滑塊的美化
11  QSlider::handle:horizontal{ 12  width: 50px; 13  height: 50px; 14         margin-top: -20px; 15         margin-left: 0px; 16         margin-bottom: -20px; 17         margin-right: 0px; 18          border-image:url(:/res/images/setting_slider_handle.png); 19 } 20 //已滑過的進度美化
21 QSlider::sub-page:horizontal{ 22        background:rgba(80,166,234,1); 23 }

  這里解釋一下,我們只用到groove,handle,sub-page這3個屬性,就可完成屬性,未滑過的顏色就是groove的顏色。當然也能指定未滑過部分的顏色即:

1 QSlider::add-page:horizontal
2 {
3 background: rgb(0,0,255);
4 }

  注意的是groove,sub-page,add-page三個屬性共存時,add-page顏色會覆蓋groove的顏色。如果滑塊需要外擴比槽部分大,那么可以使用margin參數,當然QSilder測整體高度必須大於或等於滑塊的高度,否則滑塊會被壓縮。
  我們例子滑塊使用的是圖片 ,groove,handle,sub-page,add-page這些既可以用顏色填充也可以用圖片填充,要看自己需求。當然如果要炫一點可以用線性漸變顏色,

background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #fff, stop:1 #ddd);

來定義自己的漸變顏色。
  此外我們還可以對這些部件不同狀態的一些指定比如,hover,disable

 1 QSlider::handle:horizontal:hover {  2  width: 50px;  3  height: 50px;  4         margin-top: -20px;  5         margin-left: 0px;  6         margin-bottom: -20px;  7         margin-right: 0px;  8          border-image:url(:/res/images/setting_slider_handle_hover.png);  9 } 10 QSlider::sub-page:horizontal:disabled { 11  background: #BB345F; 12 } 13 QSlider::add-page:horizontal:disabled { 14  background: #1ADEFF; 15 } 16 QSlider::handle:horizontal:disabled { 17  background: #EEDDFF; 18 }

這樣在hover或者設置無效狀態時,顏色就有改變。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM