QSS定製自定義QSlider

pamxy發表於2013-06-24
原文網址 : https://blog.csdn.net/pamxy/article/details/9165183
IDE

轉自：http://blog.csdn.net/sdljlcming/article/details/8306356



QSlider中有四個比較重要的輔助控制器（subcontrol），groove表示槽的部分，handle表示滑塊，add-page表示未滑過的槽部分,sub-page表示已滑過的槽部分。在輔助控制器後面可以設定狀態，horizontal就是QSS生效的QSlider的狀態，注意這裡設定的方向一定要和slider物件的方向一致，如果slider是vertical的，QSS設定的是horizontal的，那麼是看不到效果的。

進行QSlider設計時，groovy的左右一定要留有一定的空間，這樣是防止滑塊滑到兩端時被遮蓋，所以groovy需要設定left和right屬性。
    "QSlider::groove:horizontal                       "
     "{                                               "
    "   border: 10px solid #999999;                   "
    "   height: 5px;                                  "
    "   margin: 0px 0;                                "
    "   left: 12px; right: 12px;                      "
    "   border-image:url(:/file/images/process.png);  "
    " }                                               "

滑塊方面，如果設計的是突出的滑塊，需要指定margin或者border為負值進行外擴即可。
    "QSlider::handle:horizontal                       "
    "{                                                "
    "   border: 1px solid #5c5c5c;                    "
    "   border-image:url(:/file/images/pd.png);       "
    "   width: 18px;                                  "
    "   margin: -7px -7px -7px -7px;                  "
    " }                                               "

 m_slider->setStyleSheet(
    "QSlider::groove:horizontal                       "
    "{                                                "
    "   border-image:url(:/file/images/process.png);  "
    "   border: 10px;                                 "
    "   height: 5px;                                  "
    "   margin: 0px;                                  "
    "   left: 18px; right: 18px;                      "
    " }                                               "
    "QSlider::handle:horizontal                       "
    "{                                                "
    "   border-image:url(:/file/images/pd.png);       "
    "   border: 1px;                                  "
    "   width: 18px;                                  "
    "   margin: -7px -7px -7px -7px;                  "
    " }                                               "
    );
=========================================================================================================================
(以下是別人的例子)
已滑過的槽部分直接填充顏色即可，沒有必要貼圖，如果需要立體的效果可以通過線性漸變進行填充，線性漸變通過起始點和終止點的座標指定的是填充方向，通過stop指定當前rgba值，起始點值為0，終止點值為1,，示例的效果是凸起，依靠強悍的美工給我的圖，層層萃取出來的rgb值，填上後才呈現出來的。（執著的程式設計師呀）

"QSlider::sub-page:horizontal{                               "
" background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 rgba(27, 5, 27, 255), stop:0.25 rgba(99, 20, 102, 255), stop:0.5 rgba(154, 30, 158, 255), stop:1 rgba(173, 57, 176, 255));                      "
"}                                                           "

就這樣，一個完美的QSlider就出現了！各位可以根據自己的實際情況進行修改。

完整的程式碼：
slider->setStyleSheet(
"QSlider::groove:horizontal {                                "
"     border: 1px solid #999999;                             "
"     height: 2px;                                           "
"     margin: 0px 0;                                         "
"     left: 12px; right: 12px;                               "
" }                                                          "
"QSlider::handle:horizontal {                                "
"     border: 1px solid #5c5c5c;                             "
" border-image:url(image/skin2/Toolsicon/volumnslider.png);"
"     width: 18px;                                           "
"     margin: -7px -7px -7px -7px;                           "
" }                                                          "
"                                                            "
"QSlider::sub-page:horizontal{                               "
" background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 rgba(27, 5, 27, 255), stop:0.25 rgba(99, 20, 102, 255), stop:0.5 rgba(154, 30, 158, 255), stop:1 rgba(173, 57, 176, 255));                      "
"}                                                           "
"QSlider::add-page:horizontal{                               "
" background-image:url(image/skin2/Toolsicon/volumn.png)   "
"}"
);

相關文章