第3篇 Qt5基础（三）Qt登录对话框

最新推荐文章于 2024-10-08 22:32:37 发布

l小尹

最新推荐文章于 2024-10-08 22:32:37 发布

阅读量1k

点赞数

分类专栏： QT学习文章标签： qt ui 开发语言

原文链接：https://www.qter.org/portal.php?mod=view&aid=29&page=1

版权

QT学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章原创于Qt开源社区（www.qter.org），作者yafeilinux，

ui界面和纯代码编写登录对话框设计

文章原创于Qt开源社区（www.qter.org），作者yafeilinux，

一、使用设计模式创建界面

在新建的logindialog.ui中完成下列操作！！

1.新建Qt Widgets Application，项目名称为login，类名和基类保持MainWindow和QMainWindow不变。
2.完成项目创建后，向项目中添加新的Qt设计师界面类，模板选择Dialogwithout Buttons，类名更改为LoginDialog。完成后向界面上添加两个标签Label、两个行编辑器Line Edit和两个按钮Push Button，设计界面如下图所示。
在这里插入图片描述

3-1登录对话框设计界面.png

3.先选中用户名后面的行编辑器部件，然后在属性编辑器中将其objectName属性更改为usrLineEdit，如下图所示。下面依次更改其他部件的objectName属性，密码后面的行编辑器为pwdLineEdit，登录按钮为loginBtn，退出按钮为exitBtn。

3-2修改objectName.png

4.下面使用另外一种信号和槽的关联方法来设置退出按钮。在设计模式下方的信号和槽编辑器（Signals & Slots Editor）中，先点击左上角的绿色加号添加关联，然后选择发送者为exitBtn，信号为clicked()，接收者为LoginDialog，槽为close()。如下图所示。这样，当单击退出按钮时，就会关闭登录对话框。

在这里插入图片描述

3-3信号和槽编辑器中设置关联.png

5.右击登录按钮，在弹出的菜单中选择“转到槽…”，然后选择clicked()信号并确定。转到相应的槽以后，添加函数调用：

void LoginDialog::on_loginBtn_clicked()
{
    accept();
}

6.下面到main.cpp文件，更改内容如下：

#include "mainwindow.h"
#include "logindialog.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
   LoginDialog dlg;
   if(dlg.exec()==QDialog::Accepted)
   {
       w.show();
       return a.exec();
   }
   else return 0;

}

7.这时运行程序，按下退出按钮会退出程序，按下登录按钮会关闭登录对话框，并显示主窗口。

二、登录设置

1.下面添加代码来实现使用用户名和密码登录，这里只是简单将用户名和密码设置为了固定的字符串，如果以后学习了数据库，还可以通过读取数据库来获取用户名和密码。到logindialog.cpp文件中将登录按钮的单击信号对应的槽的代码更改为：

#include "logindialog.h"
#include "ui_logindialog.h"
#include <QMessageBox>
LoginDialog::LoginDialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::LoginDialog)
{
    ui->setupUi(this);
}

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

void LoginDialog::on_loginBtn_clicked()
{
    //判断用户名和密码是否正确，若错误弹出警告对话框
    //QString类的trimmed()函数来实现，它可以去除字符串前后的空白字符。输入用户名，在前面添加了一个空格,保证输入是正确的
    if(ui->usrLineEdit_2->text().trimmed()==tr("yinmuze")&& ui->pwLlineEdit->text()==tr("123456"))
    {
        accept();
    }else
    {
        QMessageBox::warning(this,tr("警告！"),tr("用户名或密码错误！"),QMessageBox::Yes);
        //清空内容并定位光标
        ui->usrLineEdit_2->clear();
        ui->pwLlineEdit->clear();
        ui->usrLineEdit_2->setFocus();//把光标定位至用户名处
    }
}

QMessageBox类提供了多种常用的对话框类型，比如这里的警告对话框，还有提示对话框、问题对话框等。这里使用了静态函数来设置了一个警告对话框，这种方式很便捷，其中的参数依次是：this表明父窗口是登录对话框、窗口标题、界面显示的内容和最后要显示的按钮，这里使用了一个Yes按钮。注意还要添加该类的头文件包含，即：#include 。
2.下面运行程序，如果输入用户名为“yafeilinux”，密码为“123456”，那么可以登录，如果输入其他的字符，则会弹出警告对话框，如下图所示。
在这里插入图片描述
3.对于输入的密码，我们常见的是显示成小黑点的样式。下面点击logindialog.ui文件进入设计模式，然后选中界面上的密码行编辑器，在属性编辑器中将echoMode属性选择为Password。这时再次运行程序，可以看到密码显示已经改变了。如下图所示。
在这里插入图片描述
除了在属性编辑器中进行更改，也可以在loginDialog类的构造函数中使用setEchoMode(QLineEdit::Password)函数来设置。
4.在行编辑器的属性栏中还可以设置占位符，就是没有输入信息前的一些提示语句。例如将密码行编辑器的placeholderText属性更改为“请输入密码”，将用户名行编辑器的更改为“请输入用户名”，运行效果如下图所示。
在这里插入图片描述

