基于C++(QT)实现实时聊天软件【100012054】

# 实时聊天软件 ## 1 新建项目 ### 1.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 函数中修改代码  运行项目，效果如图  ### 2.3 资源导入 向项目中导入资源，对应九个按钮需要九张图片作为头像图标使用，搜集九张图片（可用共享的资源或者自己收藏的图片，大小在 80*80 左右） 添加新文件 – Qt – Qt Resource 点击 choose 名称 res 下一步，点击完成，生成 res.qrc 文件   右击 res.qrc，点击 open in Editor ，添加前缀 /   添加文件 – 将准备好的文件选中，点击打开，添加成功  ### 2.4 设置窗体标题和图标 #### 2.4.1 设置标题 在 Drawer 构造函数中加入如下代码 setWindowTitle(“Myself QQ 2020”);  #### 2.4.2 设置图标 ``` 设置主窗体标题图标 ``` setWindowIcon(QPixmap(“:/images/qq.png”)); ### 2.5 设置列表中的按钮 #### 2.5.1 创建 9 个按钮存放到 QVector 容器中 ``` QVector<QToolButton *>vToolBtn; //声明存放QtoolButton的容器 vToolBtn for(int i = 0 ; i < 9 ; i++) { //设置头像 QToolButton * btn = new QToolButton; //设置文字 btn->setText(nameList[i]); //设置头像 QString str = QString(":/images/%1.png").arg(iconNameList.at(i)); btn->setIcon(QPixmap(str)); //设置头像大小 btn->setIconSize( QPixmap(str).size() ); //设置按钮风格 透明 btn->setAutoRaise(true); //设置文字和图片一起显示 btn->setToolButtonStyle(Qt::ToolButtonTextBesideIcon); //加到 垂直布局中 ui->vLayout->addWidget(btn); //容器保存住9个按钮，方便以后再次操作 vToolBtn.push_back(btn); //9个标示默认初始化 isShow.push_back(false); } ``` #### 2.5.2 替换图片，改为不同的资源  再次运行，效果如图  ## 3 设计聊天窗口 ### 3.1 界面 双击 widget.ui 文件进入设计模式，界面宽度属性分别设置为 730 和 450，向界面中拖入部件并且进行设置，最终效果如图  ### 3.2 控件类型和属性设置 #### 3.2.1 各个控件设置 如上图中标注的 1~8，下表中为上图的属性设置以及控件类型  #### 3.2.2 ToolBtn 详细设置 其中前三个按钮 ，选中 checkable 属性； 其中所有的 ToolBtn属性中的 toolTIp 依次更改为 加粗、倾斜、下划线、更改字体颜色、保存聊天记录和 清空聊天记录 #### 3.2.3 字体大小下拉框设置 界面上 5 号控件设置字体大小，设置区间为 8~22（与腾讯 QQ 软件完全相同），双击该部件，点击 + 号按钮添加新项目如图  currentIndex 属性设置为 4，即默认为 12 号字 #### 3.2.4 TableWidget 设置 显示用户列表的 TableWidget 控件，将 selectionModel 属性选择为 SingleSelection（带有选中效果），将 selectBehavior 选择为 SelectRows（选中整行），取消选中的 showGrid（表格显示） 双击 TableWidget 部件，添加“用户名”列，如图  至此，所有弹出的聊天信息窗口全部设计完毕 ## 4 关联图片按钮与聊天窗口 ### 4.1 添加按钮点击事件 下一步就是要关联起聊天的列表窗口和具体的聊天信息窗口了，也就是点击按钮弹出窗口。 ``` //添加点击事件 for(int i = 0 ; i < vToolBtn.size();i++) { connect(vToolBtn[i],&QToolButton::clicked,this,[=]() { //qDebug() <<i; //此时，widget的构造函数已经修改，（见4.2步骤）创建widget窗口时，参数1 ：0代表以顶层方式弹出 //参数2：代表vToolBtn[i]->text()代表告诉聊天窗口 人物的姓名 Widget *chatWidget = new Widget(0,vToolBtn[i]->text()); chatWidget->setWindowTitle(vToolBtn[i]->text()); chatWidget->setWindowIcon(vToolBtn[i]->icon()); chatWidget->show(); }); } ``` ### 4.2 修改弹出框的构造函数 ！！！ Widget 文件中的 