续 :嵌入式Linux GUI基础-CSDN博客 https://blog.csdn.net/Eva20192020/article/details/134267345?spm=1001.2014.3001.5502
一、创建QQ登录界面
下面我来做一个简单的QQ登录界面。
我们要用到组件如下:
qlabel组件用来放图片、文本、gif图。
qlinedit组件用来放账号和密码的对话框。
qpushbutton组件用来放账号的按钮。
1. 新建项目QQ
操作同上述 “三、创建一个Qt工程 ” 的第2步内容,这里就不再重复。创建的QQ工程如下图。
2. 创建QQ登录界面
打开ui界面设计文件 “ widget.ui ”,在组件模块选择标签组件Latel,如下图拖拽到设计窗口,并修改内容为QQ登录界面。
再分别选择标签组件Latel,分别改成账号和密码。再分别在账号和密码右边选择组件Line Edit放入。如下图。
下面修改窗体的大小,字体的大小,对齐方式。当然,根据个人喜好与实际需求来进行修改。如下图。
界面设计完后如下图。
运行输入,可以看出,密码是可见的,所以进行下列修改操作,将Normal改成Password,如下图。
3. 修改控件名字
为了方便分析代码,我们要给控件改名字,好利用关联函数,也便于后期维护。
4. 关联信号和槽
信号:信号就是指控件发出的特定的信号。
比如按钮的信号:
槽:槽就是槽函数的意思,我们可以把槽函数绑定在某一个控件的信号上。
自动关联的登录按钮,手动关联的注册打按钮,代码如下图。手动关联使用connect这个函数。
connect(ui->registBt,SIGNAL(clicked()),this,SLOT(registBt_clicked()));
} //手动关联函数
说明:connect(A,SIGNAL(B),C,SLOT(D));
当对象A发出B信号时候,就会触发对象C的槽函数D。
加完图片,运行如下图。
5. 布局
运行后,拖拽界面的大小,可以发现显示不全的问题,因此需要布局,才可以让界面在改变大小的情况下灵活显示。布局很重要,可以保证每一个界面的显示完整与灵活性,而且布局是不影响后台代码的。
步骤一:先两个按钮水平布局,如下图。
步骤二,分别将密码和输入框,账号与输入框进行水平布局。 如下图。
步骤三,将三行水平布局和标题全选中,进行垂直布局。如下图。
步骤四,左右上下分别放置弹簧组件,如下图。
步骤五,选中整个界面 ,出现如下四个角被选中的标记,然后点栅格布局。
运行后出现下图所示结果,在最小界面范围内随意拉动窗体的大小,不影响显示的完整性。
二、创建QQ对话界面
1.添加新界面
上一节已经创建完QQ的登录界面,下面继续创建对话框,如下图,选中QQ项目,右键选中 “添加新文件”,如下图。
生成如下图所示。
2.修改界面属性
打开ui设计界面,如下图。
设置对话框界面的宽和高,如下图所示。
拖拽QToolBox到对话框界面中,删除页2(选中ToolBox对象,右键选择2的页2->删除页),并将page1的对象属性修改为group,如下图。
选中对话框,对DialogList其进行垂直布局,修改QToolBox的currentItemText为群成员,如下图。
选中对话框,修改ToolBox的大小和位置。如下图。
3. 导入资源
导入资源图片参考上一博文:嵌入式Linux GUI基础-CSDN博客 https://blog.csdn.net/Eva20192020/article/details/134267345?spm=1001.2014.3001.5502
添加前缀和文件,导入图片,如下图所示。
4.实现并运行对话框
具体代码操作如下图
main.cpp源代码如下:(其作用是让dialogue进行显示)
#include "dialogue.h"
#include "ui_dialogue.h"
dialogue::dialogue(QWidget *parent) :
QWidget(parent),
ui(new Ui::dialogue)
{
ui->setupUi(this);
setWindowTitle("MyQQ"); //设置标题
setWindowIcon(QPixmap(":/8.webp.jpg"));
//设置图标
}
dialogue::~dialogue()
{
delete ui;
}
dialogue.cpp的源代码如下:
#include "dialogue.h"
#include "ui_dialogue.h"
dialogue::dialogue(QWidget *parent) :
QWidget(parent),
ui(new Ui::dialogue)
{
ui->setupUi(this);
setWindowTitle("MyQQ"); //设置标题
setWindowIcon(QPixmap(":/resource/8.webp.jpg"));
//设置图标
}
dialogue::~dialogue()
{
delete ui;
}
运行如下图所示。
三、登录到对话界面的联动
1.修改widget.cpp源文件
设置widget.cpp源文件,过程如下述截图。
widget.cpp源代码参考如下:
#include "widget.h"
#include "ui_widget.h"
#include "dialogue.h"
Widget::Widget(QWidget *parent) :
QWidget(parent),
ui(new Ui::Widget)
{
ui->setupUi(this);
connect(ui->registBt,SIGNAL(clicked()),this,SLOT(registBt_clicked()));
} //手动关联函数
Widget::~Widget()
{
delete ui;
}
void Widget::on_loginBt_clicked()
{
//qDebug("登录"); //自动关联生成的
dialogue *dia = new dialogue; //声明一个dialogue对象
dia->show(); // 显示对象
}
void Widget::registBt_clicked()
{
qDebug("注册"); //手动关联槽函数的实现
}
2.修改main.cpp源文件
在main.cpp中再次还原显示Widget界面,如下图。
3.运行
运行结果,实现单击 “登录” 按钮跳转到dialogue对话界面。如下图所示。
四、设置用户名和密码联动
打开widget.cpp源文件,进行如下步骤操作:
1. 添加头文件
2. 设置账号和密码的占位符文本
代码参考如下:
Widget::Widget(QWidget *parent) :
QWidget(parent),
ui(new Ui::Widget)
{
ui->setupUi(this);
connect(ui->loginBt,SIGNAL(clicked()),this,SLOT(loginBt_clicked()));
ui->line_name->setPlaceholderText("QQ号码/手机/邮箱");//设置账号占位符文本
ui->line_pass->setPlaceholderText("密码");//设置密码占位符文本
}
运行结果如下图。
3. 登录按钮槽函数的实现
注释掉第三节设置的手动联动代码,如下图。
编写账号和密码的设置跳转。前提首先分别把账号和密码的输入框对象名进行修改,一般要进行对象程序设计时,最好修改相应的对象名。如下图。说明,这两个地方是同步的,修改一个地方即可。
然后添加下列代码,包括两部分,一个是用户名和密码正确的跳转过程,且是通过进度条进行提示,一个是用户名或密码错误的信息提示框的提示。如下图。
槽函数on_loginBt_clicked()的实现代码如下:
void Widget::on_loginBt_clicked()
{
//qDebug("登录"); //自动关联生成的
// dialogue *dia = new dialogue; //联动设置 声明一个dialogue对象
//dia->show(); // 显示对象
//下面是设置固定的用户名和密码跳转到对话页面
QString name_txt = ui->Line_name->text();//定义账号变量name_txt
QString pwd_txt = ui->Line_pass->text();//定义密码变量pwd_txt
if(name_txt=="WLQQ" && pwd_txt=="WLQQ")
{
Widget::close();
QProgressDialog dialog(tr("登录进度"),tr("取消登录"),0,50000,this);
//创建一个QProgressDialog类对象dialog
dialog.setWindowTitle(tr("登录页面"));//进度条标题
dialog.setWindowModality(Qt::WindowModal);//将对话框设置为模态,
//在for循环中间隔调用setValue(i),利用wasCanceled检查取消。
dialog.show();
for(int i = 0;i < 50000; i++)//for()循环语句模拟了文件复制过程
{
dialog.setValue(i); //演示复制进度
QCoreApplication::processEvents();//设置进度条的当前值
if(dialog.wasCanceled()) close();//避免界面冻结
}
dialog.setValue(50000);//进度条时间结束
dialogue *pic = new dialogue();//定义dialogue类对象
pic->show();//打开dialogue类对象界面
}
else {
close();
int ret1 = QMessageBox::information(this,tr("登录失败提示对话框"),
tr("账号或密码错误,请重新输入!"),QMessageBox::Ok);
if(ret1 == QMessageBox::Ok)
show();
ui->Line_name->clear();//清空输入的账号信息
ui->Line_pass->clear();//清空输入的密码信息
ui->Line_name->setFocus();//在账号编辑框设置光标
}
}
运行结果如下述图示。
第一种情况,账号和密码全对:
第二种情况:账号或密码有错误:
单击OK后,重新返回到登录界面。