在这里插入图片描述
5.对于行编辑器，还有一个问题就是，比如我们输入用户名，在前面添加了一个空格，这样也可以保证输入是正确的，这个可以使用QString类的trimmed()函数来实现，它可以去除字符串前后的空白字符。下面将logindialog.cpp文件中登录按钮单击信号槽函数中的判断代码更改为：

if(ui->usrLineEdit->text().trimmed() == tr("yafeilinux")
            && ui->pwdLineEdit->text() == tr("123456"))

6.最后，当登录失败后，我们希望可以清空用户名和密码信息，并将光标定位到用户名输入框中。这个可以通过在判断用户名和密码错误后添加相应的代码来实现：

else {
QMessageBox::warning(this, tr("警告！"),
                     tr("用户名或密码错误！"),
                     QMessageBox::Yes);
// 清空内容并定位光标
ui->usrLineEdit->clear();
ui->pwdLineEdit->clear();
ui->usrLineEdit->setFocus();
}

使用ui界面时的代码03_login

logindialog.h

#ifndef LOGINDIALOG_H
#define LOGINDIALOG_H

#include <QDialog>

namespace Ui {
class LoginDialog;
}

class LoginDialog : public QDialog
{
    Q_OBJECT

public:
    explicit LoginDialog(QWidget *parent = nullptr);
    ~LoginDialog();

private slots:
    void on_loginBtn_clicked();

private:
    Ui::LoginDialog *ui;
};

#endif // LOGINDIALOG_H

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

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

private slots:
    void on_exitBtn_clicked();

    void on_loginBtn_clicked();

private:
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

logindialog.cpp

#include "logindialog.h"
#include "ui_logindialog.h"
#include <QMessageBox>
LoginDialog::LoginDialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::LoginDialog)
{
    ui->setupUi(this);
}

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

void LoginDialog::on_loginBtn_clicked()
{
    //判断用户名和密码是否正确，若错误弹出警告对话框
    //QString类的trimmed()函数来实现，它可以去除字符串前后的空白字符。输入用户名，在前面添加了一个空格,保证输入是正确的
    if(ui->usrLineEdit_2->text().trimmed()==tr("yinmuze")&& ui->pwLlineEdit->text()==tr("123456"))
    {
        accept();
    }else
    {
        QMessageBox::warning(this,tr("警告！"),tr("用户名或密码错误！"),QMessageBox::Yes);
        //清空内容并定位光标
        ui->usrLineEdit_2->clear();
        ui->pwLlineEdit->clear();
        ui->usrLineEdit_2->setFocus();//把光标定位至用户名处
    }
}

main.cpp

#include "mainwindow.h"
#include "logindialog.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
   LoginDialog dlg;
   if(dlg.exec()==QDialog::Accepted)
   {
       w.show();
       return a.exec();
   }
   else return 0;

}

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

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

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

三纯代码编写03_login_Code

新建Qt Widgets Application，项目名称为login1，在类信息页面保持类名和基类为MainWindow和QMainWindow不变，取消选择创建界面选项，如下图所示。

在这里插入图片描述
2. 创建登录对话框类。往项目中添加新文件，模板选择C++分类中的C++ Class，如下图所示。

在类定义页面，将类名设置为LoginDialog，基类选择Custom定制，然后手动设置为QDialog。如下图所示。

logindialog.h

先添加了QDialog类的头文件，然后前置声明了QLabel、QLineEdit和QPushButton类，这是因为在下面只是定义了这些类对象的指针，并不需要该类完整的定义，所以可以将它们的包含语句放到源文件中进行。
在LoginDialog类声明的开始需要添加Q_OBJECT宏才能使用信号和槽等元对象系统功能。
在private部分定义了一些界面上需要的部件对象的指针。

#ifndef LOGINDIALOG_H
#define LOGINDIALOG_H
#include<QDialog>

class QLabel;
class QLineEdit;
class QPushButton;//类的前置声明

