QSS定製自定義QSlider
轉自: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); "
" } "
"{ "
" 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; "
" } "
"{ "
" 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; "
" } "
);
"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) "
"}"
);
相關文章
- 利用Sonar定製自定義掃描規則
- Flutter 自定義繪製 ViewFlutterView
- Flutter自定義繪製(1)- 繪製基礎Flutter
- 飛冰:Iceworks 自定義模板支援佈局定製(v2.3.0 版本)
- 跟我一起部署和定製 CNPM——自定義包儲存層NPM
- Flutter自定義繪製Widget初探Flutter
- jQuery如何製作自定義外掛jQuery
- WINFORM自定義皮膚製作(上)ORM
- 定義製造業操作(定義 MES/MOM 系統)
- android中自定義屬性重複定義Android
- Qt繪製自定義箭頭圖元QT
- Anroid自定義View-繪製圓環View
- 自定義View之kotlin繪製手勢設定溫度控制元件ViewKotlin控制元件
- 滑動條:QSliderIDE
- flutter 用 CustomPaint 繪製自定義圖案FlutterAI
- 自定義View的繪製流程基礎分析View
- iOS開發 AVFoundation 自定義視訊錄製iOS
- C#自定義控制元件製作篇C#控制元件
- cnetos7 ISO 映象自定義製作
- 寶塔皮膚如何設定自定義404
- 介面測試--自定義斷言設定
- macOS自定義定時開關機教程Mac
- rubymine設定自定義快捷程式碼片段
- MacBook Pro如何自定義設定快捷鍵?Mac
- 給Debian設定自定義快捷鍵
- 自定義滑鼠設定-中鍵設定為後退
- 第十七篇:複製控制( 上 ) --- 自定義複製函式函式
- QSlider自畫樣式IDE
- 基於 Lotus Expeditor 平臺構建可定製外觀的自定義控制元件控制元件
- 自定義View:自定義屬性(自定義按鈕實現)View
- win10如何自定義主題_win10怎麼設定自定義主題Win10
- flutter 自定義view 繪製曲線統計圖FlutterView
- 安卓自定義View進階:繪製基本形狀安卓View
- 自定義提醒檢視Alert-動態繪製
- 自定義RadiusBackgroundSpan在textview設定tagTextView
- Android自定義View之定點寫文字AndroidView
- 二、自定義垂直ViewGroup如何設定marginView
- 自定義定時器的一點總結定時器