Qt滑动条设计与实现

没有找到Qt的滑动条控件，所以自己写了一个，能够实现亮度调节、音量调节等功能。

效果如下图：

主要设计思路：

有些调节功能如对比度是有负值的，所以需要能对滑动条的数值范围进行设置，不局限于0~100

鼠标拖动时滑动块能随着鼠标移动，右侧的数字也跟着变化

鼠标释放时认为对数值设置成功，触发某个操作

代码思路：

整个窗口继承QWdiget，画一条横线，滑块也是画出的粗线

数值设置成功后的动作使用回调函数，设计一个回调基类，当数值设置成功后，调用回调基类的回调函数。

重写鼠标单击、移动、释放的事件响应函数，当鼠标按下时，设置变量mousedown为true，当鼠标移动时，判断mousedown是否为true，如果是true，则更新滑块的坐标信息，然后出发窗口的重绘。

鼠标释放时设置mousedown为false，与鼠标滑动一样，更新滑块的坐标信息，触发窗口重绘，然后调用回调函数完成对数值的设置。

具体代码：

回调基类：

 #ifndef TRACKBARCALLBACK_H
 #define TRACKBARCALLBACK_H

 class TrackBarCallBack
 {
 public:
     TrackBarCallBack();
     virtual void callBack(int value);
 };

 #endif // TRACKBARCALLBACK_H

 #include "trackbarcallback.h"

 TrackBarCallBack::TrackBarCallBack()
 {
 }

 void TrackBarCallBack::callBack(int value)
 {
 }

TrackBarCallBack.cpp

滑动条类：

trackbar.h

 #ifndef TRACKBAR_H
 #define TRACKBAR_H
 #include <QWidget>
 #include "trackbarcallback.h"

 class TrackBar: public QWidget
 {
 public:
     TrackBar(TrackBarCallBack *callBack, int width=, int height=, int start=, int end=);
     void setPosition(int position);
     void mouseReleaseEvent(QMouseEvent *);
     void paintEvent(QPaintEvent *);
     void mousePressEvent(QMouseEvent *);
     void mouseMoveEvent(QMouseEvent *);
 private:
     TrackBarCallBack *callBack;
     int start;//数值范围起点
     int end;//数值范围终点
     int position;
     bool mousedown;
     int widthOfLine;//横线的长度
 };

 #endif // TRACKBAR_H

trackbar.cpp

 #include "trackbar.h"
 #include <QWidget>
 #include <QPainter>
 #include <QMouseEvent>

 TrackBar::TrackBar(TrackBarCallBack *callBack, int width, int height, int start, int end):QWidget()
 {
     this->callBack=callBack;
     this->start = start;
     this->end = end;
     this->setMinimumSize(width,height);
     this->setMaximumSize(width,height);
     this->position = end;//竖线的位置，标识亮度的数值
     this->mousedown = false;//为了实现拖动效果，先判断是否点下了鼠标，然后鼠标移动才有效
 }

 void TrackBar:: mouseReleaseEvent(QMouseEvent *event){
     this->mousedown=false;//鼠标放下后，鼠标移动不再具有拖动效果
     int pos=event->x();
     if(pos<)//减5是因为显示的时候为了好看左边从5的位置开始显示，当作刻度0
         position = start;
     else if(pos>(widthOfLine+))
         position = end;
     else{
         double ratio = 1.0 * (pos - ) / widthOfLine;
         position = (end - start) * ratio + start;
     }
     update();//触发重绘操作，生成paintEvent事件

     callBack->callBack(position);//回调函数
 }

 void TrackBar::paintEvent(QPaintEvent *){
     QPainter p(this);
     p.setPen(QPen(Qt::lightGray, ));//写字用的这个字体，先用这个字体获取字的像素大小
     int widthOfTitle =  + 1.2 * p.fontMetrics().width(QString::number(-end));//最右显示数字需要的大小，加负号防止出现负数(-100~100)
     int w =width() - widthOfTitle;
     widthOfLine = w -;
     p.setPen(Qt::lightGray);
     p.drawLine(QPoint(,height()/),QPoint(w,height()/));//中间的横线
     p.setPen(QPen(Qt::lightGray, ));
     double ratio = 1.0 * (position - start)/(end - start);
     if(ratio < ){
         ratio = -ratio;
     }
     int posX = (w - ) * ratio + ;
     p.drawLine(QPoint(posX,),QPoint(posX,height()-));//竖线，标识亮度数值的位置
     int heightOfTitle = p.fontMetrics().height();
     p.drawText(w+,height()/ + heightOfTitle/,QString::number(position));//写文字的y坐标是文字的底部坐标
 }

 void TrackBar:: mousePressEvent(QMouseEvent *){
     this->mousedown=true;//鼠标按下，之后鼠标移动操作产生拖动效果
 }

 void TrackBar::mouseMoveEvent(QMouseEvent *event){//鼠标移动事件，是否是拖动需要判断是否鼠标按下了
     if(mousedown==false)
         return;
     //下面的跟鼠标释放操作是一样的
     int pos=event->x();
     if(pos<)//减5是因为显示的时候为了好看左边从5的位置开始显示，当作刻度0
         position = start;
     else if(pos>(widthOfLine+))
         position = end;
     else{
         double ratio = 1.0 * (pos - ) / widthOfLine;
         position = (end - start) * ratio + start;
     }
     update();//触发重绘操作，生成paintEvent事件
 }

 void TrackBar::setPosition(int position){
     this->position = position;
 }

使用滑动条&测试

 #ifndef MAINWINDOW_H
 #define MAINWINDOW_H

 #include <QMainWindow>
 #include "trackbarcallback.h"
 #include "trackbar.h"

 namespace Ui {
 class MainWindow;
 }

 class MainWindow : public QMainWindow,public TrackBarCallBack
 {
     Q_OBJECT

 public:
     explicit MainWindow(QWidget *parent = );
      void callBack(int value);
     ~MainWindow();

 private:
     Ui::MainWindow *ui;
     TrackBar *trackBar;
 };

 #endif // MAINWINDOW_H

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <qdebug.h>

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    trackBar = new TrackBar(this,,,-,);
    trackBar->setWindowTitle(QString("正负数值设置"));
    trackBar->show();
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::callBack(int value){
    qDebug()<<"value:"<<value;
}