使用Qt设计美观的登录与注册界面

省流模式：如果只想要成品，点击下方链接直接下载Login项目，导入到Qt5中可直接使用。如果想要学习设计流程可以继续往下看。

https://github.com/TDDou/Qt-logon-screen-.git

前言

主要是为完成学校的智能密码锁实训项目而制作的前端应用，用到的是Qt5，很多地方还不够完善，但是对于界面的设计个人认为还算较为美观，在这里我主要描述一下界面的设计。

同时项目已经上传到了github上，可点击下方链接免费下载。总共有两个文件，一个为PasswordLock，是我们学校本次实训做的完整应用（包含SQLite数据库以及TCP网络通信的应用），文件较多，大家感兴趣可以看一下。另一个是Login文件，该文件中只包含登录与注册界面的设计，也是本文章所整理的项目，推荐大家下载Login文件进行扩展设计。

https://github.com/TDDou/Qt-logon-screen-.git

一、效果图

先来看看效果图：

二、登录界面

2.1 新建项目。

点击左上角新建项目，选择Application模板就好，然后取个名字选择创建的路径。之后的基类选择“QMainWindow”，然后一直点击“下一步”即可。

2.2添加资源文件

添加一个资源文件，用于存放我们的图片资源。在左侧项目名称上右击鼠标，选择“Add New”，然后如下图操作

之后输入一个名称，在这里我取为“images”，然后等待其添加完成，之后点击“Add Rrefix”添加前缀：

然后将我们提前准备好的图片文件全部复制到我们的项目目录下。之后点击“Add Files”，选择我们刚才复制进去的所有文件。添加进去以后，一定要点击保存（Ctrl+s）！！然后我们就可以在上方的显示栏中看到我们加入的图片。

2.3登录界面设计

（1）拖入部件。

双击mainwindow.ui文件转到设计模式，调整一下默认属性。可以将menubar以及statusbar组件右击鼠标删除，也可以不删除，看个人喜好。在这里我进行了删除，因为个人比较喜欢简洁的界面（其实可以在新建项目的时候选择QWidget）。之后将其大小设置为780*520（看个人喜好）。

右击设计界面，选择“改变样式表”，然后点击“添加颜色”旁边的小三角，选择“background-color”。选择默认的纯白颜色进行添加。最后点击Apply应用。

然后从左侧拖入一个“Label”组件，将其拉大并放置在合适的位置用于放置图片，如下图所示：

双击其将文本删除。然后在右侧属性栏更改其objectName为“label_image”方便使用。

然后继续拖入两个Label部件、两个LineEdit部件以及两个Pushbutton部件。同样的方法修改部件的objectName，方便后面编程引用。两个LineEdit部件，第一个用来输入用户名，第二个用来输入登录密码。两个Pushbutton部件，一个用来登录，一个用来注册。双击部件修改显示文本，并将其排列如下图：

选中LineEdit部件，在右侧属性栏里找到 placeholderText一栏，输入想要显示的提示文本。效果如下：

对于密码输入框，也可以将echoMode属性改为：Password。这样用户使用时输入的密码就会变成*****格式。

（2）修改样式表

分别选中不同的部件，然后右击鼠标，选择“改变样式表”，将不同组件的样式表代码复制进去

Pushbutton组件样式表：

background-color: qlineargradient(spread:pad, x1:0.52, y1:1, x2:0.54, y2:0,
stop:0.0112994 rgba(64, 145, 252, 255),
stop:1 rgba(255, 255, 255, 255));
color: rgb(255, 255, 255);border:0px groove gray;border-radius:
7px;padding:2px 4px;
font: 14pt "Candara";

LineEdit组件样式表:

background-color: rgb(247, 247, 247);
border:1px groove gray;border-radius:
7px;padding:2px 4px;
font: 10pt "Candara";

对于Label组件只需要改变其字体样式即可，右击部件打开其样式表后，点击“添加字体”，然后选择一款合适的字体，并设置合适的大小，最后点击Apply应用。

在这里我使用的样式表为：
font: 87 20pt "Arial Black";

（3）代码编写

回到mainwindow.cpp文件，用代码将我们提前准备好的图片加入到Label部件上，输入以下代码：

#include <QGraphicsDropShadowEffect>
MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);//设置图片QPixmap *pix = new QPixmap(":/blue.png");QSize sz = ui->label_image->size();ui->label_image->setPixmap(pix->scaled(sz));//设置图片阴影效果QGraphicsDropShadowEffect *shadow = new QGraphicsDropShadowEffect(this);shadow->setOffset(-3, 0);shadow->setColor(QColor("#888888"));shadow->setBlurRadius(30);ui->label_image->setGraphicsEffect(shadow);}

