【Qt学习】实现登录注册界面绘制

企业开发 2022-05-09 12:29:13 阅读次数: 0

题目：模仿QQ做登录、注册界面

版本：Qt5

目录

一、效果 

1.登录界面

2.注册界面

二、部分功能介绍

1.小眼睛

2.验证码

3.复选框

三、源代码展示

1.登录界面代码

2.注册界面代码

一、效果 

1.登录界面

2.注册界面

二、部分功能介绍

1.小眼睛

鼠标放上去：

鼠标移动开：

2.验证码

点击可变化

3.复选框

这边主要用到QCheckBox来进行实现

#include <QCheckBox>

以上功能文末附相关参考文章

三、源代码展示

1.登录界面代码

源代码：.cpp

#include "widget.h"
#include "indexwidget.h"
#include <QMessageBox>
#include "RegisterWidget.h"
#include "DB_Operation.h"
#include <QByteArray>
#include <QCryptographicHash>
#include <QDebug>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    this->resize(QSize(748,600));

    QValidator * input=new QIntValidator(100,1000000,this);

    //设置窗口的标题
    this->setWindowTitle("登录界面");

    //设置窗口的起始位置和大小
    this->setFixedSize(800,600);

    //设置窗口左上角的图标
    this->setWindowIcon(QIcon(QPixmap(":/image/qq登录.png")));

    //账号编辑框
    this->EdtAC=new QLineEdit(this);
    this->EdtAC->setGeometry(285,270,300,50);
    this->EdtAC->setPlaceholderText("请输入账号");
    this->EdtAC->setValidator(input);

    //密码编辑框
    this->EdtPW =new QLineEdit(this);
    this->EdtPW->setGeometry(285,350,300,50);
    this->EdtPW->setPlaceholderText("请输入密码");

    this->EdtPW->setValidator(input);
    this->EdtPW->setEchoMode(QLineEdit::Password);

    /*
    //验证码编辑框
    this->EdtYZ =new QLineEdit(this);
    this->EdtYZ->setGeometry(305,505,150,50);
    this->EdtYZ->setPlaceholderText("请输入验证码");
    this->EdtYZ->setValidator(input);
    */

    //小眼睛
    this->eye = new QLabel(this);
    this->eye->setAlignment(Qt::AlignCenter);
    this->eye->setPixmap(QPixmap(":/image/眼睛.png"));
    this->eye->setGeometry(540,360,30,30);
    this->eye->installEventFilter(this);

    //复选框
    pRemember_CheckBox  = new QCheckBox(this);
    pRemember_CheckBox->setGeometry(185,430,120,40);
    pRemember_CheckBox->setText(QStringLiteral("自动登录"));
    pAutoLogin_CheckBox = new QCheckBox(this);
    pAutoLogin_CheckBox->setGeometry(345,430,120,40);
    pAutoLogin_CheckBox->setText(QStringLiteral("记住密码"));

    //标签：
    //账号标签
    this->LblAC=new QLabel("账号:",this);
    this->LblAC->setGeometry(220,270,100,50);

    //密码标签
    this->LblPW=new QLabel("密码:",this);
    this->LblPW->setGeometry(220,350,100,50);

    /*
    //验证码标签
    this->LblYZ=new QLabel("验证码:",this);
    this->LblYZ->setGeometry(220,510,100,50);
    */

    //登录按钮
    this->BtnLogin=new QPushButton("登陆",this);
    this->BtnLogin->setStyleSheet("background-color:DeepSkyBlue");
    this->BtnLogin->setGeometry(185,505,400,65);
    //注册按钮
    this->BtnRegister=new QPushButton("注册账号",this);
    this->BtnRegister->setGeometry(30,550,100,40);
    this->BtnRegister->setFlat(true);//（无外框按钮）

    //找回密码按钮
    this->BtnBack=new QPushButton("找回密码",this);
    this->BtnBack->setGeometry(500,430,100,40);
    this->BtnBack->setFlat(true);//（无外框按钮）

    /*
    //验证码
    this->yanzhenma=new Verification(this);
    this->yanzhenma->setGeometry(480,505,100,40);
    */


    connect(this->BtnLogin,SIGNAL(clicked(bool)),this,SLOT(gotoLogining()));
    connect(this->BtnRegister,SIGNAL(clicked(bool)),this,SLOT(gotoRegister()));
}

Widget::~Widget()
{
    delete this->BtnLogin;
    delete this->BtnRegister;
    delete this->EdtAC;
    delete this->EdtPW;
    delete this->EdtYZ;
    delete this->LblAC;
    delete this->LblPW;
    delete this->LblYZ;
}

