QtChat简约版设计（三）设计聊天窗口

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_40722661/article/details/80559479

时间：2018年5月25日:

设计聊天窗口

在这里我们双击“widget.ui”文件进入设计模式，并且并且设置界面的宽高度，并且在这里我们可以拖入部件进行设计，先看看最先效果吧：

图标文件来自EASYICON.NET：

这些图片也是需要添加到qrc文件中的。

一下是一些值的设置

类型	obiectName属性
Text Browser	msgBrowser
Text Edit	msgTxtEdit
Table Widget	usrTblWidget
Font Combo Box	fontCbx
Combo Box	sizeCbx
Push Button	sendBtn
Label	usrNumLbl
Push Button	exitBtn
Tool Button	boldTBtn
Tool Button	italicTBtn
Tool Button	underlineTBtn
Tool Button	colorTBtn
Tool Button	sendTBtn
Tool Button	saveTBtn
Tool Button	clearTBtn

有些控件还需要设置额外的设定：
字体大小的设置：双击组件：

TableWidget控件设置：

这一个小节的内容和编程的相关性是比较低的，但是也是Qt的基本操作。

这里附上QT的设计界面：

2018年5月26日
接下来就是使我们点击抽屉盒中的按钮然后出现聊天窗口，基本的聊天窗口界面我们已经在上一节内容中进行了设计。
接下来就只要进行关联就行。
一下是增加内容后的drawer.h文件和drawer.cpp文件：

#ifndef DRAWER_H
#define DRAWER_H

#include<QToolBox>
#include<QToolButton>
#include"mainwindow.h"

class Drawer : public QToolBox
{
    Q_OBJECT
public:
    Drawer(QWidget*parent=0, Qt::WindowFlags f = 0);

private slots:
    void showChatWidget1();
    void showChatWidget2();
    void showChatWidget3();
    void showChatWidget4();
    void showChatWidget5();
    void showChatWidget6();
    void showChatWidget7();
    void showChatWidget8();
    void showChatWidget9();


private:

    QToolButton *toolBtn1;
    QToolButton *toolBtn2;
    QToolButton *toolBtn3;
    QToolButton *toolBtn4;
    QToolButton *toolBtn5;
    QToolButton *toolBtn6;
    QToolButton *toolBtn7;
    QToolButton *toolBtn8;
    QToolButton *toolBtn9;



    MainWindow *chatWidget1;
    MainWindow *chatWidget2;
    MainWindow *chatWidget3;
    MainWindow *chatWidget4;
    MainWindow *chatWidget5;
    MainWindow *chatWidget6;
    MainWindow *chatWidget7;
    MainWindow *chatWidget8;
    MainWindow *chatWidget9;
};

#endif // DRAWER_H

#include "drawer.h"
#include<QGroupBox>
#include<QVBoxLayout>
#include<QToolBox>
Drawer::Drawer(QWidget *parent, Qt::WindowFlags f):QToolBox(parent, f)
{
    setWindowTitle("QtChat 2018");
    setWindowIcon(QPixmap(":/images/qq.png"));
    toolBtn1  =new QToolButton;
    toolBtn1->setText(tr("水漂气爆"));
    toolBtn1->setIcon(QPixmap(":/images/spqy.png"));

    toolBtn1->setIconSize(QPixmap(":/images/spqy.png").size());

    toolBtn1->setAutoRaise(true);
    toolBtn1->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
    //新增的信号槽
    connect(toolBtn1,&QToolButton::clicked,this,&Drawer::showChatWidget1);
    //重复以上的代码块。。

    QGroupBox *groupBox = new QGroupBox;
    QVBoxLayout *layout = new QVBoxLayout(groupBox);

    layout->setMargin(20);
    layout->setAlignment(Qt::AlignLeft);
    layout->addWidget(toolBtn1);
    layout->addWidget(toolBtn2);
    layout->addWidget(toolBtn3);
    layout->addWidget(toolBtn4);
    layout->addWidget(toolBtn5);
    layout->addWidget(toolBtn6);
    layout->addWidget(toolBtn7);
    layout->addWidget(toolBtn8);
    layout->addWidget(toolBtn9);

    layout->addStretch();
    this->addItem((QWidget*)groupBox,tr("群成员"));
}



void Drawer::showChatWidget1()
{
    chatWidget1 = new MainWindow(0);
    chatWidget1->setWindowTitle(toolBtn1->text());
    chatWidget1->setWindowIcon(toolBtn1->icon());
    chatWidget1->show();
}
//重复这个函数的代码块

在这里可能要强调几个问题：
mainWindow是生成Qt项目后自动创建的一个类，并且在ui中已经设计过了。
这样我们需要在main.cpp文件中进行修改才能使这个抽屉盒出现:

#include"mainWindow.h"
#include<QApplication>
#include"drawer.h"

int main(int argc, char *argv[] )
{
    QAppliction a(argc,argv);
    Drawer drawer;
    drawer.resize();
    drawer.show();

    return a.exec();
}

这样就基本完成了界面的设计。