到这里，我们的登录界面基本上完成，可以点击运行查看效果。

2.4 利用SQLite数据库实现登录

以上大致完成了登录界面，但是实现的是有边框的效果（忘写无边框实现了，我太懒了，回头再补）。接下来要进行数据库的创建与连接，从而可以实现真正的登录效果。

（1）首先在.pro文件中加入数据库模块：

（2）在mainwindow.h文件中加入需要用到的头文件以及一个数据库初始化函数的声明：

#include <QSqlDatabase> //数据驱动
#include <QSqlQuery> //数据库执行语句
#include <QMessageBox>//消息盒子
#include <QDebug>
void sqlite_Init();

（3）然后回到mainwindow.cpp文件中，先编写一个数据库初始化函数，每次需要对数据库进行操作的时候都需要先调用它进行初始化。代码如下：

void sqlite_Init()
{QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE");db.setDatabaseName("user.db");if(!db.open()){qDebug()<<"open error";}//create excleQString createsql=QString("create table if not exists user(id integer primary key autoincrement,""username ntext unique not NULL,""password ntext not NULL)");QSqlQuery query;if(!query.exec(createsql)){qDebug()<<"table create error";}else{qDebug()<<"table create success";}
}

（4）双击mainwindow.ui文件打开设计模式，选中登录按钮右击鼠标，选择“转到槽”，然后选择“clicked（）”，然后点击ok。会自动转到槽函数的编写，输入以下代码来实现登录效果：

void MainWindow::on_btn_signin_clicked()
{sqlite_Init();QString username = ui->lineEdit_username->text();QString password = ui->lineEdit_password->text();QString sql=QString("select * from user where username='%1' and password='%2'").arg(username).arg(password);//创建执行语句对象QSqlQuery query(sql);//判断执行结果if(!query.next()){qDebug()<<"Login error";QMessageBox::information(this,"登录认证","登录失败,账户或者密码错误");}else{qDebug()<<"Login success";QMessageBox::information(this,"登录认证","登录成功");//登录成功后可以跳转到其他页面QWidget *w = new QWidget;w->show();this->close();}
}

点击运行按钮，即可看到效果图，由于现在我们还没有实现注册功能，所以现在点击登录按钮一定会提示失败。但是我们可以看到控制台输出：table create success的提示信息，表示我们的数据库以及常见并且成功插入了一张表。我们可以打开本项目生成的Debug目录：

然后可以看到该目录下多了一个user.db文件，即我们创建生成的数据库文件。

到此登录功能基本完成。

三、注册界面

3.1 添加模板

右击左侧项目名称，选择“Add New”，然后选择Qt中的设计师类进行添加，模板选择：Widget。

将其类名改为Signup，然后点击下一步。

3.2 设计界面

（1）拖入部件

打开双击signup.ui文件进入设计模式，拖入六个Label组件、三个LineEdit组件以及两个Pushbutton组件。将其进行排列，同时修改显示实本文以及objectName。

（2）修改样式表：

首先右击设计界面，选择“改变样式表”，然后点击“添加颜色”旁边的小三角，选择“background-color”。选择默认的纯白颜色进行添加，最后点击Apply应用，将背景颜色改为纯白色。

然后选中不同的组件，分别进行样式表的添加。

Pushbutton组件样式表：

background-color: rgb(29, 123, 255);
color: rgb(255, 255, 255);
font: 25 9pt "Bahnschrift Light";

标题Label的样式表：
font: 87 20pt "Arial Black";

输入提示Label的样式表：
font: 10pt "Arial";

（3）代码编写

在sign.cpp文件中设置图片，代码如下：

Signup::Signup(QWidget *parent) :QWidget(parent),ui(new Ui::Signup)
{ui->setupUi(this);//设置图片QPixmap *pix = new QPixmap(":/girl1.png");QSize sz = ui->label_image->size();ui->label_image->setPixmap(pix->scaled(sz));
}

到这里，注册界面的设计基本完成。

3.3 利用SQLite数据库实现注册

（1）实现两个界面的跳转

从登录界面点击“Sign up”按钮可以跳转到注册界面，在注册界面点击“return”按钮可以返回登录界面。

