【Ubuntu】QT框架0基础开发教学：带软键盘的登录注册用户系统

        

目录

1.创建QT工程

2.QT的UI界面简单使用

3.QT资源文件添加

4.添加背景图片

5.多界面切换

 6.实践操作：登录注册界面的设计

（1）登录界面

（2）注册界面

（3）控制界面

（4）软键盘设计

（5）效果演示

---

        大家可以自行去下载QT以及QT creator，直接在官网或者国内镜像源下载都可以，我这里使用的是比较老的QT5.5

1.创建QT工程

        打开Shell界面，依次输入下面指令

mkdir opt/qtDemo

cd /opt/qtDemo

      点击New Project，按照下面步骤进行

这里选择编译方式，还不需要上板子，所以不用arm-linux

点击完成后，可以看到如下界面

然后配置工程属性

---

2.QT的UI界面简单使用

        

双击qmenu.ui进入界面后，将边框去掉。

另一个副控按钮objectName改为menu_sLamp_bt

在qmenu.cpp文件中的qMenu函数中，将按键初始态变为灰色，添加下面代码

这里是给按钮添加槽函数，即点击按钮后，需要执行的逻辑

运行后，可以通过按下按键控制显示不同背景以及标题

---

3.QT资源文件添加

        我们可以把我们需要用到的一些资源文件放到shareWin文件内，详情见以下文章

【Ubuntu】平台开发安装使用、Shell命令操作以及实践程序开发

        譬如，我们在window下的shareWin中放了一个qImage.zip文件，就依次输入下面命令

cd /opt/qtDemo/qKeyLed   //进入当前工程目录

cp /mnt/hgfs/shareWin/qImage/zip ./ 复制文件到当前目录

unzip qImage.zip //解压

---

4.添加背景图片

        

在border-image前限定QMainWindow，即背景图片只添加在主窗口

直接运行即可

---

5.多界面切换

        执行后，可以看到login界面先出现，点击进入按键后，可以看到弹出menu界面，login界面则隐藏起来了。

        大家可以自行练习，在menu界面中，添加多一个按键，编写代码，实现点击menu界面新增按键可以返回login界面，然后menu界面关闭。

---

 6.实践操作：登录注册界面的设计

我们可以预先创建这些文件：

---

（1）登录界面

        

        修改这些控件的id，这里将用户名的编辑框改成username_edit，密码编辑改成password_edit

包括按钮也是，修改成自己想要命名的id。   

     代码如下所示，大家可以根据自己的需要修改：

login.h

#ifndef LOGIN_H
#define LOGIN_H

#include <QMainWindow>
#include<QDialog>
#include<QLineEdit>
#include"keyboard.h"


namespace Ui {
class login;
}

class login : public QMainWindow
{
    Q_OBJECT

public:
    explicit login(QWidget *parent = 0);
    ~login();
    KeyBoard key;
    bool eventFilter(QObject*obj,QEvent *e) override;


private slots:
    void on_comfirm_bt_clicked();

    void on_cancel_bt_clicked();
    void showKeyboard();

    void on_pushButton_clicked();

    void on_btnjianpan_clicked();

private:
    Ui::login *ui;
    QString adusername ;
    QString adpassword ;
    bool checkCredentials(const QString &username, const QString &password);
};
extern QLineEdit *le;

#endif // LOGIN_H

login.cpp

#include "login.h"
#include "ui_login.h"
#include "QDebug"
#include <QMessageBox>
#include "control.h"
#include <QProcess>
#include "newregister.h"
#include <QDir>
QLineEdit *le = NULL; // 定义并初始化为 null

login::login(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::login),
    adusername("lujunhong"),
    adpassword("123456")
{
    ui->setupUi(this);

    qApp->installEventFilter(this);

    ui->username_edit->setPlaceholderText("请输入账号");
    ui->username_edit->setClearButtonEnabled(true);

    ui->password_edit->setPlaceholderText("请输入密码");
    ui->password_edit->setClearButtonEnabled(true);
    ui->password_edit->setEchoMode(QLineEdit::Password);

    connect(ui->username_edit, &QLineEdit::selectionChanged, this, &login::showKeyboard);
    connect(ui->password_edit, &QLineEdit::selectionChanged, this, &login::showKeyboard);
}

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

void login::showKeyboard()
{
    QProcess::startDetached("onboard");
}

bool login::checkCredentials(const QString &username, const QString &password)//确认输入的用户名和密码是在文件内的
{
    QString filePath = QDir::currentPath() + "/info.txt";//在当前工程目录下的info.txt
    QFile file(filePath);

    if (!file.open(QIODevice::ReadOnly | QIODevice::Text)) {
        QMessageBox::warning(this, tr("错误"), tr("无法打开文件进行读取"));
        return false;
    }

    QTextStream in(&file);
    while (!in.atEnd()) {
        QString line = in.readLine();
        QStringList parts = line.split(":");
        if (parts.size() == 2) {
            QString storedUsername = parts[0].trimmed();
            QString storedPassword = parts[1].trimmed();
            if (username == storedUsername && password == storedPassword) {
                file.close();
                return true;
            }
        }
    }

    file.close();
    return false;
}

