QSlider使用技巧

1. 创建一个简单的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://developer.qt.nokia.com/doc/qt-4.8/stylesheet-examples.html