void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    QPixmap pix;

    //背景设置
    painter.drawPixmap(0,0,width(),height(), QPixmap(":/image/米色背景.png"));

    //图标
    pix.load(":/image/视频.png");
    painter.drawPixmap(185,285,20,20,pix);

    pix.load(":/image/锁.png");
    painter.drawPixmap(185,365,20,20,pix);

    /*
    pix.load(":/image/验证.png");
    painter.drawPixmap(185,525,20,20,pix);
    */

    pix.load(":/image/背景.png");
    painter.drawPixmap(25,15,753,205,pix);

}
void Widget::gotoLogining()
{
    QString AC=this->EdtAC->text();
    QString PW=this->EdtPW->text();
    char* ac=const_cast<char *>(AC.toStdString().c_str());
    QString MD5;
    QByteArray str;
    str=QCryptographicHash::hash(PW.toLatin1(),QCryptographicHash::Md5);
    MD5.append(str.toHex());
    char *pw=const_cast<char *>(MD5.toStdString().c_str());


    if(DB_Operation::LonginDB(ac,pw))
    {
        IndexWidget * idwg =new IndexWidget;
        idwg->show();
        this->hide();
    }
    else
    {
        QMessageBox::information(this,"登录失败","账号或者密码不正确");
    }
/*
    qDebug()<<QData::UserMap.count(AC);
    if(QData::UserMap.count(AC))//若不存在此账号,则结束
    {
        if(!QString::compare(QData::UserMap.value(AC).PW,PW))
        {
            IndexWidget * idwg =new IndexWidget;
            idwg->show();
            this->hide();

        }
        else
        {
            QMessageBox::information(this,"登录失败","密码错误");
        }

    }
    else
    {
        QMessageBox::information(this,"登录失败","不存在此账号");
    }
*/
}

void Widget::gotoRegister()
{
    RegisterWidget * rgtwg = new RegisterWidget;
    rgtwg->show();
    this->hide();
}

bool Widget::eventFilter(QObject *watched, QEvent *event)
{
    switch (event->type()) {
        case QEvent::Enter:
            EdtPW->setEchoMode(QLineEdit::Normal);  //显示密码
            break;
        case QEvent::Leave:
            EdtPW->setEchoMode(QLineEdit::Password);//隐藏密码
            break;
        default:
            break;
    }
    return QWidget::eventFilter(watched, event);
}

 源代码：.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QLabel>
#include <QButtonGroup>
#include <QLineEdit>
#include <QPushButton>
#include <QWidget>
#include <QTextEdit>
#include <QPixmap>
#include <QPainter>
#include <QDebug>
#include "verification.h"
#include <QEvent>
#include <QCheckBox>

class Widget : public QWidget
{
    Q_OBJECT
public:
    Widget(QWidget *parent = 0);
    ~Widget();
    QLabel * LblAC;
    QLabel * LblYZ;
    QLabel * eye;
    QLabel * LblPW;
    QLineEdit * EdtAC;
    QLineEdit * EdtPW;
    QLineEdit * EdtYZ;
    QPushButton * BtnLogin;
    QPushButton * BtnRegister;
    QPushButton * BtnBack;
    QCheckBox * pRemember_CheckBox;
    QCheckBox * pAutoLogin_CheckBox;
    Verification * yanzhenma;

protected:
    void paintEvent(QPaintEvent *);
    bool eventFilter(QObject *watched, QEvent *event);
public slots:
    void gotoLogining();
    void gotoRegister();
};

#endif // WIDGET_H

2.注册界面代码

源代码：.cpp

#include "RegisterWidget.h"
#include "widget.h"
#include "DB_Operation.h"
#include "indexwidget.h"
#include <QMessageBox>
#include <QCryptographicHash>
#include <QDebug>
#include <QIntValidator>
#include "SetupPage.h"

RegisterWidget::RegisterWidget(QWidget *parent) : QWidget(parent)
{
    //this->resize(QSize(1500,600));

    QValidator * input=new QIntValidator(100,1000000,this);

    this->setWindowTitle("新用户注册");

    this->setFixedSize(800,600);

    //设置窗口左上角的图标
    this->setWindowIcon(QIcon(QPixmap(":/image/icon-注册头像.png")));

    this->LblAC=new QLabel("用户账号:",this);
    this->LblAC->setGeometry(100,100,100,50);
    this->LblPW=new QLabel("登录密码:",this);
    this->LblPW->setGeometry(100,180,100,50);
    this->LblPW2=new QLabel("确认密码:",this);
    this->LblPW2->setGeometry(100,260,200,50);

    //验证码标签
    this->LblYZ=new QLabel("验证码:",this);
    this->LblYZ->setGeometry(100,340,100,50);

    this->EdtAC=new QLineEdit(this);
    this->EdtAC->setGeometry(270,100,400,50);
    this->EdtAC->setPlaceholderText("请输入账号         (3~10位以内数字)");
    this->EdtAC->setValidator(input);
    this->EdtPW=new QLineEdit(this);
    this->EdtPW->setGeometry(270,180,400,50);
    this->EdtPW->setEchoMode(QLineEdit::Password);
    this->EdtPW->setPlaceholderText("请输入密码         (内容为3~6位数字)");
    this->EdtPW->setValidator(input);
    this->EdtPW2=new QLineEdit(this);
    this->EdtPW2->setGeometry(270,260,400,50);
    this->EdtPW2->setPlaceholderText("请再次输入密码");
    this->EdtPW2->setEchoMode(QLineEdit::Password);
    this->EdtPW2->setValidator(input);

    //验证码编辑框
    this->EdtYZ =new QLineEdit(this);
    this->EdtYZ->setGeometry(270,340,250,50);
    this->EdtYZ->setPlaceholderText("请输入验证码");
    this->EdtYZ->setValidator(input);

    //验证码
    this->yanzhenma=new Verification(this);
    this->yanzhenma->setGeometry(555,340,100,50);

    this->BtnLogin=new QPushButton("注册并登陆",this);
    this->BtnLogin->setGeometry(180,450,200,80);

    this->returnLogin=new QPushButton("返回登陆页面",this);
    this->returnLogin->setGeometry(400,450,200,80);
    connect(this->BtnLogin,SIGNAL(clicked(bool)),this,SLOT(RegistertoLogin()));
    connect(this->returnLogin,SIGNAL(clicked(bool)),this,SLOT(gotoLogining()));



}