void login::on_comfirm_bt_clicked()//确认按钮
{
    QString username = ui->username_edit->text();
    QString password = ui->password_edit->text();
    qDebug()<<"username:"<<ui->username_edit->text()<<"password"<<ui->password_edit->text();
    bool check_username = ui->username_edit->text().isEmpty();
    bool check_password = ui->password_edit->text().isEmpty();
    if(check_username||check_password)
    {
        QMessageBox::warning(this,tr("警告信息"),tr("用户名或密码不能为空！"));
        return;
    }

    if((username == adusername&&password == adpassword)||checkCredentials(username, password))
    {
        QMessageBox::information(this,"信息","登录成功");
        control * l = new control();
        l->show();
        this->hide();
    }
    else
    {
        QMessageBox::critical(this,"错误信息","用户名或密码错误 ");
    }


}

void login::on_cancel_bt_clicked()
{
    this->close();
}

void login::on_pushButton_clicked()//注册按钮
{
    newregister * n = new newregister();
    n->show();
    this->hide();
}

bool login::eventFilter(QObject*obj,QEvent *e)//选中编辑框的逻辑
{
    if(e->type()==QEvent::FocusIn)
    {
        if(obj == ui->username_edit){le = ui->username_edit;}
        if(obj == ui->password_edit){le = ui->password_edit;}
    }
    QObject::eventFilter(obj,e);
}

void login::on_btnjianpan_clicked()//软键盘
{
    key.exec();
}

---

（2）注册界面

跟上面的登录界面是相同的原理

newregister.h

#ifndef NEWREGISTER_H
#define NEWREGISTER_H

#include <QMainWindow>

namespace Ui {
class newregister;
}

class newregister : public QMainWindow
{
    Q_OBJECT

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

private slots:
    void on_pushButton_2_clicked();

private:
    Ui::newregister *ui;
    void saveCredentials(const QString &username, const QString &password);
};

#endif // NEWREGISTER_H

newregister.cpp

#include "newregister.h"
#include "ui_newregister.h"
#include "QFile"
#include "QDir"
#include <QString>
#include <QTextStream>
#include <QMessageBox>
#include <QDebug>
#include"login.h"
newregister::newregister(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::newregister)
{
    ui->setupUi(this);
    ui->setupUi(this);
    ui->new_username_edit->setPlaceholderText("请输入新账号");
    ui->new_username_edit->setClearButtonEnabled(true);
    ui->new_password_edit->setPlaceholderText("请输入新密码");
    ui->new_password_edit->setClearButtonEnabled(true);
    ui->new_password_edit->setEchoMode(QLineEdit::Password);
    connect(ui->pushButton_2, &QPushButton::clicked, this, &newregister::on_pushButton_2_clicked);
}

newregister::~newregister()
{
    delete ui;
}
void newregister::saveCredentials(const QString &username, const QString &password)
{
    QString filePath = QDir::currentPath() + "/info.txt"; // 创建info.txt文件
    qDebug() << "Saving credentials to: " << filePath; // 输出文件保存路径
    qDebug()<<"new username"<<ui->new_username_edit->text()<<"new password"<<ui->new_password_edit->text();
    QFile file(filePath);
    // 如果文件不存在，则创建它
    if (!file.exists()) {
        if (!file.open(QIODevice::WriteOnly | QIODevice::Text)) {
            QMessageBox::warning(this, tr("错误"), tr("无法创建文件"));
            return;
        }
        file.close();
    }

    // 以追加模式打开文件并写入数据
    if (!file.open(QIODevice::Append | QIODevice::Text)) {
        QMessageBox::warning(this, tr("错误"), tr("无法打开文件进行写入"));
        return;
    }

    QTextStream out(&file);
    out << username << ":" << password << "\n";
    file.close();
}

void newregister::on_pushButton_2_clicked()
{
    QString username = ui->new_username_edit->text();
    QString password = ui->new_password_edit->text();

    if (username.isEmpty() || password.isEmpty())
      {
         QMessageBox::warning(this, tr("警告信息"), tr("用户名和密码不能为空！"));
         return;
      }

        saveCredentials(username, password);
        QMessageBox::information(this, tr("注册成功"), tr("新用户注册成功！"));

       login * l = new login();
       l->show();
        this->close();
}

---

（3）控制界面

        可以在这里为按钮添加icon，这些按钮的id也经过修改，大家可以根据我的代码看到，例如第一个灯的按钮就是control_led1_bt

control.h

