【C++全栈聊天项目学习】第一天

学习视频链接【C++ 全栈聊天项目(1)架构概述和登录界面】

完成内容：

完成了登录界面与注册界面的绘制

学习笔记：

1.搭建UI布局时，可以对调整不同布局的Margin值，以作区分，方便进行拖拽

2.控件可以直接拖到右侧对象查看器中，避免在左侧拖动，容易拖错

3.修改窗口的显示标题：windowtitle里修改

4.修改窗口的显示图标：在Pro文件里添加两行代码：

RC_ICONS = FreeChat.ico //设置Windows下的应用程序图标文件为FreeChat.ico 
                        //此处为相对路径，表示该文件直接放在了FreeChat项目文件夹内

DESTDIR =./bin //指定编译生成的可执行文件的输出目录为在项目当前路径下的 bin 文件夹

5.在UI界面插入图片

1. 保存一份png文件放置在/res（自己建)下
2. 在Qt新建一个resource文件
3. 在resource文件里添加已有文件，选择res下的png图片
4. 在UI界面添加widget,在widget里面添加label
5. 点击label,在属性编辑器里找到pixmap里找到添加好的资源文件
6. 调整其对齐方式

6.创建登录与注册ui后，在代码里需要完成的过程

1.在mainwindow.h里的类MainWindow中的private添加：

LoginDialog * _login_dlg;//头文件声明类成员变量

2.然后在mainwindow.cpp里的MainWindow构造函数中添加

_login_dlg = new LoginDialog();

setCentralWidget(_login_dlg);//设置为中心部件（）内为界面类定义的指针

_login_dlg->show();

3..然后在mainwindow.cpp里的MainWindow析构函数中添加

if(_login_dlg)

{

delete _login_dlg;

_login_dlg=nullptr;

}

7.信号与槽

信号（signal）:其本质就是事件，比如按钮被点击、数据改变、连接断开等。

槽（slot）:接收信号后执行的函数（回调函数），用来响应信号做出相应操作。

8.connect

作用：将信号与槽连接在一起

connect(发出信号的对象指针, &发送类::信号函数名, 接收信号的对象指针, &接受类::槽函数名);

connect(_login_dlg,&LoginDialog::switchRegister ,this,&MainWindow::SlotSwitchReg);

对照来看就是

发出信号的对象指针：_login_dlg

发送类：LoginDialog

信号函数名：switchRegister

接收信号的对象指针：this         //指向当前类的类型的指针，也就是MainWindow *

接受类:MainWindow

槽函数名:SlotSwitchReg

信号函数名：switchRegister

在发送信号对应的头文件中的对应类里添加函数声明

signals:

void switchRegister();

在发送信号对应的头文件中的构造函数添加

connect(ui->reg_btn,&QPushButton::clicked,this,&LoginDialog::switchRegister);

发出信号的对象指针：ui->reg_btn

发送类：QPushButton

信号函数名：clicked

接收信号的对象指针：this //指向当前类的类型的指针，也就是_login_dlg

接受类:LoginDialog

槽函数名:switchRegister

在mainwindow.h添加槽函数的声明

public slots:

void SlotSwitchReg();

然后选中声明的槽函数，右键->重构->在mainwindow中添加定义

void MainWindow::SlotSwitchReg()

{

setCentralWidget(_reg_dlg);//将注册界面设置为中心部件

_login_dlg->hide();//隐藏登录界面

_reg_dlg->show();//显示注册界面

}

这样，在按下reg_btn时（注册的按钮），就会和登录界面的槽函数switchRegister（）连接，随后在与MainWindow界面的槽函数:SlotSwitchReg()连接

9.qss文件

1.在项目文件（文件管理中）添加style文件夹，添加qss文件

2.添加到资源文件

3.用到的qss函数

QDialog#LoginDialog, #RegisterDialog
//两种选择方式，QDialog#LoginDialog表示选择所有类型为QDialog且对象名称（objectName）为LoginDialog的控件。
//# RegisterDialog 是简写，表示选择所有对象名称为RegisterDialog的控件，不限定类型。

{

background-color:rgb(255,255,255)//背景颜色设置为纯白色

}

# user_label,# pass_label//选择user_label和pass_label

{

color:black;//设置字体颜色为黑色

}

10.展示