class LoginDialog : public QDialog
{
    Q_OBJECT //使用信号和槽等特性必须添加该宏

public:
    explicit LoginDialog(QWidget *parent=0);
    ~LoginDialog();

private:    //定义一些部件对象的指针
    QLabel    *usrLabel;
    QLabel    *pwdlabel;
    QLineEdit *usrLineEdit;
    QLineEdit *pwdLineEdit;
    QPushButton *loginBtn;
    QPushButton *exitBtn;

private slots:
    void login();//声明槽
};

#endif // LOGINDIALOG_H

logindialog.cpp

**setPlaceholderText()**是设置占位符文本。

#include "logindialog.h"
#include <QLabel>
#include <QLineEdit>
#include <QPushButton>
#include <QMessageBox>


LoginDialog::LoginDialog(QWidget *parent)://构造函数
    QDialog(parent)
{
    usrLabel = new QLabel(this);
    usrLabel->move(70,80);
    usrLabel->setText(tr("用户名："));
    usrLineEdit = new QLineEdit(this);
    usrLineEdit->move(140,80);
    usrLineEdit->setPlaceholderText(tr("请输入用户名"));//设置占位符文本

    pwdlabel = new QLabel(this);
    pwdlabel->move(70,130);
    pwdlabel->setText(tr("密码："));
    pwdLineEdit = new QLineEdit(this);
    pwdLineEdit->move(140,130);
    pwdLineEdit->setPlaceholderText(tr("请输入密码"));
    pwdLineEdit->setEchoMode(QLineEdit::Password);//设置密码显示样式（黑点）

    loginBtn = new QPushButton(this);
    loginBtn->move(50,200);
    loginBtn->setText(tr("登录"));
    exitBtn = new QPushButton(this);
    exitBtn->move(210,200);
    exitBtn->setText("退出");
//connect(发射信号的部件，&发射的信号，接收信号的部件，&要执行的槽(需要对非标准槽进行定义，在.h函数中声明
    connect(loginBtn,&QPushButton::clicked,this,&LoginDialog::login);
    connect(exitBtn,&QPushButton::clicked,this,&LoginDialog::close);
}
LoginDialog::~LoginDialog(){}  //析构函数

void LoginDialog::login()
{
    //判断用户名和密码是否正确，若错误弹出警告对话框
    if(usrLineEdit->text().trimmed()==tr("yinmuze")&& pwdLineEdit->text()==tr("123456"))
    {
        accept();
    }else
    {
        QMessageBox::warning(this,tr("警告！"),tr("用户名或密码错误！"),QMessageBox::Yes);
        //清空内容并定位光标
        usrLineEdit->clear();
        pwdLineEdit->clear();
        usrLineEdit->setFocus();//把光标定位至用户名处
    }
}

main.cpp

#include "mainwindow.h"
#include"logindialog.h"
#include <QApplication>#include<QDialog>
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
   LoginDialog dlg;
   if (dlg.exec()==QDialog::Accepted)
   {
       w.show();
       return a.exec();
    }
   else return 0;
}

3、实现功能
首先在logindialog.h文件的类声明的最后添加如下代码：

private slots:
    void login();

   这样便声明了一个槽，其实槽就是一个函数，一般使用slots关键字，但在Qt 5新关联语法下也可以不使用该关键字，那么就可以像声明一般函数一样来声明槽，具体的内容我们将在后面章节中讲解，这里大家有个印象即可，一般建议使用slots关键字。
   下面打开logindialog.cpp文件，在构造函数的最后添加如下图所示的两行代码。

//connect(发射信号的部件，&发射的信号，接收信号的部件，&要执行的槽(需要对非标准槽进行定义，在.h函数中声明
    connect(loginBtn,&QPushButton::clicked,this,&LoginDialog::login);
    connect(exitBtn,&QPushButton::clicked,this,&LoginDialog::close);

第一个参数就是发射信号的部件，比如这里的loginBtn按钮；第二个参数是发射的信号，比如这里是QPushButton类的单击clicked()信号；第三个参数是接受信号的部件，比如这里是this即本部件也就是LoginDialog；第四个参数是要执行的槽，比如这里是LoginDialog类的login()。使用connect()函数就相当于以前在设计模式进行的关联设置。

在logindialog.cpp文件最后添加槽的定义

void LoginDialog::login()
{
    //判断用户名和密码是否正确，若错误弹出警告对话框
    if(usrLineEdit->text().trimmed()==tr("yinmuze")&& pwdLineEdit->text()==tr("123456"))
    {
        accept();
    }else
    {
        QMessageBox::warning(this,tr("警告！"),tr("用户名或密码错误！"),QMessageBox::Yes);
        //清空内容并定位光标
        usrLineEdit->clear();
        pwdLineEdit->clear();
        usrLineEdit->setFocus();//把光标定位至用户名处
    }
}