Qt实现简单登录界面的效果

我们一步一步来

首先先完成登录界面的效果，下面是代码

头文件 widget.h:

#ifndef WIDGET_H
#define WIDGET_H

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

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

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

private:
    Ui::Widget *ui;

    QLabel* label_username;
    QLabel* label_passward;

    QLineEdit* edit_username;
    QLineEdit* edit_passward;

    QPushButton* button;

    QGridLayout* grid_layout;
};
#endif // WIDGET_H

源文件 widget.cpp:

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

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

	// 设置窗口的初始大小为500x400
    this->resize(500, 400);

	// 实例化标签
    label_username = new QLabel("Username:", this);
    
    // 设置标签内字体大小
    label_username->setStyleSheet("font:35px");
    
    // 设置标签内文本信息的对齐方式
    label_username->setAlignment(Qt::AlignRight | Qt::AlignVCenter);

    label_passward = new QLabel("Passward:", this);
    label_passward->setStyleSheet("font:35px");
    label_passward->setAlignment(Qt::AlignRight | Qt::AlignVCenter);

	// 实例化行编辑 QLineEdit
    edit_username = new QLineEdit(this);
    
    // 返回当前的尺寸策略并打印
    qDebug() << edit_username->sizePolicy();
    
    // 设置尺寸策略，水平方向为最小扩展，垂直方向为固定值
    edit_username->setSizePolicy(QSizePolicy::Minimum, QSizePolicy::Fixed);
    
    // 设置控件的最小尺寸
    edit_username->setMinimumHeight(75);
    edit_username->setMinimumWidth(350);

    edit_passward = new QLineEdit(this);
    edit_passward->setSizePolicy(QSizePolicy::Minimum, QSizePolicy::Fixed);
    edit_passward->setMinimumSize(350, 75);

    button = new QPushButton("Log in", this);
    button->setStyleSheet("font:35px");
    button->setMinimumHeight(75);

	// 实例化栅格布局
    grid_layout = new QGridLayout(this);

	// 给布局添加组件，并设置组件在几行几列，第4和第5个整型参数，代表设置组件扩展几行几列
    grid_layout->addWidget(label_username, 0, 0);
    grid_layout->addWidget(label_passward, 1, 0);
    grid_layout->addWidget(edit_username, 0, 1);
    grid_layout->addWidget(edit_passward, 1, 1);
    grid_layout->addWidget(button, 2, 0, 1, 2);
    
    // 设置布局中，列之间的比例关系
    // 当前的比例关系为第0列和第1列的比例关系为1比5
    grid_layout->setColumnStretch(0, 1);
    grid_layout->setColumnStretch(1, 5);
}

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

然后需要判断用户名和密码，如果登录成功，则跳转到一个新的窗口。

进行判断之前，理应先连接按钮的信号和槽。

在widget.h下槽函数的声明：

private slots:
    void buttonSlot();

在widget.cpp下信号和槽的连接代码：

    connect(button, SIGNAL(clicked()),
            this, SLOT(buttonSlot()));

成功连接之后，判断需要登录成功的逻辑。

想要判断用户名和密码，就需要获取用户名和密码的信息。
我们输入的数据是存放在组件lineEdit上的，可以利用该组件的text()方法返回存储的字符串，以QString的形式返回。

获取到字符串之后，再用if判断用户名和密码是否正确。
QString和C++的string功能类似，也可以用运算符对其进行操作，比如==

需要跳转到一个新的窗口，需要新的窗口对象才能事先。
当前的窗口是在main函数里的w对象实例化出来的，我们也可以用类似的方式生成一个新的窗口。
w对象所属的类是Widget，之所以Widget具备窗口的能力，完全是因为其继承了他的基类QWidget

所以，需要一个新的窗口，也可以用QWidget进行。

void Widget::buttonSlot()
{
    QString username = edit_username->text();
    QString passward = edit_passward->text();

    qDebug() << "username:" << username;
    qDebug() << "passward:" << passward;

    if(username == "cys" && passward == "123")
    {
        qDebug() << "log in scucess";

        new_w = new QWidget;
        new_w->resize(300, 700);
        new_w->show();
        this->close();
    }
    else
    {
        qDebug() << "log in fail";
    }
}