首先在mainwindow.cpp文件中添加头文件“ #include "signup.h" ”，将要跳转的页面包含进来。双击mainwindow.ui文件进入设计模式，选中“Sign up”按钮，右击鼠标，选择“转到槽”，然后会自动跳转到槽函数的编写，输入以下代码：

void MainWindow::on_btn_signup_clicked()
{this->close();Signup *s = new Signup;s->show();
}

然后signup.cpp文件中添加头文件“ #include "mainwindow.h" ”，将要跳转的页面包含进来。双击signup.ui文件进入设计模式，选中“Return login”按钮，右击鼠标，选择“转到槽”，然后会自动跳转到槽函数的编写，输入以下代码：

void Signup::on_btn_return_clicked()
{MainWindow *w = new MainWindow;w->show();this->close();
}

（2）实现注册功能

双击signup.ui文件进入设计模式，选中“Sure”按钮，右击鼠标，选择“转到槽”，然后会自动跳转到槽函数的编写，输入以下代码：

void Signup::on_pushButton_2_clicked()
{sqlite_Init();QString username = ui->lineEdit_username->text();QString password = ui->lineEdit_passwd->text();QString surepass = ui->lineEdit_surepasswd->text();//判断密码是否一致if(password == surepass){QString sql=QString("insert into user(username,password) values('%1','%2');").arg(username).arg(password);//创建执行语句对象QSqlQuery query;//判断执行结果if(!query.exec(sql)){qDebug()<<"insert into error";QMessageBox::information(this,"注册认证","插入失败！");}else{qDebug()<<"insert into success";QMessageBox::information(this,"注册认证","插入成功！");MainWindow *w = new MainWindow;w->show();this->close();}}else{QMessageBox::information(this,"注册认证","两次密码输入不一致");}
}

到这里为止，注册功能也已基本实现。

总结

以上就是使用Qt5实现的登录与注册小应用，但是还存在一些小bug，比如用户名与密码都可以为空。总之，希望能对大家有所帮助。

附录

全部代码：

mainwindow.h文件代码：

#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include <QMainWindow>
#include <QSqlDatabase> //数据驱动
#include <QSqlQuery> //数据库执行语句
#include <QMessageBox>//消息盒子
#include <QDebug>
void sqlite_Init();QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACEclass MainWindow : public QMainWindow
{Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr);~MainWindow();private slots:void on_btn_signin_clicked();void on_btn_signup_clicked();private:Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

mainwindow.cpp文件代码：

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include "signup.h"#include <QGraphicsDropShadowEffect>
MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);QPixmap *pix = new QPixmap(":/blue.png");QSize sz = ui->label_image->size();ui->label_image->setPixmap(pix->scaled(sz));//设置阴影QGraphicsDropShadowEffect *shadow = new QGraphicsDropShadowEffect(this);shadow->setOffset(-3, 0);shadow->setColor(QColor("#888888"));shadow->setBlurRadius(30);ui->label_image->setGraphicsEffect(shadow);//初始化数据库sqlite_Init();
}MainWindow::~MainWindow()
{delete ui;
}void sqlite_Init()
{QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE");db.setDatabaseName("user.db");if(!db.open()){qDebug()<<"open error";}//create excleQString createsql=QString("create table if not exists user(id integer primary key autoincrement,""username ntext unique not NULL,""password ntext not NULL)");QSqlQuery query;if(!query.exec(createsql)){qDebug()<<"table create error";}else{qDebug()<<"table create success";}
}void MainWindow::on_btn_signin_clicked()
{sqlite_Init();QString username = ui->lineEdit_username->text();QString password = ui->lineEdit_password->text();QString sql=QString("select * from user where username='%1' and password='%2'").arg(username).arg(password);//创建执行语句对象QSqlQuery query(sql);//判断执行结果if(!query.next()){qDebug()<<"Login error";QMessageBox::information(this,"登录认证","登录失败,账户或者密码错误");}else{qDebug()<<"Login success";QMessageBox::information(this,"登录认证","登录成功");QWidget *w = new QWidget;w->show();this->close();}
}void MainWindow::on_btn_signup_clicked()
{this->close();Signup *s = new Signup;s->show();
}

signup.h文件代码：

#ifndef SIGNUP_H
#define SIGNUP_H
#include <QWidget>namespace Ui {
class Signup;
}class Signup : public QWidget
{Q_OBJECTpublic:explicit Signup(QWidget *parent = nullptr);~Signup();private slots:void on_pushButton_2_clicked();void on_btn_return_clicked();private:Ui::Signup *ui;
};#endif // SIGNUP_H

