主窗口的设计与开发（一）

主窗口的设计与开发（一）

前言

        在上一集，我们已经完成了对核心数据结构的开发与相关工具类的开发。这一集，我们将会对主窗口进行设计与开发。那么废话不多说，直接就开始吧。

主窗口设计

主窗口我们需要展示的内容分为三大类：

第一类：左侧标签，包括头像、聊天会话标签、好友标签以及好友申请标签。

第二类：存放会话列表。

第三类：聊天框

这三类将以左中右的样式进行排列。

那么我们就需要创建左中右布局三大板块。

那我们就需要在mainwidget.h当中定义三个成员变量表示三大区域。

QWidget* windowLeft;
QWidget* windowMid;
QWidget* windowRight;

主窗口初始化

接下里我们要编写出主窗口的初始化代码

initMainWindow

void MainWidget::initMainWindow(){
    QHBoxLayout* layout = new QHBoxLayout();
    layout->setSpacing(0);
    layout->setContentsMargins(0,0,0,0);
    this->setLayout(layout);

    windowLeft = new QWidget();
    windowMid = new QWidget();
    windowRight = new QWidget();

    windowLeft->setFixedWidth(55);
    windowMid->setFixedWidth(195);
    windowRight->setMinimumWidth(650);

    windowLeft->setStyleSheet("QWidget { background-color: rgb(46, 46, 46); }");
    windowMid->setStyleSheet("QWidget { background-color: rgb(247, 247, 247); }");
    windowRight->setStyleSheet("QWidget { background-color: rgb(242, 242, 242); }");

    layout->addWidget(windowLeft);
    layout->addWidget(windowMid);
    layout->addWidget(windowRight);



}

这里我们的主窗口的样式布局初始化就已经完成。

接下来我们需要完成左中右的初始化内容。

左窗口初始化

左窗口我们需要放入四个按钮，分别为用户头像、会话标签页按钮、好友标签页按钮以及好友申请标签页按钮。

我们需要在mainwidget.h中创建新的四个成员变量

    //用户头像
    QPushButton* userAvatar;
    //会话标签页按钮
    QPushButton* sessionTabBtn;
    //好友标签页按钮
    QPushButton* friendTabBtn;
    //好友申请标签页按钮
    QPushButton* applyTabBtn;

这里需要注意一下，我们的用户头像也是用了QPushButton，为了是我们在后面点击头像就可以看到自己的详细信息。

我们初始化左窗口的代码虽然看起来长，其实代码逻辑很简单，我们接着往下看。

void MainWidget::initLeftWindow(){
    QVBoxLayout* layout = new QVBoxLayout();
    layout->setSpacing(20);
    layout->setContentsMargins(0,30,0,0);

    windowLeft->setLayout(layout);

    userAvatar = new QPushButton();
    userAvatar->setFixedSize(45,45);
    userAvatar->setIconSize(QSize(45,45));
    userAvatar->setIcon(QIcon(":/resource/image/defaultAvatar.png"));
    userAvatar->setStyleSheet("QPushButton { background-color: transparent; }");
    layout->addWidget(userAvatar,1,Qt::AlignTop | Qt::AlignHCenter);

    sessionTabBtn = new QPushButton();
    sessionTabBtn->setFixedSize(45,45);
    sessionTabBtn->setIconSize(QSize(30,30));
    sessionTabBtn->setIcon(QIcon(":/resource/image/session_active.png"));
    sessionTabBtn->setStyleSheet("QPushButton { background-color: transparent; }");
    layout->addWidget(sessionTabBtn,1,Qt::AlignTop | Qt::AlignHCenter);

    friendTabBtn = new QPushButton();
    friendTabBtn->setFixedSize(45,45);
    friendTabBtn->setIconSize(QSize(30,30));
    friendTabBtn->setIcon(QIcon(":/resource/image/friend_inactive.png"));
    friendTabBtn->setStyleSheet("QPushButton { background-color: transparent; }");
    layout->addWidget(friendTabBtn,1,Qt::AlignTop | Qt::AlignHCenter);

    applyTabBtn = new QPushButton();
    applyTabBtn->setFixedSize(45,45);
    applyTabBtn->setIconSize(QSize(30,30));
    applyTabBtn->setIcon(QIcon(":/resource/image/apply_inactive.png"));
    applyTabBtn->setStyleSheet("QPushButton { background-color: transparent; }");
    layout->addWidget(applyTabBtn, 1, Qt::AlignTop | Qt::AlignHCenter);

    layout->addStretch(20);




}

