QT开发（二）—— 信号与槽，编写登录页面UI

Qt的UI很多门道，也需要自己去画，这里我就不多BB了，直接写一个登录页面的简单逻辑，大家看完应该会有所了解，毕竟这是很基础的东西，我们一步步来

信号与槽，其实就想是个点击事件，so easy , 他有两种实现方式，一种用ui来操作，这也是Qt的一个特色，一种就是代码实现了，我们先来说下简单的步骤吧！

一.信号与槽

假设我们有一个登录的按钮Button，他的objectName为btn_login，那我们为它写一个信号，就是用到connect()这个函数了

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

不用紧张，我们简单来看下这行代码。这个函数有四个参数，分别是：

谁发信号
发什么信号
谁槽接收
槽内操作

可以看到，我这行代码的第一个参数是ui->btn_login，他就是那个发信号的，紧接着是发什么信号，这个是系统自带的，我这里选择的是点击事件，系统每个控件都有信号，button的信号如下：

这里写图片描述

我们具体的到后面也会一点点的讲解，然后第三个参数就是本类来处理这个信号了，也就是this,第四个参数，是我们需要定义一个函数来处理，相当于点击事件的回调，这里注意的是我们需要在头文件中定义这个函数：

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

好了，这样就Ok了

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

嗯嗯，看起来就是这么简单，需要解绑的话只需要调用disconnect，参数和connect参数是一样的，多写一遍罢了

第二种UI的创建信号与槽的方式就太简单了，右键这个控件

这里写图片描述

扫描二维码关注公众号，回复： 188155 查看本文章

选择转为槽然后弹出你要选择的信号

这里写图片描述

然后会为我们在头文件和源文件中自动生成函数，但是这里要注意的就是UI创建的信号会没有connect函数哦

那我们现在创建一个空工程来实现登录UI的基本逻辑吧

二.登录功能

我们创建一个新工程，然后去绘制一些基本的UI，这个我就不教了，你自己去画就好了

这里写图片描述

这里我选择用UI的方式去实现信号与槽，用UI的方式很方便，来看下代码

#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

在头文件中，编译器为我们生成了三个槽函数，在看我们的源文件

#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("登录成功");
        }
    }
}

这里实际上很简单，也就是我们去写三个函数的逻辑罢了，大家稍微看一下便知道是如何实现了，看下效果

这里写图片描述

好了，我们下一篇再见吧！