Qt练习UDP聊天软件

运行效果：

完整代码：https://github.com/lzglocal/UDP_CHAT.git
目录设计：

1. 创建项目

2. 对话框列表
   1. Toolbox 群成员
   2. 内部 做出一个垂直布局
   3. 添加按钮

   • 图标
   • 文字
   • 图标大小
   • 风格
   • 文字图标都显示
   • 按钮保存到 QVector容器中

3. 界面布局

4. 点击按钮弹出窗口
   1. 点击按钮创建窗口

   • Widget * widget = new Widget(0,vToolBtn[i]->text());
   • 修改Widgeti聊天窗口 构造函数 为两个参数
   • 设置聊天窗口的图标、标题
   • show方法显示窗口

5. 解决多次点击弹出同个窗口bug

   • 加入bool的isShow标示
   • 判断标示 如果为true就不要多次打开
   • 关闭聊天窗口时发生 自定义关闭信号
   • 监听关闭信号 更新isShow标示

6. udp通信

   • UdpSocket .pro network
   • new 出套接字
   • 绑定端口
   • 书写报文 writeDatagram
   • ReadyRead 监听信号
   • 读取报文
   • 报文长度 qint64 size = udp->pendingDatagramSize();
   • 同步聊天记录

7. 核心聊天功能

   • 通信套接字
   • bind （ 端口， 共享地址 | 断线重连）
   • 获取用户名
   • sndMsg（枚举（普通聊天，用户进入、离开））
   • 发送3段数据 类型 、 用户名、 具体内容
   • 书写报文 广播发送
   • 接受 利用数据流 做分段
     • 第一段 类型
     • 把用户发送的内容 追加到 聊天记录中

8. 新用户进入

   • 提供处理新用户进入函数
   • 更新 右侧TableWidget
   • 更新聊天记录
   • 更新在线用户人数

9. 用户离开

   • 提供用户处理函数
   • 更新右侧tableWidget
   • 更新聊天记录
   • 更新在线用户人数
   • 在closeEvent事件中 发送用户离开消息
   • 端口套接字
   • 离开按钮处理

10. 辅助功能

    • 字体设置
    • 字号设置
    • 加粗
    • 倾斜
    • 下划线
    • 颜色
    • 清空聊天记录
    • 保存聊天记录（QIODevice：：Text）

11. 快捷键

    • 发送信息快捷键
    • 退出快捷键

1. 创建新项目

第一步打开Qt Creator，点击新建NewProject
Application –> Qt Widgets Application -> choose
创建项目名称例如： MyselfQQ，路径自己选择，注意不要有空格和中文

选择套件，点击下一步
选择基类QWidget，然后点击下一步

然后点击完成，至此项目创建完毕。
运行测试页面 -空页面

2. 创建对话列表

2.1 添加新文件，对话列表类DialogList

右击项目名，在弹出的快捷菜单中选择“添加新文件…”菜单项，在弹出的对话框中选择“Qt”选项。选择Qt设计师界面类，单击“Choose…”按钮；
界面模板选择Widget，点击下一步
类名填写 DialogList （可以起其他名称）点击下一步
在汇总中单击“完成”按钮，系统会为我们添加“dialoglist.h”头文件和“dialoglist.cpp”源文件以及dialoglist.ui设计文件

2.2 设计对话框列表UI

按照下图所示，设计对话框的UI，该窗口的大小为 250*700，其中的主要控件是QToolBox，修改该控件的currentItemText为“群成员”， QToolBox默认生成的第二页删除掉

在群成员里我们放入一个Widget做布局操作，可以先利用一些测试控件放入到其中，然后做垂直布局，然后把测试的控件删除掉，这时该Widget中就有了一个layout布局

测试，main函数中修改代码

#include "dialoglist.h"
#include "widget.h"

#include <QApplication>

int main(int argc, char *argv[])
{
   
 QApplication a(argc, argv);
//    Widget w;
//    w.show();
 DialogList list;
 list.show();
 return a.exec();
}

2.3 资源导入

向项目中导入资源，对应九个按钮需要九张图片作为头像图标使用，搜集九张图片（可用共享的资源或者自己收藏的图片，大小在80*80左右）
添加新文件 – Qt – Qt Resource 点击choose 名称 res 下一步，点击完成，生成res.qrc文件

右击res.qrc，点击open in Editor ，添加前缀 /

添加文件 – 将准备好的文件选中，点击打开，添加成功

2.4 设置窗体标题和图标

2.4.1设置标题

在Drawer构造函数中加入如下代码
setWindowTitle(“QQ ”);

2.4.2 设置图标

设置主窗体标题图标
setWindowIcon(QPixmap(“:/images/qq.png”));

#include "dialoglist.h"
#include "ui_dialoglist.h"
#include <QToolButton>

DialogList::DialogList(QWidget *parent) :
 QWidget(parent),
 ui(new Ui::DialogList)
{
   
 ui->setupUi(this);
 //设置标题
 setWindowTitle("QQ");
 //设置图标
 setWindowIcon(QPixmap(":/images/qq.png"));
DialogList::~DialogList()
{
   
 delete ui;
}

2.5设置列表中的按钮

2.5.1 创建9个按钮存放到QVector容器中

 QVector<QToolButton*> vToolBtn;
 for(int i=0;i<9;i++){
   
     //设置头像
     QToolButton * btn = new QToolButton;
     //设置文字
     btn->setText("孙悟空");
     //设置头像
     btn->setIcon(QPixmap(":/images/ftbz.png"));
     //设置头像大小
     btn->setIconSize(QPixmap(str).size());
     //设置按钮风格 透明
     btn->setAutoRaise(true);
     //设置文字和图片一起显示
     btn->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
     //加到 垂直布局中
     ui->vLayout->addWidget(btn);
     //容器保存住9个按钮，方便以后再次操作
     vToolBtn.push_back(btn);
 }

效果全部头像和名称一样

2.5.2 替换图片，改为不同的资源

    //准备图标
 QList<QString>nameList;
 nameList << "水票奇缘" << "忆梦如澜" <<"北京出版人"<<"Cherry"<<"淡然"
          <<"娇娇girl"<<"落水无痕"<<"青墨暖暖"<<"无语";
 QStringList iconNameList; //图标资源列表
 iconNameList << "spqy"<< "ymrl" <<"qq" <<"Cherry"<< "dr"
              <<"jj"<<"lswh"<<"qmnn"<<"wy";
 QVector<QToolButton*> vToolBtn;
 for(int i=0;i<9;i++){
   
     //设置头像
     QToolButton * btn = new QToolButton;
     //设置文字
     btn->setText(nameList[i]);
     //设置头像
     QString str = QString(":/images/%1.png").arg