#ifndef CONTROL_H
#define CONTROL_H

#include <QMainWindow>

namespace Ui {
class control;
}

class control : public QMainWindow
{
    Q_OBJECT

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

private slots:

    void on_control_led1_bt_clicked();

    void on_control_led2_bt_clicked();

    void on_control_fan1_bt_clicked();

    void on_control_fan2_bt_clicked();

    void on_control_back_bt_clicked();

private:
    Ui::control *ui;
    bool led1_flag;
    bool led2_flag;
    bool fan1_flag;
    bool fan2_flag;
};

#endif // CONTROL_H

control.cpp

#include "control.h"
#include "ui_control.h"
#include "login.h"

control::control(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::control),
    led1_flag(false), // 初始化为 true，表示初始状态为 ON
    led2_flag(false),
    fan1_flag(false),
    fan2_flag(false)

{
    ui->setupUi(this);
    ui->control_led1_bt->setText("OFF"); // 初始状态设置为 OFF
    ui->control_led2_bt->setText("OFF");
    ui->control_fan1_bt->setText("OFF");
    ui->control_fan2_bt->setText("OFF");
}

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

void control::on_control_led1_bt_clicked() // 槽函数名称应与按钮的对象名称一致
{
    // 切换状态并更新按钮文本
    led1_flag = !led1_flag;
    if (led1_flag)
    {
        ui->control_led1_bt->setText("ON");
    }
    else
    {
        ui->control_led1_bt->setText("OFF");
    }
}

void control::on_control_led2_bt_clicked()
{
    led2_flag = !led2_flag;
    if (led2_flag)
    {
        ui->control_led2_bt->setText("ON");
    }
    else
    {
        ui->control_led2_bt->setText("OFF");
    }
}

void control::on_control_fan1_bt_clicked()
{
    fan1_flag = !fan1_flag;
    if (fan1_flag)
    {
        ui->control_fan1_bt->setText("ON");
    }
    else
    {
        ui->control_fan1_bt->setText("OFF");
    }
}

void control::on_control_fan2_bt_clicked()
{
    fan2_flag = !fan2_flag;
    if (fan2_flag)
    {
        ui->control_fan2_bt->setText("ON");
    }
    else
    {
        ui->control_fan2_bt->setText("OFF");
    }
}

void control::on_control_back_bt_clicked()
{
    login *w = new login();
    this->hide();
    w->show();
}

---

（4）软键盘设计

自己设计的软键盘比较丑，方式也比较笨，大家当作简单参考即可，可以自己修改出更好的效果。

首先创建这么个Grid layout，设置ui界面的大小，再把这个layout布局放上去框住。

Ps：这里我也写了调用系统自带的键盘，但后面可能会上arm板子，那时候就需要自己写的键盘在编译在上面。

keyboard.h

#ifndef KEYBOARD_H
#define KEYBOARD_H
#include<QLineEdit>
#include <QDialog>
extern QLineEdit *le;

namespace Ui {
class KeyBoard;
}

class KeyBoard : public QDialog
{
    Q_OBJECT

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

private:
    Ui::KeyBoard *ui;
public slots:
    void key_clicked();

};

#endif // KEYBOARD_H

keyboard.cpp

#include "keyboard.h"
#include "ui_keyboard.h"
#include <QLineEdit>
#include <QPushButton>

extern QLineEdit *le; // 外部声明

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

    QString keys = "!-@-#-$-%-^-&-*-(-)-1-2-3-4-5-6-7-8-9-0-Q-W-E-R-T-Y-U-I-O-P-A-S-D-F-G-H-J-K-L-:-Z-X-C-V-B-N-M-,-<=-关闭";
    QStringList keylist = keys.split(QRegExp("-"));
    int row = 0;
    int col = 0;

    for (int i = 0; i < keylist.count(); ++i)
    {
        QPushButton *b = new QPushButton(keylist[i]);
        b->setFixedSize(30, 30);
        connect(b, &QPushButton::clicked, this, &KeyBoard::key_clicked);
        ui->gridLayout->addWidget(b, row, col);

        ++col;
        if (col == 10)
        {
            col = 0;
            ++row;
        }
    }
}

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

void KeyBoard::key_clicked()
{
    QPushButton *button = qobject_cast<QPushButton*>(sender());
    if (!button)
        return;

    QString key = button->text();

    if (key == "<=")
    {
        if (le)
            le->backspace();
    }
    else if (key == "关闭")
    {
        this->close();
    }
    else
    {
        if (le)
            le->setText(le->text() + key);
    }
}

---

（5）效果演示

系统自带的软键盘

自己写的软键盘，注意，点击keyboard前需要先把光标点击在编辑框，否则会找不到光标

        大家觉得这篇文章有用的话，可以给我点赞、收藏！后面会继续出一些教程类的文章，教大家如何自己动手完善一个项目！