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)
{
}

 

滑動條類：

trackbar.h

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

class TrackBar: public QWidget
{
public:
    TrackBar(TrackBarCallBack *callBack, int width=390, int height=40, int start=0, int end=100);
    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是因為顯示的時候為了好看左邊從5的位置開始顯示，當作刻度0
        position = start;
    else if(pos>(widthOfLine+5))
        position = end;
    else{
        double ratio = 1.0 * (pos - 5) / widthOfLine;
        position = (end - start) * ratio + start;
    }
    update();//觸發重繪操作，生成paintEvent事件

    callBack->callBack(position);//回調函數
}


void TrackBar::paintEvent(QPaintEvent *){
    QPainter p(this);
    p.setPen(QPen(Qt::lightGray, 5));//寫字用的這個字體，先用這個字體獲取字的像素大小
    int widthOfTitle = 5 + 1.2 * p.fontMetrics().width(QString::number(-end));//最右顯示數字需要的大小，加負號防止出現負數(-100~100)
    int w =width() - widthOfTitle;
    widthOfLine = w -5;
    p.setPen(Qt::lightGray);
    p.drawLine(QPoint(5,height()/2),QPoint(w,height()/2));//中間的橫線
    p.setPen(QPen(Qt::lightGray, 5));
    double ratio = 1.0 * (position - start)/(end - start);
    if(ratio < 0){
        ratio = -ratio;
    }
    int posX = (w - 5) * ratio + 5;
    p.drawLine(QPoint(posX,10),QPoint(posX,height()-10));//豎線，標識亮度數值的位置
    int heightOfTitle = p.fontMetrics().height();
    p.drawText(w+5,height()/2 + heightOfTitle/2,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是因為顯示的時候為了好看左邊從5的位置開始顯示，當作刻度0
        position = start;
    else if(pos>(widthOfLine+5))
        position = end;
    else{
        double ratio = 1.0 * (pos - 5) / 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 = 0);
     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,400,40,-100,100);
    trackBar->setWindowTitle(QString("正負數值設置"));
    trackBar->show();
}

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

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