13 登录框

13.1 需求分析

设计并实现一个用户登录对话框。界面中包括两个单行编辑框，分别用于输入用户名和密码。编辑框的下面有OK和Cancel两个按钮。点击OK按钮，检查用户输入的用户名和密码是否为“tarena”和“123456”。若是则在调试信息中打印“登录成功”并退出程序，否则弹出消息框，提示用户“用户名或密码错误”。点击Cancel按钮，弹出消息框，询问用户“您确定要取消登录吗？”。该消息框带有Yes和No两个按钮，如果用户选择Yes，则在调试信息中打印“取消登录”并退出程序。

13.2 创建项目

通过QtCreator，在C:\Users\Minwei\Projects\Qt路径下，创建名为Login的项目。

13.3 设计界面

C:\Users\Minwei\Projects\Qt\Login\logindialog.ui：

xxxxxxxxxx
86
1
<?xml version="1.0" encoding="UTF-8"?>
2
<ui version="4.0">
3
 <class>LoginDialog</class>
4
 <widget class="QDialog" name="LoginDialog">
5
  <property name="geometry">
6
   <rect>
7
    <x>0</x>
8
    <y>0</y>
9
    <width>188</width>
10
    <height>97</height>
11
   </rect>
12
  </property>
13
  <property name="windowTitle">
14
   <string>登录</string>
15
  </property>
16
  <layout class="QVBoxLayout" name="m_layoutVer">
17
   <item>
18
    <layout class="QGridLayout" name="m_layoutGrid">
19
     <item row="0" column="0">
20
      <widget class="QLabel" name="m_labUsername">
21
       <property name="text">
22
        <string>用户名：</string>
23
       </property>
24
      </widget>
25
     </item>
26
     <item row="0" column="1">
27
      <widget class="QLineEdit" name="m_editUsername"/>
28
     </item>
29
     <item row="1" column="0">
30
      <widget class="QLabel" name="m_labPassword">
31
       <property name="text">
32
        <string>密码：</string>
33
       </property>
34
      </widget>
35
     </item>
36
     <item row="1" column="1">
37
      <widget class="QLineEdit" name="m_editPassword">
38
       <property name="echoMode">
39
        <enum>QLineEdit::Password</enum>
40
       </property>
41
      </widget>
42
     </item>
43
    </layout>
44
   </item>
45
   <item>
46
    <layout class="QHBoxLayout" name="m_layoutHor">
47
     <item>
48
      <spacer name="m_spacerLeft">
49
       <property name="orientation">
50
        <enum>Qt::Horizontal</enum>
51
       </property>
52
       <property name="sizeHint" stdset="0">
53
        <size>
54
         <width>40</width>
55
         <height>20</height>
56
        </size>
57
       </property>
58
      </spacer>
59
     </item>
60
     <item>
61
      <widget class="QDialogButtonBox" name="m_btnBox">
62
       <property name="standardButtons">
63
        <set>QDialogButtonBox::Cancel|QDialogButtonBox::Ok</set>
64
       </property>
65
      </widget>
66
     </item>
67
     <item>
68
      <spacer name="m_spacerRight">
69
       <property name="orientation">
70
        <enum>Qt::Horizontal</enum>
71
       </property>
72
       <property name="sizeHint" stdset="0">
73
        <size>
74
         <width>40</width>
75
         <height>20</height>
76
        </size>
77
       </property>
78
      </spacer>
79
     </item>
80
    </layout>
81
   </item>
82
  </layout>
83
 </widget>
84
 <resources/>
85
 <connections/>
86
</ui>

13.4 实现功能

C:\Users\Minwei\Projects\Qt\Login\logindialog.h：

xxxxxxxxxx
27
1
#ifndef LOGINDIALOG_H
2
#define LOGINDIALOG_H
3

4
#include <QDialog>
5

6
QT_BEGIN_NAMESPACE
7
namespace Ui { class LoginDialog; }
8
QT_END_NAMESPACE
9

10
class LoginDialog : public QDialog
11
{
12
    Q_OBJECT
13

14
public:
15
    LoginDialog(QWidget *parent = nullptr);
16
    ~LoginDialog();
17

18
private slots:
19
    void on_m_btnBox_accepted();
20
    void on_m_btnBox_rejected();
21

22
private:
23
    Ui::LoginDialog *ui;
24
};
25

26
#endif // LOGINDIALOG_H
27

C:\Users\Minwei\Projects\Qt\Login\logindialog.cpp：

xxxxxxxxxx
40
1
#include <QDebug>
2
#include <QMessageBox>
3

4
#include "logindialog.h"
5
#include "ui_logindialog.h"
6

7
LoginDialog::LoginDialog(QWidget *parent)
8
    : QDialog(parent)
9
    , ui(new Ui::LoginDialog)
10
{
11
    ui->setupUi(this);
12
}
13

14
LoginDialog::~LoginDialog()
15
{
16
    delete ui;
17
}
18

19
void LoginDialog::on_m_btnBox_accepted()
20
{
21
    if (ui->m_editUsername->text() == "tarena" &&
22
        ui->m_editPassword->text() == "123456")
23
    {
24
        qDebug() << "登录成功";
25
        this->close();
26
    }
27
    else
28
        QMessageBox::critical(this, windowTitle(), "用户名或密码错误",
29
            QMessageBox::Ok);
30
}
31

32
void LoginDialog::on_m_btnBox_rejected()
33
{
34
    if (QMessageBox::question(this, windowTitle(), "您确定要取消登录吗？",
35
        QMessageBox::Yes | QMessageBox::No) == QMessageBox::Yes)
36
    {
37
        qDebug() << "取消登录";
38
        this->close();
39
    }
40
}

13.5 测试验证

运行效果如图所示：