QSS定制自定义QSlider

概述QSS定制自定义QSlider   (2011-05-16 11:05:45) 转载 标签：  qt   qss   qslider   自定义   滑块   图片   it   花了不少时间学习qss，终于绘制出满意的QSlider了，效果图： 因为图是1280*720的，所以看起来优点扁。使用QSS设计时最大的建议是使用Qt Designer，它有直观的style sheet设置窗口，可以直观 QSS定制自定义QSlIDer  

(2011-05-16 11:05:45)

转载

标签：  qt   qss   qslider   自定义   滑块   图片   it

花了不少时间学习qss，终于绘制出满意的QSlIDer了，效果图：

因为图是1280*720的，所以看起来优点扁。使用QSS设计时最大的建议是使用Qt Designer，它有直观的style sheet设置窗口，可以直观的看到效果；其次，参考Qt Assist -->  Qt Style Sheets --> QSlIDer(当然也能找到其他的类) -->  Customizing QSlIDer,基本就能掌握QSlIDer的设计了。
下面来看看具体的QSS脚本的作用：
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: 1px solID #999999;                                           " "       height: 2px;                                                                " "       margin: 0px 0;                                                             " "       left: 12px; right: 12px;                                              " " }                                                                                       "
滑块方面，如果设计的是突出的滑块，需要指定maegin或者border为负值进行外扩即可。 "QSlIDer::handle:horizontal {                                                " "       border: 1px solID #5c5c5c;                                           " "   border-image:url(image/skin2/Toolsicon/volumnslIDer.png);" "       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,stop:0.5 rgba(154,30,158,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,255));                                 " "}                                                                                        " "QSlIDer::add-page:horizontal{                                              " " background-image:url(image/skin2/Toolsicon/volumn.png)    " "}" ); 总结

以上是内存溢出为你收集整理的QSS定制自定义QSlider全部内容，希望文章能够帮你解决QSS定制自定义QSlider所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。