[Qt] 利用Qt原生widget实现滑动验证

作者：admin，发布日期：2021-04-06
阅读：1006；评论：0

写在开头

通过Qt的QPaint，我们可以直接在界面上绘制图形，再通过鼠标事件，获取到鼠标的状态和位置，配合这些信息实现界面的绘制和实现，下面展示代码。

具体代码

具体过程可参考注释

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
#include <QDebug>
#include <QKeyEvent>
#include <QPaintEvent>
#include <QPainter>
#include <QMessageBox>

QT_BEGIN_NAMESPACE
namespace Ui { class Dialog; }
QT_END_NAMESPACE

class Dialog : public QDialog
{
    Q_OBJECT

public:
    Dialog(QWidget *parent = nullptr);
    ~Dialog();

protected:
//    重写三个需要的事件
    void mouseMoveEvent(QMouseEvent *event);
    void mouseReleaseEvent(QMouseEvent *event);
    void paintEvent(QPaintEvent *event);

private:
    Ui::Dialog *ui;
//    鼠标所在的x,也就是滑块的位置
    int mouseX;
};
#endif // DIALOG_H

dialog.cpp

#include "dialog.h"
#include "ui_dialog.h"

Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
    , ui(new Ui::Dialog)
{
    ui->setupUi(this);
}

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

void Dialog::mouseMoveEvent(QMouseEvent *event)
{
//    输出鼠标的位置
    qDebug()<<event->x();
//    存储鼠标当前所在位置
    int eventX = event->x();
//    如果鼠标没有在滑块地方则返回
    if(mouseX == 0 && eventX >= 30){
        return;
    }
//    存储mouseX
    mouseX = eventX;
//    防止滑块超出界面
    if(mouseX > this->width()){
        mouseX = this->width();
    }
//    强制重绘
    this->repaint();
}

void Dialog::mouseReleaseEvent(QMouseEvent *event)
{
//    qDebug()<<"release";
//    鼠标放开时滑块重新回到起点
    mouseX = 0;
//    强制重绘
    this->repaint();
}

void Dialog::paintEvent(QPaintEvent *event)
{
//    判断滑块位置
    if(mouseX >= this->width() - 30){
        QMessageBox::information(this,"验证结果","验证通过了!");
        mouseX = 0;
    }
//    开始绘制
    QPainter painter(this);
    painter.drawText(this->width()/ 2,15,"请通过滑动验证");
//    绘制滑块
    painter.fillRect(mouseX,0,30,30,QBrush(QColor::fromRgb(255,0,0)));
//    绘制划过的路径
    painter.fillRect(0,0,mouseX,30,QBrush(QColor::fromRgb(0,255,0)));
    qDebug()<<"repaint";
}

界面设计

效果图