1. 创建一个简单的QSlider
3. QSlider自动移动到鼠标点击位置
关于样式表的例子,诺基亚官网上有一篇很好的文章,链接如下:
// 中部云台速度控制
QWidget *speedWidget = createWidgetWithSize(tabWidget, 210, 20);
QLabel *minus = new QLabel("-");
QLabel *add = new QLabel("+");
minus->setObjectName("minusLabel");
add->setObjectName("addLabel");
QHBoxLayout *speedLayout = new QHBoxLayout();
speedLayout->setContentsMargins(5,2,3,0);
speedLayout->setSpacing(0);
speedSlider = new QSlider(Qt::Horizontal, tabWidget);
speedSlider->setObjectName("speedSlider");
speedSlider->setRange(0,10);
speedSlider->setPageStep(1);
speedLayout->addWidget(minus);
speedLayout->addWidget(speedSlider);
speedLayout->addWidget(add);
speedWidget->setLayout(speedLayout);
|
注意,在这里面speedSlider->setPageStep(1);是设置QSlider上一次鼠标点击,滑动柄移动的距离,若不设置,默认步长是setRange()中设置的大小。
2. 通过QSS更改QSlider的样式
参考链接:(http://blog.sina.com.cn/s/blog_791f544a0100s2ml.html)
"
QSlider中有四个比较重要的辅助控制器(subcontrol),groove表示槽的部分,handle表示滑块,add-page表示未滑过的槽部分,sub-page表示已滑过的槽部分。在辅助控制器后面可以设置状态,horizontal就是QSS生效的QSlider的状态,注意这里设置的方向一定要和slider对象的方向一致,如果slider是vertical的,QSS设定的是horizontal的,那么是看不到效果的。
"
#speedSlider::groove:horizontal{
border: 1px solid #666;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
border-radius:3px;
height: 4px;
left:12px;
right:12px;
margin:0px;
background-color: #999;
margin:0px;
}
#speedSlider::handle:horizontal{
border-image:url(./images/speed-slider-handle.jpg);
width:10px;
margin:-5px -7px;
}
|
注意:在使用border-image后,
margin:-5px -7px;
是为了控制滑动柄的高何宽。至于原理,请参考《C++ GUI QT4编程(第2版)》19章--自定义外观
3. QSlider自动移动到鼠标点击位置
(参考链接:http://hi.baidu.com/%E9%F3%B3%BE%BE%B2/blog/item/b1f69d351a67633f0a55a9d9.html)
网上有网友实现了,关于这个效果,我自己还没有实现,今后应该用得上,在此做个记录
显示效果截图:
![](http://hi.csdn.net/attachment/201201/2/0_1325501907FCWW.gif)
![](http://hi.csdn.net/attachment/201201/2/0_1325501907FCWW.gif)
关于样式表的例子,诺基亚官网上有一篇很好的文章,链接如下: