6、Qt5基础设计器实现登录对话框

1、项目中添加新的Qt设计师界面类，模板选择Dialogwithout Buttons，类名更改为LoginDialog。完成后向界面上添加两个标签Label、两个行编辑器Line Edit和两个按钮Push Button，设计界面如下图所示。

更改空间的Name

用户文本框：usrLineEdit

密码文本框：pwdLineEdit

登录按钮：loginBtn

退出按钮：exitBtn

2、退出按钮设置信号和槽关联

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

3、设置登录按钮的信号和槽

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

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

4、更改main.cpp文件

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

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

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

5、设置用户名和密码限制

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

#include "logindialog.h"
#include "ui_logindialog.h"
#include"qmessagebox.h"

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

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

void LoginDialog::on_loginBtn_clicked()
{
        // 判断用户名和密码是否正确，
        // 如果错误则弹出警告对话框
        if(ui->usrLineEdit->text() == tr("root") &&
               ui->pwdLineEdit->text() == tr("123"))
        {
           accept();
        } else {
           QMessageBox::warning(this, tr("警告！"),
                       tr("用户名或密码错误！"),
                       QMessageBox::Yes);
        }
}

用户名和密码错误时：

Qt中的QMessageBox类提供了多种常用的对话框类型，比如这里的警告对话框，还有提示对话框、问题对话框等。这里使用了静态函数来设置了一个警告对话框，这种方式很便捷，其中的参数依次是：this表明父窗口是登录对话框、窗口标题、界面显示的内容和最后要显示的按钮，这里使用了一个Yes按钮。注意还要添加该类的头文件包含，即：#include 。

5、设置密码显示的方式

在属性编辑器中将echoMode属性选择为Password。
在loginDialog类的构造函数中使用setEchoMode(QLineEdit::Password)函数来设置

6、在文本框中设置提示信息

例如将密码行编辑器的placeholderText属性更改为“请输入密码”，将用户名行编辑器的更改为“请输入用户名”，运行效果如下图所示。

7、清除用户输入的空格

使用QString类的trimmed()函数来实现，它可以去除字符串前后的空白字符

 if(ui->usrLineEdit->text().trimmed() == tr("root") &&
               ui->pwdLineEdit->text().trimmed() == tr("123"))

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

void LoginDialog::on_loginBtn_clicked()
{
        // 判断用户名和密码是否正确，
        // 如果错误则弹出警告对话框
        if(ui->usrLineEdit->text().trimmed() == tr("root") &&
               ui->pwdLineEdit->text().trimmed() == tr("123"))
        {
           accept();
        } else {
           QMessageBox::warning(this, tr("警告！"),
                       tr("用户名或密码错误！"),
                       QMessageBox::Yes);
           //清空输入，光标定位
           ui->usrLineEdit->clear();
           ui->pwdLineEdit->clear();
           ui->usrLineEdit->setFocus();
        }
}

6、Qt5基础 设计器实现登录对话框

猜你喜欢

6、Qt5基础设计器实现登录对话框