这里我们会添加一些图片在这些标签上的，这些图片我们使用qrc进行管理。

这边大家可以找自己喜爱的图片放在这些标签页上。

初始化信号槽

我们还有一个需求，默认我们的会话标签是高亮的，其他两个标签是非高亮的。当我们点击其他的标签时，中间的列表会对应变化，并将对应的标签进行高亮。

那么我们就需要对信号槽进行初始化。

initSignalSlot

void MainWidget::initSignalSlot(){
    //信号槽，处理标签按钮切换
    connect(sessionTabBtn, &QPushButton::clicked,this,&MainWidget::switchTabToSession);
    connect(friendTabBtn, &QPushButton::clicked,this,&MainWidget::switchTabToFriend);
    connect(applyTabBtn, &QPushButton::clicked,this,&MainWidget::switchTabToApply);
}

这里只要对某个标签触发了点击事件，就会执行对应的方法，这些方法当中就会完成我们的需求。

在完成这几个方法之前，我们还需要引入一个枚举类和一个默认的成员变量。

enum ActiveTab{
        SESSION_LIST,
        FRIEND_LIST,
        APPLY_LIST
    };
    ActiveTab activeTab = SESSION_LIST;

这个枚举我们将表示目前是处于哪个状态。

switchTabToSession

void MainWidget::switchTabToSession()
{
    //先记录已经切换到了哪个标签页
    activeTab = SESSION_LIST;

    //调整图标的显示情况
    sessionTabBtn->setIcon(QIcon(":/resource/image/session_active.png"));
    friendTabBtn->setIcon(QIcon(":/resource/image/friend_inactive.png"));
    applyTabBtn->setIcon(QIcon(":/resource/image/apply_inactive.png"));

    //主窗口Mid中加载出会话列表
    this->loadSessionList();

}

switchTabToFriend

void MainWidget::switchTabToFriend()
{
    activeTab = FRIEND_LIST;

    sessionTabBtn->setIcon(QIcon(":/resource/image/session_inactive.png"));
    friendTabBtn->setIcon(QIcon(":/resource/image/friend_active.png"));
    applyTabBtn->setIcon(QIcon(":/resource/image/apply_inactive.png"));

    this->loadFriendList();
}

switchTabToApply

void MainWidget::switchTabToApply()
{
    activeTab = APPLY_LIST;

    sessionTabBtn->setIcon(QIcon(":/resource/image/session_inactive.png"));
    friendTabBtn->setIcon(QIcon(":/resource/image/friend_inactive.png"));
    applyTabBtn->setIcon(QIcon(":/resource/image/apply_active.png"));

    this->loadApplyList();
}

这三个成员方法，我们就是将选中的标签设置为光亮，其他设置为非高亮。之后去加载会话列表、好友列表以及好友申请列表。

设置单例模式

最后这一集我们来把这个程序设置单例模式。

private:
    static MainWidget* instance;
    //单例模式需要限制其他人创建实例！！！
    MainWidget(QWidget *parent = nullptr);
public:
    static MainWidget* getInstance();

我们直接把构造函数进行私有化，限制其他人创建实例。

当然我们在主函数那边也要进行修改。

MainWidget* w = MainWidget::getInstance();
    w->show();

我们已经完成了主窗口和左窗口的大概开发，那么这一集先到这里。