续 ：嵌入式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后，重新返回到登录界面。
