2023.04.26 QT 制作登录界面

一、代码部分

1. 头文件

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QLabel>
#include <QLineEdit>
#include <QPushButton>
#include <QDebug>
#include <QMessageBox>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

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

private slots:
    void on_cancelBtn_clicked();   //取消按钮对应的槽函数

    void my_slot();

private:
    Ui::Widget *ui;

    QLabel *l1;         //标签1，设置上方背景图
    QLabel *l2;         //标签2，用户名图标
    QLabel *l3;         //标签3，密码图标

    QLineEdit *le1;     //编辑器1，输入用户名
    QLineEdit *le2;     //编辑器2，输入密码

    QPushButton *b1;    //按钮1，登录
    QPushButton *b2;    //按钮2，取消
};
#endif // WIDGET_H

2. 源文件

#include "widget.h"
#include "ui_widget.h"

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

    //登录界面相关设置
    this->setFixedSize(540,375);    //设置界面为固定大小
    this->setWindowTitle("MIAO");   //设置标题
    this->setWindowIcon(QIcon(":/cat/login.webp")); //设置窗口图标

    //标签相关设置（背景，用户，密码图标）
    l1 = new QLabel(this);         //实例化标签，给定父组件
    l1->move(0,0);             //设置标签位置
    l1->resize(540,170);        //设置标签尺寸
    l1->setScaledContents(true); //设置图片自适应标签大小
    l1->setPixmap(QPixmap(":/cat/logo.webp"));//设置图片
    l2 = new QLabel(this);
    l2->move(115,200);
    l2->resize(30,30);
    l2->setScaledContents(true);
    l2->setPixmap(QPixmap(":/cat/user.jpg"));
    l3 = new QLabel(this);
    l3->move(115,250);
    l3->resize(30,30);
    l3->setScaledContents(true);
    l3->setPixmap(QPixmap(":/cat/passwd.png"));

    //编辑器相关设置（用户，密码输入）
    le1 = new QLineEdit(this);     //实例化标签，给定父组件
    le1->move(150,200);             //设置编辑器位置
    le1->resize(280,35);          //设置编辑器大小
    le1->setPlaceholderText("用户名/账号/邮箱");  //设置占位文本
    le2 = new QLineEdit(this);
    le2->move(150,250);
    le2->resize(280,35);
    le2->setPlaceholderText("密码");
    le2->setEchoMode(QLineEdit::Password); //设置密文模式

    //按钮相关设置（登录，取消）
    b1 = new QPushButton("登录",this);    //实例化按钮，给定文本内容和父组件
    b1->move(240,300);              //设置按钮位置
    b1->resize(80,30);          //设置尺寸
    b2 = new QPushButton("取消",this);
    b2->move(350,300);
    b2->resize(80,30);

    //将按钮1的clicked信号，连接到自定义的槽函数中
    connect(b1,&QPushButton::clicked,this,&Widget::my_slot);

    //将按钮2的clicked信号，连接到自定义的槽函数中
    connect(b2,&QPushButton::clicked,this,&Widget::on_cancelBtn_clicked);
}

Widget::~Widget()
{
    delete ui;
}
//取消按钮2对应的槽函数
void Widget::on_cancelBtn_clicked()
{
    //属性版本完成
    QMessageBox box(QMessageBox::Question,"询问","您是否确定要退出登录",QMessageBox::Yes|QMessageBox::No);
    int ret = box.exec();    //执行对话框
    if(ret == QMessageBox::Yes)
    {
        this->close();      //关闭框
    }
}
//自定义的处理b1的槽函数
void Widget::my_slot()
{
    if(QString("admin") == le1->text() && QString("123456") == le2->text())
    {
        //使用QMessageBox实例化对象，并调用有参构造
        QMessageBox box(QMessageBox::Information,     //图标
                        "状态",                        //对话框标题
                        "登陆成功",                   //对话框内容
                        QMessageBox::Yes, //对话框提供的按钮
                        this);                          //父组件
        //调用exec使其进入运行状态
        int ret = box.exec();        //定义变量接受用户点击的按钮

        //对按钮进行判断
        if(ret == QMessageBox::Yes)
        {
            this->close();          //关闭登录框
        }
    }
    else
    {
        QMessageBox::StandardButton btn = QMessageBox::critical(this,
                                                                "状态",
                                                                "账号和密码不匹配，是否重新登录",
                                                                QMessageBox::Yes|QMessageBox::No);
        //对用户点击的按钮进行判断
        if(btn == QMessageBox::Yes)
        {
            le2->clear();           //清空密码
        }else if(btn == QMessageBox::No)
        {
            this->close();          //关闭登录框
        }
    }

}

二、运行结果

1. 登录界面

2. 点击取消按钮，弹出一个问题对话框，询问"是否确定要退出登录",给出两个按钮，Yes|No,用户点击Yes后，关闭界面，用户点击No后，继续回到登录界面

3. 当账号和密码（admin，123456）验证失败，则弹出错误对话框，给出信息"账号和密码不匹配，是否重新登录"，并给出两个按钮Yes | No,用户点击Yes后，返回到登录界面，并清空密码输入框中的内容。用户点击No后，直接关闭登录界面

3. 点击登录按钮，当账号和密码验证成功，弹出信息对话框，给出信息"登录成功"，给出按钮yes，用户点击yes后，发射一个自定义信号后关闭登录界面