Qt滑动条设计与实现

Posted 2020-10-25 AuroraMini

一个qt实现的类似音量调节的滑动条控件

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

效果如下图：

主要设计思路：

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

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

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

代码思路：

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

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

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

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

 

具体代码：

回调基类：

 1 #ifndef TRACKBARCALLBACK_H
 2 #define TRACKBARCALLBACK_H
 3 
 4 class TrackBarCallBack
 5 {
 6 public:
 7     TrackBarCallBack();
 8     virtual void callBack(int value);
 9 };
10 
11 #endif // TRACKBARCALLBACK_H

 

1 #include "trackbarcallback.h"
2 
3 TrackBarCallBack::TrackBarCallBack()
4 {
5 }
6 
7 void TrackBarCallBack::callBack(int value)
8 {
9 }

TrackBarCallBack.cpp

 

滑动条类：

trackbar.h

 1 #ifndef TRACKBAR_H
 2 #define TRACKBAR_H
 3 #include <QWidget>
 4 #include "trackbarcallback.h"
 5 
 6 class TrackBar: public QWidget
 7 {
 8 public:
 9     TrackBar(TrackBarCallBack *callBack, int width=390, int height=40, int start=0, int end=100);
10     void setPosition(int position);
11     void mouseReleaseEvent(QMouseEvent *);
12     void paintEvent(QPaintEvent *);
13     void mousePressEvent(QMouseEvent *);
14     void mouseMoveEvent(QMouseEvent *);
15 private:
16     TrackBarCallBack *callBack;
17     int start;//数值范围起点
18     int end;//数值范围终点
19     int position;
20     bool mousedown;
21     int widthOfLine;//横线的长度
22 };
23 
24 #endif // TRACKBAR_H

 

trackbar.cpp

 1 #include "trackbar.h"
 2 #include <QWidget>
 3 #include <QPainter>
 4 #include <QMouseEvent>
 5 
 6 TrackBar::TrackBar(TrackBarCallBack *callBack, int width, int height, int start, int end):QWidget()
 7 {
 8     this->callBack=callBack;
 9     this->start = start;
10     this->end = end;
11     this->setMinimumSize(width,height);
12     this->setMaximumSize(width,height);
13     this->position = end;//竖线的位置，标识亮度的数值
14     this->mousedown = false;//为了实现拖动效果，先判断是否点下了鼠标，然后鼠标移动才有效
15 }
16 
17 void TrackBar:: mouseReleaseEvent(QMouseEvent *event){
18     this->mousedown=false;//鼠标放下后，鼠标移动不再具有拖动效果
19     int pos=event->x();
20     if(pos<5)//减5是因为显示的时候为了好看左边从5的位置开始显示，当作刻度0
21         position = start;
22     else if(pos>(widthOfLine+5))
23         position = end;
24     else{
25         double ratio = 1.0 * (pos - 5) / widthOfLine;
26         position = (end - start) * ratio + start;
27     }
28     update();//触发重绘操作，生成paintEvent事件
29 
30     callBack->callBack(position);//回调函数
31 }
32 
33 
34 void TrackBar::paintEvent(QPaintEvent *){
35     QPainter p(this);
36     p.setPen(QPen(Qt::lightGray, 5));//写字用的这个字体，先用这个字体获取字的像素大小
37     int widthOfTitle = 5 + 1.2 * p.fontMetrics().width(QString::number(-end));//最右显示数字需要的大小，加负号防止出现负数(-100~100)
38     int w =width() - widthOfTitle;
39     widthOfLine = w -5;
40     p.setPen(Qt::lightGray);
41     p.drawLine(QPoint(5,height()/2),QPoint(w,height()/2));//中间的横线
42     p.setPen(QPen(Qt::lightGray, 5));
43     double ratio = 1.0 * (position - start)/(end - start);
44     if(ratio < 0){
45         ratio = -ratio;
46     }
47     int posX = (w - 5) * ratio + 5;
48     p.drawLine(QPoint(posX,10),QPoint(posX,height()-10));//竖线，标识亮度数值的位置
49     int heightOfTitle = p.fontMetrics().height();
50     p.drawText(w+5,height()/2 + heightOfTitle/2,QString::number(position));//写文字的y坐标是文字的底部坐标
51 }
52 
53 void TrackBar:: mousePressEvent(QMouseEvent *){
54     this->mousedown=true;//鼠标按下，之后鼠标移动操作产生拖动效果
55 }
56 
57 void TrackBar::mouseMoveEvent(QMouseEvent *event){//鼠标移动事件，是否是拖动需要判断是否鼠标按下了
58     if(mousedown==false)
59         return;
60     //下面的跟鼠标释放操作是一样的
61     int pos=event->x();
62     if(pos<5)//减5是因为显示的时候为了好看左边从5的位置开始显示，当作刻度0
63         position = start;
64     else if(pos>(widthOfLine+5))
65         position = end;
66     else{
67         double ratio = 1.0 * (pos - 5) / widthOfLine;
68         position = (end - start) * ratio + start;
69     }
70     update();//触发重绘操作，生成paintEvent事件
71 }
72 
73 void TrackBar::setPosition(int position){
74     this->position = position;
75 }

 

 

使用滑动条&测试

 1 #ifndef MAINWINDOW_H
 2 #define MAINWINDOW_H
 3 
 4 #include <QMainWindow>
 5 #include "trackbarcallback.h"
 6 #include "trackbar.h"
 7 
 8 namespace Ui {
 9 class MainWindow;
10 }
11 
12 class MainWindow : public QMainWindow,public TrackBarCallBack
13 {
14     Q_OBJECT
15 
16 public:
17     explicit MainWindow(QWidget *parent = 0);
18      void callBack(int value);
19     ~MainWindow();
20 
21 private:
22     Ui::MainWindow *ui;
23     TrackBar *trackBar;
24 };
25 
26 #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,400,40,-100,100);
    trackBar->setWindowTitle(QString("正负数值设置"));
    trackBar->show();
}

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

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