signup.cpp文件代码：

#include "signup.h"
#include "ui_signup.h"
#include "mainwindow.h"Signup::Signup(QWidget *parent) :QWidget(parent),ui(new Ui::Signup)
{ui->setupUi(this);QPixmap *pix = new QPixmap(":/girl1.png");QSize sz = ui->label_image->size();ui->label_image->setPixmap(pix->scaled(sz));
}Signup::~Signup()
{delete ui;
}//返回登录按钮
void Signup::on_btn_return_clicked()
{MainWindow *w = new MainWindow;w->show();this->close();
}//注册按钮
void Signup::on_pushButton_2_clicked()
{sqlite_Init();QString username = ui->lineEdit_username->text();QString password = ui->lineEdit_passwd->text();QString surepass = ui->lineEdit_surepasswd->text();//判断密码是否一致if(password == surepass){QString sql=QString("insert into user(username,password) values('%1','%2');").arg(username).arg(password);//创建执行语句对象QSqlQuery query;//判断执行结果if(!query.exec(sql)){qDebug()<<"insert into error";QMessageBox::information(this,"注册认证","插入失败！");}else{qDebug()<<"insert into success";QMessageBox::information(this,"注册认证","插入成功！");MainWindow *w = new MainWindow;w->show();this->close();}}else{QMessageBox::information(this,"注册认证","两次密码输入不一致");}
}

Qt设计精美的登录注册界面（包含SQLite数据库应用）相关推荐

用Qt设计一款单词本软件，采用SQLite数据库
运行结果运行逻辑开发背景源代码运行结果运行逻辑程序启动后,显示单词本界面作为主窗口,同时从SQLite数据库中读取数据显示成列表. 用户可以点击几个按钮打开几个子窗口,进行增删查改等操作. ...
右侧按钮登录注册html,翻转式用户登录注册界面设计
这是一款非常实用的翻转式用户登录注册界面设计效果.该用户登录注册界面使用纯CSS3来制作,在用户点击登录和注册两个按钮时,登录和注册界面可以以水平翻转的方式来回切换,效果非常的酷. 制作方法 HTML ...
【Vue作业]---Vue登录注册界面
1.引言你是否有过相关设计结课作业,课程设计无处下手,网页要求的总数量太多?没有合适的模板?数据库,java,python,vue,html作业复杂工程量过大?毕设毫无头绪等等一系列问题.你想要解决 ...
Lance老师UI系列教程第三课-QQ登录注册界面的实现（android-2012最新版）
分类: android UI教程2012-08-06 22:37 3731人阅读评论(6) 收藏举报 uiandroidqqlayoutbutton UI系列教程第三课:腾讯登录注册界面的实现今 ...
AndroidStudio实现用户登录注册界面代码（一）
首先使用Android Studio的布局文件xml实现界面设计第一步:新建工程项目MyAPP 选择Empty Activity 点击"下一步" 1.在res/layout/ac ...
Android用户登录注册界面
用户登录注册界面开发及用户信息管理案例详解刚开始接触Android编程,这算是我写的第一个简单工程,主要功能有:用户登录.注册.注销.修改密码.记住密码共5个基本操作,其内容涉及到以下几点: 1:B ...
安卓登录注册界面开发(附源码)
源码下载和博客访问:安卓登录注册界面开发(附源码) 前言最近找安卓登录注册界面,找了好久也没找到比较满意的设计,最后想想其实登录和注册两个界面也不复杂,干脆花点时间自己弄. 界面预览最后的效果如下 ...
小编程（三）：用户登录注册界面开发及用户信息管理案例代码详解
用户登录注册界面开发及用户信息管理案例详解刚开始接触Android编程,这算是我写的第一个简单工程,主要功能有:用户登录.注册.注销.修改密码.记住密码共5个基本操作,其内容涉及到以下几点: 1:B ...
php mysql注册登录界面_php实现登录注册界面
php实现登录注册界面首先你要搭建一个自己的数据库我用wamp64创了一个people的数据库具体操作可以参考该搭建链接: 这里就讲下我实现的功能代码: 创建sql.func.php实现一些基本 ...
Android开发：登录/注册界面的编写
目录新建一个空项目(或Activity) 在xml中绘制登录界面关掉ActionBar 运行(最终效果图) 后记在实际开发中,几乎所有的APP都会涉及到用户注册/登录页面的制作,因此本文以And ...

Qt设计精美的登录注册界面（包含SQLite数据库应用）