RegisterWidget::~RegisterWidget()
{

}

void RegisterWidget::paintEvent(QPaintEvent *)
{

    QPainter painter(this);
    QPixmap pix;

    //背景设置
    painter.drawPixmap(0,0,width(),height(), QPixmap(":/image/蓝色背景2.png"));

    pix.load(":/image/像素-蜜蜂-01.png");
    painter.drawPixmap(60,110,30,30,pix);

    pix.load(":/image/像素-蜜蜂-01.png");
    painter.drawPixmap(60,190,30,30,pix);

    pix.load(":/image/像素-蜜蜂-01.png");
    painter.drawPixmap(60,270,30,30,pix);

    pix.load(":/image/像素-蜜蜂-01.png");
    painter.drawPixmap(60,350,30,30,pix);


}

void RegisterWidget::gotoLogining()
{
    Widget * login= new Widget;
    login->show();
    this->hide();
}

void RegisterWidget::RegistertoLogin()
{
    QString AC=this->EdtAC->text();
    QString PW=this->EdtPW->text();
    QString PW2=this->EdtPW2->text();
    if(AC.length()<3 || PW.length()<3)
    {
        QMessageBox::information(this,"注册失败","输入的账号或密码不符合要求");
    }
    else if(PW==PW2)
    {
        char * ac=const_cast<char *>(AC.toStdString().c_str());

        QString PWMD5;
        QString passWd=PW;
        QByteArray str;
        str = QCryptographicHash::hash(passWd.toLatin1(),QCryptographicHash::Md5);
        PWMD5.append(str.toHex());
        char * pw=const_cast<char *>(PWMD5.toStdString().c_str());
        qDebug()<<"在注册页面中"<<pw;
        if(DB_Operation::RegisterDB(ac,pw))
        {
            //注册成功并登陆
            QMessageBox::information(this,"注册成功","正在为您登录...");
            DB_Operation::LonginDB(ac,pw);
            SetupPage * idwg =new SetupPage;
            idwg->show();
            this->hide();
        }
        else
        {
            QMessageBox::information(this,"注册失败","已存在此账号");
        }
    }
    else
    {
        QMessageBox::information(this,"注册失败","两次密码输入不一致");
    }

}

源代码：.h

#ifndef REGISTERWIDGET_H
#define REGISTERWIDGET_H

#include <QObject>
#include <QWidget>
#include <QLabel>
#include <QButtonGroup>
#include <QLineEdit>
#include <QPushButton>
#include <QTextEdit>
#include <QPixmap>
#include <QPainter>
#include <QDebug>
#include <QValidator>
#include "verification.h"


class RegisterWidget : public QWidget
{
    Q_OBJECT
public:
    RegisterWidget(QWidget *parent = 0);
    ~RegisterWidget();
    QLabel * LblAC;//账号标签
    QLineEdit * EdtAC;//账号编辑框
    QLabel * LblPW,*LblYZ;//密码标签
    QLineEdit * EdtPW;//密码编辑框
    QLabel * LblPW2;//再次输入密码标签
    QLineEdit * EdtPW2 ,* EdtYZ;//再次输入密码编辑框
    QPushButton * BtnLogin;//注册并登陆
    QPushButton * returnLogin;//返回登陆页面
    Verification * yanzhenma;

protected:
    void paintEvent(QPaintEvent *);
public slots:
    void gotoLogining();
    void RegistertoLogin();
};

class Validato:public QValidator
{


};

#endif // REGISTERWIDGET_H

参考：Qt 之登录界面绘制_C君莫笑的博客-CSDN博客_qt 栅格布局

Qt之自定义验证码控件_C君莫笑的博客-CSDN博客

Qt实现密码输入框隐藏密码_小眼睛显示密码功能_棒棒糖半糖的博客-CSDN博客_qt密码隐藏

猜你喜欢

转载自blog.csdn.net/m0_61745661/article/details/123725108
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022