Qt学习之使用QSlider设计一个滑动安全验证（拼图）

似末

已于 2022-03-19 21:54:51 修改

阅读量1.6k

点赞数 7

分类专栏： Qt学习文章标签： c++ qt 安全验证滑块验证

于 2022-03-08 01:24:00 首次发布

本文链接：https://blog.csdn.net/wmcy123/article/details/123342870

版权

Qt学习专栏收录该内容

19 篇文章 18 订阅

订阅专栏

一、前言

本文为自定义一个滑动验证窗口类的介绍，避免枯燥的输入验证码，通过滑块验证，优化用户体验。

二、效果图

程序运行的动态图如下图所示：

通过鼠标滑动最下方的滑动条，拼图上的缺块也会随之移动，直至缺块填补上了图片缺口之后，鼠标释放，验证成功。

三、源码

以下是封装的一个滑块验证窗口类。

1.头文件

该类继承于QWidget，主要用到一个QSlider和两个QLabel，QSlider为滑动条，QLabel用来加载拼图和缺块图片。

bool类型的state用于存放是否验证成功标志。

void imageMove()函数用于控制图片移动，也就是缺块图片实时跟随滑动条移动。

void imageStop()函数用于判断鼠标释放后，缺块图片是否处在拼图的缺口之中，如果在的话就验证成功，不在的话进度条和缺块图片都回归初始位置。

#include <QWidget>
#include <QLabel>
#include <QSlider>

class demo : public QWidget
{
    Q_OBJECT
public:
    explicit demo(QWidget *parent = 0);
    static bool state;

private:
    QSlider *varificationSlider;//滑动条
    QLabel *varificationLab1,*varificationLab2;//用于放置图片

signals:

public slots:
    void imageMove();
    void imageStop();
};

2.cpp文件

在构造函数主要做验证窗口的初始化，初始化QSlider和QLabel，以及绑定对应的信号槽。

#include "demo.h"
#include <QIcon>
#include <QDebug>
#include <QMessageBox>

bool demo::state = false;

demo::demo(QWidget *parent) : QWidget(parent)
{
    this->setWindowTitle("安全验证");
    this->setWindowIcon(QIcon(":/image/提示.png"));
    this->setFixedSize(420,400);
    this->setWindowModality(Qt::ApplicationModal);//阻塞除当前窗体外的其他所有窗体
    //滑动条
    varificationSlider=new QSlider(this);
    varificationSlider->setOrientation(Qt::Horizontal);
    varificationSlider->setRange(0,310);//设置滑动条value的范围
    varificationSlider->setGeometry(20,360,380,20);
    //滑动条样式表设计
    varificationSlider->setStyleSheet("QSlider:handle{border-image:url(:/image/Slider.png);width: 15px;}"
                                      "QSlider:handle:hover{border-image:url(:/image/Slider_hover.png);width: 15px;}"
                                      "QSlider:groove{border: 1px solid #999999;}"
                                      "QSlider:add-page{background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 #bcbcbc, "
                                      "stop:0.25 #bcbcbc, stop:0.5 #bcbcbc, stop:1 #bcbcbc);}"
                                      "QSlider:sub-page{background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0 #D1E9FE, "
                                      "stop:0.25 #D1E9FE, stop:0.5 #D1E9FE, stop:1 #D1E9FE);}");
    connect(varificationSlider,SIGNAL(sliderMoved(int)),this,SLOT(imageMove()));//滑块移动触发信号
    connect(varificationSlider,SIGNAL(valueChanged(int)),this,SLOT(imageMove()));//滑动条的值发生改变触发信号
    connect(varificationSlider,SIGNAL(sliderReleased()),this,SLOT(imageStop()));//鼠标释放触发信号

    varificationLab1=new QLabel(this);
    varificationLab1->setPixmap(QPixmap(":/image/noon.jpg").scaled(380,292));//最大的图片
    varificationLab1->setGeometry(20,50,380,292);

    varificationLab2=new QLabel(this);
    varificationLab2->setPixmap(QPixmap(":/image/slider_noon.png").scaled(66,66));//缺口图片
    varificationLab2->setGeometry(25,240,66,66);
    varificationLab2->raise();

    //验证提示
    QLabel *tipLab=new QLabel("拖动下方滑块完成拼图",this);
    tipLab->setGeometry(20,0,350,50);
    tipLab->setStyleSheet("font:14pt; font-family:'微软雅黑'");
}

//缺块图片移动槽函数
void demo::imageMove()
{
    //控制缺块图片水平移动
    this->varificationLab2->move(25+this->varificationSlider->value(),this->varificationLab2->y());
}

//鼠标释放进行验证
void demo::imageStop()
{
    int ret=this->varificationSlider->value();
    //滑动条的值在某个范围内（可自行设定）  对应缺块图片正好拼接上原图
    if(ret>=252 && ret<=257)
    {
        demo::state = true;
        QMessageBox msgBox;
        msgBox.setStyleSheet("QMessageBox QLabel{min-width: 350px; "
                             "min-height: 100px;font:16pt; font-family:'楷体';}");
        msgBox.setText("验证成功！");
        msgBox.setWindowTitle("安全验证");
        msgBox.setWindowIcon(QIcon(":/image/提示.png"));
        msgBox.exec();
        this->varificationSlider->setValue(0);
        this->varificationLab2->move(25+this->varificationSlider->value(),this->varificationLab2->y());
        this->close();
    }
    else  //不在这个范围内  则滑块和缺块图片回归原位
    {
        this->varificationSlider->setValue(0);
        this->varificationLab2->move(25+this->varificationSlider->value(),this->varificationLab2->y());
    }
}

四、主函数测试

实例化一个滑动窗口类，并且调用show（）函数显示窗口。测试结果如文章开头所示。

#include "demo.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    demo w;
    w.show();

    return a.exec();
}