QT development (2) - signals and slots, writing login page UI

Qt's UI has many ways, and you also need to draw it yourself. I won't have much BB here. I will directly write a simple logic of the login page. You should understand it after reading it. After all, this is a very basic thing. Let's take it step by step.

Signals and slots are actually like a click event, so easy. There are two ways to implement them. One is to use ui to operate, which is also a feature of Qt, and the other is to implement code. Let's talk about the simple steps Bar!

1. Signals and slots

Suppose we have a login button Button, whose objectName is btn_login, then we write a signal for it, which is to use the connect() function

    //信号与槽 谁 什么信号 谁 去接收
    connect(ui->btn_login,SIGNAL(clicked(bool)),this,SLOT(loginFun()));

Don't worry, let's take a brief look at this line of code. This function has four parameters, namely:

• who is signaling
• what signal
• who slot receives
• In-slot operation

It can be seen that the first parameter of my line of code is ui->btn_login, he is the one that sends the signal, and then what signal is sent, this is the system's own, I choose the click event here, the system every time Each control has a signal, and the button's signal is as follows:

We will explain it a little bit later, and then the third parameter is this class to process this signal, that is, this, the fourth parameter is that we need to define a function to handle it, which is equivalent to the callback of the click event , note here that we need to define this function in the header file:

//槽函数的声明方式
private slots:
    void loginFun();

Okay, that's it

void MainWindow::loginFun()
{
    qDebug() << "登录成功";
}

Hmm, it seems that simple. If you need to unbind, you only need to call disconnect. The parameters are the same as the connect parameters. Just write it again.

The second way of creating signals and slots in the UI is too simple, right-click the control

Select Turn to Slot and pop up the signal you want to choose

Then it will automatically generate functions for us in the header file and source file, but it should be noted here that the signal created by the UI will not have a connect function.

So let's create an empty project now to implement the basic logic of logging in to the UI.

2. Login function

Let's create a new project, and then draw some basic UI, I won't teach this, you can just draw it yourself

Here I choose to use the UI method to implement signals and slots. It is very convenient to use the UI method. Let's take a look at the code.

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

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

//槽函数
private slots:

    void on_et_name_textChanged(const QString &arg1);

    void on_et_password_textChanged(const QString &arg1);

    void on_btn_login_clicked();

private:
    Ui::MainWindow *ui;
};

#endif // MAINWINDOW_H

In the header file, the compiler generates three slot functions for us, looking at our source file

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

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

MainWindow::~MainWindow()
{
    delete ui;
}
//账号
void MainWindow::on_et_name_textChanged(const QString &arg1)
{
    if(arg1.length() < 11)
    {
        this->ui->tv_tips->setText("错误：账号小于11位");
    }
    else
    {
         this->ui->tv_tips->setText("错误：账号大于11位");
    }
}
//密码
void MainWindow::on_et_password_textChanged(const QString &arg1)
{
     if(arg1.length() < 6)
     {
        this->ui->tv_tips->setText("错误：密码不能小于6位");
     }
}
//登录按钮
void MainWindow::on_btn_login_clicked()
{
    QString name = this->ui->et_name->text();
    QString password = this->ui->et_password->text();
    if(name.length() == 0 && password.length())
    {
        this->ui->tv_tips->setText("账号密码不能为空");
        return;
    }
    if(name == "lgl")
    {
        if(password == "123456")
        {
            this->ui->tv_tips->setText(" ");
            this->ui->tv_title->setText("登录成功");
        }
    }
}

It's actually very simple here, that is, we write the logic of the three functions. You can see how it is implemented after a little look. Let's take a look at the effect.

Alright, see you next time!