Qt实现企业版QQ--主界面

THIRTEEN713

已于 2024-02-24 22:11:20 修改

阅读量458

点赞数 7

文章标签： qt 开发语言 c++ windows

于 2024-02-23 17:25:48 首次发布

本文链接：https://blog.csdn.net/THIRTEEN713/article/details/136260569

版权

其实昨天应该就要完成的，但是因为有事情耽搁了。拖到了今天，整个界面的大体差不多完成了。并且把前面的登录界面优化了以下。

左边的是QQ的主界面，右边的是QT写的主界面，其实还剩消息的列表组件和聊天界面以及群成员的组件没完成，明天在继续。

对于登录界面的优化如下：

1、新增了一个window类型，登录界面类和主界面类继承window类型

2、将鼠标的拖动事件放到了window（窗口类）类里面了

窗口类

window.h

#ifndef WINDOW_H
#define WINDOW_H

#include <QMainWindow>
#include <QObject>
#include <QMouseEvent>  // 鼠标事件
#include <QPushButton>
#include <QLabel>

class Window : public QMainWindow
{
    Q_OBJECT

public:
    Window(QWidget *parent = nullptr):QMainWindow(parent){};
    ~Window(){};

    // 私有函数
protected:

    // 纯虚函数，由派生类自行实现自己的初始化方法
    virtual void InitWindow() = 0;
    virtual void UnInitWindow() = 0;
    virtual void InitWindowAssembly() = 0;
    virtual void InitWindowAssemblyEvent() = 0;


private:
    // 鼠标拖动函数，禁止重载和覆盖
    virtual void mousePressEvent(QMouseEvent *event) final
    {
        // 判断鼠标是否按下左键了
        if(event->button() == Qt::LeftButton)
        {
            // 获取鼠标位置
            m_bDrag = true;
            //获得鼠标的初始位置
            mouseStartPoint = event->globalPos();
            //mouseStartPoint = event->pos();
            //获得窗口的初始位置
            windowTopLeftPoint = this->frameGeometry().topLeft();
        }
    }
    virtual void mouseMoveEvent(QMouseEvent *event) final
    {
        if(m_bDrag)
        {
            //获得鼠标移动的距离
            QPoint distance = event->globalPos() - mouseStartPoint;

            //改变窗口的位置
            this->move(windowTopLeftPoint + distance);
        }
    }
    virtual void mouseReleaseEvent(QMouseEvent *event) final
    {
        if(event->button() == Qt::LeftButton)
        {
            m_bDrag = false;
        }
    }

    // 私有变量
private:
    bool m_bDrag;
    QPoint  mouseStartPoint;
    QPoint  windowTopLeftPoint;

};

#endif // WINDOW_H

后续要优化的话，会把关闭按钮，背景面板等这些重复的组件一起放到window类里面。

更新后的登录类

SignWindow类

头文件：signwindow.h

#ifndef SIGNWINDOW_H
#define SIGNWINDOW_H

#include "window.h"     // 主窗口
#include <QLabel>       // 标签/面板
#include <QLineEdit>    // 行输入框
#include <QRadioButton> // 单选按钮
#include <QPushButton>  // 按钮
#include <QDebug>

class SignWindow : public Window
{
public:
    SignWindow();
    ~SignWindow();
    // 私有函数
private:
    virtual void InitWindow();
    virtual void UnInitWindow();
    virtual void InitWindowAssembly();
    virtual void InitWindowAssemblyEvent();

    void signPushButtonStyle();

    // 私有变量
private:
    QLabel *backgroundLabel; // 背景面板，用于存放其他组件
    QPushButton *closePushButton;// 关闭按钮
    QLabel *userLogoLabel;// 用户头像面板
    QLineEdit *accountLineEdit;// 账号单行编辑框
    QLineEdit *passwordLineEdit;// 密码单行编辑框
    QRadioButton *agreementRadioButton;// 同意协议单选框
    QPushButton  *signPushButton;// 登录按钮
    QPushButton *loginPushButton;// 注册按钮
    QPushButton *forgetPushButton;// 注册按钮
    QPushButton *clear1PushButton;// 清空按钮
    QPushButton *clear2PushButton;// 清空按钮
    QPushButton *historyPushButton;// 历史账号按钮
};
#endif // SIGNWINDOW_H

signwindow.cpp

#include "signwindow.h"


/*
    登录界面大小：400*560
*/
SignWindow::SignWindow()
{
    // 初始化登录窗口
    InitWindow();

}

SignWindow::~SignWindow() {
    UnInitWindow();
}

void SignWindow::UnInitWindow()
{
    delete clear1PushButton;
    delete clear2PushButton;
    delete forgetPushButton;
    delete loginPushButton;
    delete signPushButton;
    delete agreementRadioButton;
    delete passwordLineEdit;
    delete accountLineEdit;
    delete userLogoLabel;
    delete closePushButton;
    delete backgroundLabel;
}

// 初始化登录窗口：设置窗口样式，并且初始化窗口组件
void SignWindow::InitWindow()
{
    // 设置登录界面大小 320*450
    setFixedSize(322,452);// 比实际大两个像素，为了呈现悬浮的效果

    // 设置登录界面为无边框：方便设置自定义样式
    setWindowFlags(Qt::FramelessWindowHint);

    // 设置登录界面为透明色：方便做异形窗口
    setAttribute(Qt::WA_TranslucentBackground);

    // 设置任务栏图标
    setWindowIcon(QIcon("../QQ_Test_Demo_Images/icon.png"));

    // 初始化组件
    InitWindowAssembly();

    // 初始化事件
    InitWindowAssemblyEvent();
}

// 初始化登录窗口组件：创建其组件，并且设置组件的样式和位置
void SignWindow::InitWindowAssembly()
{
    // 创建背景面板组件
    backgroundLabel = new QLabel(this);

    // 设置其背景面板的位置和大小
    backgroundLabel->setGeometry(0,0,width(),height());

    // 设置背景面板的背景图片和样式
    backgroundLabel->setObjectName("backgroundLabel");
    backgroundLabel->setStyleSheet(QString("#backgroundLabel{"
                                           "border:1px solid #9FB1BC;"
                                           "border-radius:10px;"
                                           "border-image:url('../QQ_Test_Demo_Images/background.png')}"));

    // 创建关闭按钮组件
    closePushButton = new QPushButton(backgroundLabel);
    closePushButton->setGeometry(width()-30,1,30,25);
    closePushButton->setObjectName("closePushButton");
    closePushButton->setText("×");
    closePushButton->setStyleSheet(QString("#closePushButton{"
                                           "border-top-right-radius:10px;"
                                           "background:rgba(255,255,255,0);"
                                           "font-size:18px;"
                                           "color:#253237}"
                                           "#closePushButton:hover{"
                                           "background-color:#D90429;"
                                           "font-size:18px;"
                                           "color:#ffffff}"));

    // 创建头像面板组件
    userLogoLabel = new QLabel(backgroundLabel);

    // 设置头像面板组件样式和位置
    userLogoLabel->setGeometry(width()/2-40,65,80,80);
    userLogoLabel->setObjectName("userLogoLabel");
    userLogoLabel->setStyleSheet(QString("#userLogoLabel{"
                                         "border:1px solid #7C7A7A;"
                                         "border-radius:40px;"
                                         "border-image:url('../QQ_Test_Demo_Images/userdefaultlogo.png');}"));

    // 创建账号输入框组件
    accountLineEdit = new QLineEdit(backgroundLabel);

    // 设置账号输入框组件样式和位置
    accountLineEdit->setGeometry(width()/2-128,userLogoLabel->y()+userLogoLabel->height()+21,256,45);
    accountLineEdit->setObjectName("accountLineEdit");
    accountLineEdit->setAlignment(Qt::AlignCenter); // 设置文本居中
    accountLineEdit->setStyleSheet(QString("#accountLineEdit:focus{"
                                            "border:none;"
                                            "border-radius:5px;"
                                            "font-size:25px;"
                                            "background:rgba(255,255,250,240);"
                                            "color:#353535;}"
                                            "#accountLineEdit{"
                                            "background:rgba(255,255,250,100);"
                                            "border:none;"
                                            "border-radius:5px;"
                                            "font-size:16px;"
                                            "}"));
    accountLineEdit->setPlaceholderText("输入QQ号"); // 设置提示文本

    // 创建清空按钮组件
    clear1PushButton = new QPushButton(accountLineEdit);
    clear1PushButton->setGeometry(accountLineEdit->width()-50,10,25,25);
    clear1PushButton->setText("×");
    clear1PushButton->setCursor(Qt::PointingHandCursor);
    clear1PushButton->setObjectName("clearPushButton");
    clear1PushButton->setStyleSheet(QString("#clearPushButton{"
                                            "background:rgba(255,255,255,0);"
                                            "outline:none;}"));

    // 创建密码输入框组件
    passwordLineEdit = new QLineEdit(backgroundLabel);

    // 设置密码输入框组件样式和位置
    passwordLineEdit->setEchoMode(QLineEdit::Password);
    passwordLineEdit->setGeometry(width()/2-128,accountLineEdit->y()+accountLineEdit->height()+14,256,45);
    passwordLineEdit->setObjectName("passwordLineEdit");
    passwordLineEdit->setAlignment(Qt::AlignCenter); // 设置文本居中
    passwordLineEdit->setStyleSheet(QString("#passwordLineEdit:focus{"
                                           "border:none;"
                                           "border-radius:5px;"
                                           "font-size:25px;"
                                           "background:rgba(255,255,250,240);"
                                           "color:#353535;}"
                                            "#passwordLineEdit{"
                                            "background:rgba(255,255,250,100);"
                                            "border:none;"
                                            "border-radius:5px;"
                                            "font-size:16px;"
                                            "}"));
    passwordLineEdit->setPlaceholderText("输入QQ密码"); // 设置提示文本

    // 创建历史账号按钮组件
    clear2PushButton = new QPushButton(passwordLineEdit);
    clear2PushButton->setGeometry(passwordLineEdit->width()-50,10,25,25);
    clear2PushButton->setText("×");
    clear2PushButton->setCursor(Qt::PointingHandCursor);
    clear2PushButton->setObjectName("historyPushButton");
    clear2PushButton->setStyleSheet(QString("#historyPushButton{"
                                           "background:rgba(255,255,255,0);}"));

    // 创建同意协议单选框组件
    agreementRadioButton = new QRadioButton(backgroundLabel);

    // 设置同意协议单选框组件样式和位置
    agreementRadioButton->setGeometry(width()/2-120,passwordLineEdit->y()+passwordLineEdit->height()+20,240,20);
    agreementRadioButton->setText("已阅读并同意服务协议和QQ隐私保护");
    agreementRadioButton->setObjectName("agreementRadioButton");
    agreementRadioButton->setStyleSheet(QString("#agreementRadioButton{"
                                                "color:#5C6B73;}"
                                                "#agreementRadioButton::indicator{"
                                                "width:15px;"
                                                "height:15px;}"
                                                "#agreementRadioButton::indicator::unchecked{"
                                                "border-image:url('../QQ_Test_Demo_Images/radiouncheck.png');}"
                                                "#agreementRadioButton::indicator::checked{"
                                                "border-image:url('../QQ_Test_Demo_Images/radiocheck.png');}"));

    signPushButton = new QPushButton(backgroundLabel);
    signPushButton->setGeometry(width()/2-128,agreementRadioButton->y()+agreementRadioButton->height()+14,256,38);
    signPushButton->setText("登录");
    signPushButton->setDisabled(true);
    signPushButton->setObjectName("signPushButton");
    signPushButton->setStyleSheet(QString("#signPushButton{"
                                           "background-color:#61a3d7;"
                                           "color:#ffffff;"
                                           "border:none;"
                                           "font-size:15px;"
                                           "border-radius:5px;}"));

    loginPushButton = new QPushButton(backgroundLabel);
    loginPushButton->setGeometry(width()/2-60,height()-32-20,50,20);
    loginPushButton->setObjectName("loginPushButton");
    loginPushButton->setText("注册账号");
    loginPushButton->setCursor(Qt::PointingHandCursor);
    loginPushButton->setStyleSheet(QString("#loginPushButton{"
                                            "background-color:rgba(255,255,255,0);"
                                            "color:#396f97;"
                                            "border:none;"
                                            "font-size:12px;}"));

    forgetPushButton = new QPushButton(backgroundLabel);
    forgetPushButton->setGeometry(width()/2+10,height()-32-20,50,20);
    forgetPushButton->setObjectName("forgetPushButton");
    forgetPushButton->setText("忘记密码");
    forgetPushButton->setCursor(Qt::PointingHandCursor);
    forgetPushButton->setStyleSheet(QString("#forgetPushButton{"
                                           "background-color:rgba(255,255,255,0);"
                                           "color:#396f97;"
                                           "border:none;"
                                            "font-size:12px;}"));
}

// 初始化登录窗口组件事件
void SignWindow::InitWindowAssemblyEvent()
{
    // 设置关闭按钮事件
    connect(closePushButton,SIGNAL(clicked()),this,SLOT(close()));

    // 设置登录事件
    connect(signPushButton,&QPushButton::clicked,this,[this]{
        // 这里写登录请求
        qDebug() << "开始请求登录...";

    });

    // 设置账号和密码输入框事件
    connect(accountLineEdit,&QLineEdit::textChanged,this,[this](){
        if(accountLineEdit->text().isEmpty() == false)
           accountLineEdit->setStyleSheet(QString("#accountLineEdit{"
                                                   "border:none;"
                                                   "border-radius:5px;"
                                                   "font-size:20px;"
                                                   "background:rgba(255,255,250,240);"
                                                    "color:#353535;}"));
        signPushButtonStyle();
    });
    connect(passwordLineEdit,&QLineEdit::textChanged,this,[this](){
        if(passwordLineEdit->text().isEmpty() == false)
        passwordLineEdit->setStyleSheet(QString("#passwordLineEdit{"
                                               "border:none;"
                                               "border-radius:5px;"
                                               "font-size:20px;"
                                               "background:rgba(255,255,250,240);"
                                               "color:#353535;}"));
        signPushButtonStyle();
    });

    // 设置清空事件
    connect(clear1PushButton,&QPushButton::clicked,accountLineEdit,[this]{
        // 这里写清空逻辑
        accountLineEdit->clear();
        signPushButtonStyle();
    });

    // 设置清空事件
    connect(clear2PushButton,&QPushButton::clicked,passwordLineEdit,[this]{
        // 这里写清空逻辑
        passwordLineEdit->clear();
        signPushButtonStyle();
    });

    // 设置注册事件
    connect(loginPushButton,&QPushButton::clicked,this,[this]{
        // 这里写注册逻辑
        qDebug() << "跳转注册界面";
    });

    // 设置忘记密码事件
    connect(forgetPushButton,&QPushButton::clicked,this,[this]{
        // 这里写忘记密码逻辑
        qDebug() << "跳转忘记密码界面";
    });

    // 设置同意协议事件
    connect(agreementRadioButton,&QRadioButton::clicked,signPushButton,[this](){
        signPushButtonStyle();
    });
}

// 设置登录按钮样式
void SignWindow::signPushButtonStyle()
{
    bool state = false;
    // 协议点击逻辑
    if(agreementRadioButton->isChecked() == true
        && (accountLineEdit->text().isEmpty() == false)
        && (passwordLineEdit->text().isEmpty() == false))
        state =true;

    if(state)
    {
        // 重新配置样式
        signPushButton->setStyleSheet(QString("#signPushButton{"
                                              "background-color:#00A8E8;"
                                              "color:#ffffff;"
                                              "border:none;"
                                              "font-size:15px;"
                                              "border-radius:5px;}"
                                              "#signPushButton:hover{"
                                              "background-color:#1B98E0;}"));
        signPushButton->setDisabled(false);
    }
    else
    {
        signPushButton->setStyleSheet(QString("#signPushButton{"
                                              "background-color:#61a3d7;"
                                              "color:#ffffff;"
                                              "border:none;"
                                              "font-size:15px;"
                                              "border-radius:5px;}"));
        signPushButton->setDisabled(true);
    }
}

然后就是今天完成的部分了，主界面类

没有一比一的复刻QQ的界面所有组件，因为后期加逻辑的时候，有些功能其实没必要或者说目前来说没法实现的。所以就按需进行了组件的添加。

主界面类

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include "window.h"
#include <QListWidget>
#include <QLabel>       // 标签/面
#include <QLineEdit>    // 行输入框
#include <QPushButton>  // 按钮
#include <QTextEdit>

class MainWindow : public Window
{
public:
    MainWindow();
    ~MainWindow();

private:
    virtual void InitWindow();
    virtual void UnInitWindow();
    virtual void InitWindowAssembly();
    virtual void InitWindowAssemblyEvent();

private:
    // 组件
    QPushButton *closePushButton;// 关闭按钮
    QPushButton *minPushButton;// 关闭按钮
    QLabel *backgroundLabel; // 主背景
    QLabel *leftLabel;  // 左侧背景
    QLabel *middleLabel;// 中间背景
    QLabel *rightLabel; // 右侧背景

    // 左侧区域组件
    QPushButton *userlogoPushButton;// 用户头像按钮
    QPushButton *messagesPushButton;// 消息按钮
    QPushButton *firendsPushButton; // 好友按钮
    QPushButton *groupsPushButton;  // 群组按钮

    QPushButton *sharedPushButton;  // 共享文件按钮
    QPushButton *optionPushButton;  // 设置选项按钮

    // 中间区域
    QLineEdit *searchLineEdit;// 搜索栏
    QLabel    *searchlogoLabel;// 搜索图标


    QPushButton *addPushButton; // 添加按钮
    QListWidget *messagesListWidget;// 消息列表

    // 右侧区域
    QLabel *grouptitleLabel;// 群名面板
    QPushButton *invitePushButton;// 邀请按钮
    QPushButton *groupsetPushButton;// 群设置按钮
    QTextEdit *messageShowTextEdit;// 消息显示框
    QLabel *messageSendLabel;// 发送框面板
    QLabel *emojLabel;  // 表情面板
    QPushButton *emojPushButton; // 表情按钮
    QPushButton *filePushButton; // 文件按钮
    QPushButton *picturePushButton; // 图片按钮
    QPushButton *historyPushButton; // 历史消息按钮
    QPushButton *sendPushButton; // 发送按钮
    QTextEdit *messageSendTextEdit;// 消息发送框
    QLabel *gourpnoticeLabel; // 群公告面板
    QLabel *groupcountLabel; // 群成员数量面板
    QPushButton *searchGpUserPushButton;// 搜索群成员按钮
    QListWidget *groupuserListWidget; // 群成员列表
};

#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
/*
    主界面：960*680
*/
MainWindow::MainWindow()
{
    // 初始化主窗口
    InitWindow();
}

MainWindow::~MainWindow()
{
    UnInitWindow();
}

void MainWindow::InitWindow()
{
    // 设置窗口为960*680
    setFixedSize(960,680);

    // 设置登录界面为无边框：方便设置自定义样式
    setWindowFlags(Qt::FramelessWindowHint);

    // 设置登录界面为透明色：方便做异形窗口
    setAttribute(Qt::WA_TranslucentBackground);

    // 设置任务栏图标
    setWindowIcon(QIcon("../QQ_Test_Demo_Images/icon.png"));

    // 初始化组件
    InitWindowAssembly();

    // 初始化事件
    InitWindowAssemblyEvent();

    messagesPushButton->setDown(true);
    emit messagesPushButton->click();

}


void MainWindow::UnInitWindow()
{
    delete grouptitleLabel;
    delete invitePushButton;
    delete groupsetPushButton;
    delete messageShowTextEdit;
    delete messageSendTextEdit;
    delete emojPushButton;
    delete filePushButton;
    delete picturePushButton;
    delete historyPushButton;
    delete emojLabel;
    delete messageSendLabel;
    delete gourpnoticeLabel;
    delete groupcountLabel;
    delete searchGpUserPushButton;
    delete groupuserListWidget;
    delete searchLineEdit;
    delete addPushButton;
    delete messagesListWidget;
    delete userlogoPushButton;
    delete messagesPushButton;
    delete firendsPushButton;
    delete groupsPushButton;
    delete sharedPushButton;
    delete optionPushButton;
    delete closePushButton;
    delete minPushButton;
    delete leftLabel;
    delete middleLabel;
    delete rightLabel;
    delete backgroundLabel;
}

void MainWindow::InitWindowAssembly()
{
    // 组件
    backgroundLabel = new QLabel(this); // 主背景
    backgroundLabel->setGeometry(0,0,width(),height());
    backgroundLabel->setObjectName("backgroundLabel");
    backgroundLabel->setStyleSheet(QString("#backgroundLabel{"
                                           "background-color:#f6f6f6;"
                                           "border-radius:10px;"
                                           "border:1px solid #cccccc;}"));

    closePushButton = new QPushButton(backgroundLabel);
    closePushButton->setGeometry(width()-30-1,1,30,25);
    closePushButton->setObjectName("closePushButton");
    closePushButton->setText("×");
    closePushButton->setStyleSheet(QString("#closePushButton{"
                                           "border-top-right-radius:10px;"
                                           "background:rgba(255,255,255,0);"
                                           "font-size:18px;"
                                           "color:#253237}"
                                           "#closePushButton:hover{"
                                           "background-color:#D90429;"
                                           "font-size:18px;"
                                           "color:#ffffff;}"));
    minPushButton = new QPushButton(backgroundLabel);
    minPushButton->setGeometry(width()-60-1,1,30,25);
    minPushButton->setObjectName("minPushButton");
    minPushButton->setText("-");
    minPushButton->setStyleSheet(QString("#minPushButton{"
                                       "background:rgba(255,255,255,0);"
                                       "font-size:18px;"
                                       "color:#253237;"
                                       "border:none}"
                                       "#minPushButton:hover{"
                                       "background-color:#E9E9E9;"
                                       "font-size:18px;"
                                       "color:#ffffff;}"));

    leftLabel = new QLabel(this);  // 左侧背景
    leftLabel->setGeometry(1,1,60,height()-2);
    leftLabel->setObjectName("leftLabel");
    leftLabel->setStyleSheet(QString("#leftLabel{"
                                     "background-color:#E5E5E5;"
                                     "border-top-left-radius:10px;"
                                     "border-bottom-left-radius:10px;}"));
    middleLabel = new QLabel(this);// 中间背景
    middleLabel->setGeometry(leftLabel->width()+leftLabel->x(),1,251,height()-2);
    middleLabel->setObjectName("middleLabel");
    middleLabel->setStyleSheet(QString("#middleLabel{"
                                     "background-color:#ffffff;"
                                     "border-right:1px solid #eaeaea}"));
    rightLabel = new QLabel(this); // 右侧背景
    rightLabel->setGeometry(middleLabel->width()+middleLabel->x(),closePushButton->height()+1,647,height()-closePushButton->height()-2);
    rightLabel->setObjectName("rightLabel");
    rightLabel->setStyleSheet(QString("#rightLabel{"
                                       "background-color:#f6f6f6;"
                                       "border-bottom-right-radius:10px;}"));

    // 左侧区域组件-----------------------------------------------------------------
    userlogoPushButton = new QPushButton(leftLabel);// 用户头像按钮
    userlogoPushButton->setGeometry(leftLabel->width()/2-20,30,40,40);
    userlogoPushButton->setObjectName("userlogoPushButton");
    userlogoPushButton->setCursor(Qt::PointingHandCursor);
    userlogoPushButton->setStyleSheet(QString("#userlogoPushButton{"
                                              "border:1px solid #cccccc;"
                                              "border-radius:19px;"
                                              "border-image:url(../QQ_Test_Demo_Images/userdefaultlogo.png)}"));
    messagesPushButton = new QPushButton(leftLabel);// 消息按钮
    messagesPushButton->setGeometry(leftLabel->width()/2-20,userlogoPushButton->height()+userlogoPushButton->y()+20,40,40);
    messagesPushButton->setObjectName("messagesPushButton");
    messagesPushButton->setStyleSheet(QString("#messagesPushButton{"
                                              "background-color:rgba(255,255,255,0);"
                                              "border-radius:5px;"
                                              "border:none;"
                                              "border-image:url(../QQ_Test_Demo_Images/chat1.png);}"
                                              "#messagesPushButton:hover{"
                                              "background-color:rgba(220,220,220,255);}"));

    firendsPushButton = new QPushButton(leftLabel); // 好友按钮
    firendsPushButton->setGeometry(leftLabel->width()/2-20,messagesPushButton->height()+messagesPushButton->y()+10,40,40);
    firendsPushButton->setObjectName("firendsPushButton");
    firendsPushButton->setStyleSheet(QString("#firendsPushButton{"
                                              "background-color:rgba(255,255,255,0);"
                                              "border-radius:5px;"
                                              "border:none;"
                                              "border-image:url(../QQ_Test_Demo_Images/firend1.png);}"
                                              "#firendsPushButton:hover{"
                                              "background-color:rgba(220,220,220,255);}"));

    groupsPushButton = new QPushButton(leftLabel);  // 群组按钮
    groupsPushButton->setGeometry(leftLabel->width()/2-20,firendsPushButton->height()+firendsPushButton->y()+10,40,40);
    groupsPushButton->setObjectName("groupsPushButton");
    groupsPushButton->setStyleSheet(QString("#groupsPushButton{"
                                             "background-color:rgba(255,255,255,0);"
                                             "border-radius:5px;"
                                             "border:none;"
                                             "border-image:url(../QQ_Test_Demo_Images/group1.png);}"
                                             "#groupsPushButton:hover{"
                                             "background-color:rgba(220,220,220,255);}"));

    sharedPushButton = new QPushButton(leftLabel);  // 共享文件按钮
    sharedPushButton->setGeometry(leftLabel->width()/2-20,height()-10-80,40,40);
    sharedPushButton->setObjectName("sharedPushButton");
    sharedPushButton->setStyleSheet(QString("#sharedPushButton{"
                                            "background-color:rgba(255,255,255,0);"
                                            "border-radius:5px;"
                                            "border:none;"
                                            "border-image:url(../QQ_Test_Demo_Images/shared1.png);}"
                                            "#sharedPushButton:hover{"
                                            "border-image:url(../QQ_Test_Demo_Images/shared2.png);}"));
    optionPushButton = new QPushButton(leftLabel);  // 设置选项按钮
    optionPushButton->setGeometry(leftLabel->width()/2-20,height()-10-40,40,40);
    optionPushButton->setObjectName("optionPushButton");
    optionPushButton->setStyleSheet(QString("#optionPushButton{"
                                            "background-color:rgba(255,255,255,0);"
                                            "border-radius:5px;"
                                            "border:none;"
                                            "border-image:url(../QQ_Test_Demo_Images/option1.png);}"
                                            "#optionPushButton:hover{"
                                            "border-image:url(../QQ_Test_Demo_Images/option2.png);}"));

    // // 中间区域----------------------------------------------------------
    searchLineEdit = new QLineEdit(middleLabel);// 搜索栏
    searchLineEdit->setPlaceholderText("搜索");
    searchLineEdit->setGeometry(15,30,180,30);
    searchLineEdit->setObjectName("searchLineEdit");
    searchLineEdit->setStyleSheet(QString("#searchLineEdit{"
                                          "border:1px solid #eaeaea;"
                                          "border-radius:5px;"
                                          "padding-left:25px;"
                                          "background-color:#f5f5f5;}"
                                          "#searchLineEdit:focus{"
                                          "background-color:#ffffff;}"));
    searchlogoLabel = new QLabel(searchLineEdit);
    searchlogoLabel->setGeometry(7.5,7.5,15,15);
    searchlogoLabel->setObjectName("searchlogoLabel");
    searchlogoLabel->setCursor(Qt::ArrowCursor);
    searchlogoLabel->setStyleSheet(QString("#searchlogoLabel{"
                                       "border-image:url(../QQ_Test_Demo_Images/search.png);}"));

    addPushButton = new QPushButton(middleLabel); // 添加按钮
    addPushButton->setGeometry(searchLineEdit->width()+25,30,30,30);
    addPushButton->setObjectName("addPushButton");
    addPushButton->setText("+");
    addPushButton->setStyleSheet(QString("#addPushButton{"
                                          "border:1px solid #eaeaea;"
                                          "border-radius:5px;"
                                          "background-color:#f5f5f5;}"
                                          "#addPushButton:hover{"
                                          "background-color:rgb(220,220,220);}"));
    messagesListWidget = new QListWidget(middleLabel);// 消息列表
    messagesListWidget->setGeometry(0,75,250,middleLabel->height()-addPushButton->y()-addPushButton->height());
    messagesListWidget->setObjectName("messagesListWidget");
    messagesListWidget->setStyleSheet(QString("#messagesListWidget{"
                                          "border:1px solid #eaeaea;}"));


    // 右侧区域------------------------------------------------------------
    grouptitleLabel = new QLabel(rightLabel);// 群名面板
    grouptitleLabel->setGeometry(10,0,240,40);
    grouptitleLabel->setObjectName("grouptitleLabel");
    grouptitleLabel->setText("企业版QQ测试交流群01 (2000)");
    grouptitleLabel->setStyleSheet(QString("#grouptitleLabel{"
                                           "font-size:16px;"
                                           "border-bottom:1px solide #eaeaea;}"));

    invitePushButton = new QPushButton(rightLabel);// 邀请按钮
    invitePushButton->setGeometry(rightLabel->width()-80,0,40,40);
    invitePushButton->setObjectName("invitePushButton");
    invitePushButton->setStyleSheet(QString("#invitePushButton{"
                                            "border-image:url(../QQ_Test_Demo_Images/add1.png);"
                                            "background-color:rgba(255,255,255,0)}"
                                            "#invitePushButton:hover{"
                                            "border-image:url(../QQ_Test_Demo_Images/add2.png);}"));

    groupsetPushButton = new QPushButton(rightLabel);// 群设置按钮
    groupsetPushButton->setGeometry(rightLabel->width()-40,0,40,40);
    groupsetPushButton->setObjectName("groupsetPushButton");
    groupsetPushButton->setStyleSheet(QString("#groupsetPushButton{"
                                              "border:none;"
                                              "background-color:rgba(255,255,255,0);"
                                              "border-image:url(../QQ_Test_Demo_Images/groupset1.png);}"
                                              "#groupsetPushButton:hover{"
                                              "border-image:url(../QQ_Test_Demo_Images/groupset2.png)}"));

    messageShowTextEdit = new QTextEdit(rightLabel);// 消息显示框
    messageShowTextEdit->setGeometry(0,40,rightLabel->width()/4*3,rightLabel->height()/3*2-40);
    messageShowTextEdit->setObjectName("messageShowTextEdit");
    messageShowTextEdit->setStyleSheet(QString("#messageShowTextEdit{"
                                               "border-top:1px solid #eaeaea;"
                                               "border-right:1px solid #eaeaea;"
                                               "background-color:#f6f6f6;}"));

    //--------------------------------------------------------------------------
    messageSendLabel = new QLabel(rightLabel);
    messageSendLabel->setGeometry(0,messageShowTextEdit->y()+messageShowTextEdit->height(),messageShowTextEdit->width(),
                                    rightLabel->height()-messageShowTextEdit->y()-messageShowTextEdit->height());
    messageSendLabel->setObjectName("messageSendLabel");
    messageSendLabel->setStyleSheet(QString("#messageSendLabel{"
                                               "border-right:1px solid #eaeaea;"
                                               "border-top:1px solid #eaeaea;"
                                               "background-color:#f6f6f6;}"));

    //-----------------------------------------------------------------------------
    emojLabel = new QLabel(messageSendLabel);
    emojLabel->setGeometry(0,0,messageSendLabel->width(),40);

    emojPushButton = new QPushButton(emojLabel);
    emojPushButton->setGeometry(0,5,30,30);
    emojPushButton->setObjectName("emojPushButton");
    emojPushButton->setStyleSheet(QString("#emojPushButton{"
                                          "border:none;"
                                          "background-color:rgba(255,255,255,0);"
                                          "border-image:url(../QQ_Test_Demo_Images/emoj1.png);}"
                                          "#emojPushButton:hover{"
                                          "border:none;"
                                          "border-image:url(../QQ_Test_Demo_Images/emoj2.png);}"));

    filePushButton = new QPushButton(emojLabel);
    filePushButton->setGeometry(emojPushButton->x()+emojPushButton->width(),5,30,30);
    filePushButton->setObjectName("filePushButton");
    filePushButton->setStyleSheet(QString("#filePushButton{"
                                          "border:none;"
                                          "background-color:rgba(255,255,255,0);"
                                          "border-image:url(../QQ_Test_Demo_Images/file1.png);}"
                                          "#filePushButton:hover{"
                                          "border:none;"
                                          "border-image:url(../QQ_Test_Demo_Images/file2.png);}"));

    picturePushButton = new QPushButton(emojLabel);
    picturePushButton->setGeometry(filePushButton->x()+filePushButton->width(),5,30,30);
    picturePushButton->setObjectName("picturePushButton");
    picturePushButton->setStyleSheet(QString("#picturePushButton{"
                                          "border:none;"
                                          "background-color:rgba(255,255,255,0);"
                                          "border-image:url(../QQ_Test_Demo_Images/picture1.png);}"
                                          "#picturePushButton:hover{"
                                          "border:none;"
                                          "border-image:url(../QQ_Test_Demo_Images/picture2.png);}"));


    historyPushButton = new QPushButton(emojLabel);
    historyPushButton->setGeometry(emojLabel->width()-40,5,30,30);
    historyPushButton->setObjectName("historyPushButton");
    historyPushButton->setStyleSheet(QString("#historyPushButton{"
                                             "border:none;"
                                             "background-color:rgba(255,255,255,0);"
                                             "border-image:url(../QQ_Test_Demo_Images/histroy1.png);}"
                                             "#historyPushButton:hover{"
                                             "border:none;"
                                             "border-image:url(../QQ_Test_Demo_Images/histroy2.png);}"));


    messageSendTextEdit = new QTextEdit(messageSendLabel);// 消息发送框
    messageSendTextEdit->setGeometry(0,emojLabel->height(),messageSendLabel->width(),
                                     messageSendLabel->height()-80);
    messageSendTextEdit->setObjectName("messageSendTextEdit");
    messageSendTextEdit->setStyleSheet(QString("#messageSendTextEdit{"
                                               "background-color:#f6f6f6;"
                                               "border:none;}"));

    sendPushButton = new QPushButton(messageSendLabel);
    sendPushButton->setGeometry(messageSendLabel->width()-80,messageSendTextEdit->y()+messageSendTextEdit->height()+5,70,26);
    sendPushButton->setObjectName("sendPushButton");
    sendPushButton->setDisabled(true);
    sendPushButton->setText("发送");
    sendPushButton->setStyleSheet(QString("#sendPushButton{"
                                          "border-radius:5px;"
                                          "background-color:#0099ff;"
                                          "color:#4db8ff;}"
                                          "#sendPushButton:hover{"
                                          "background-color:#00AAff}"));

    gourpnoticeLabel = new QLabel(rightLabel); // 群公告面板
    gourpnoticeLabel->setGeometry(rightLabel->width()-(rightLabel->width()-messageShowTextEdit->width()),
                                  messageShowTextEdit->y(),rightLabel->width()-messageShowTextEdit->width(),
                                  messageShowTextEdit->height()/2);
    gourpnoticeLabel->setObjectName("gourpnoticeLabel");
    gourpnoticeLabel->setStyleSheet(QString("#gourpnoticeLabel{"
                                            "border-top:1px solid #eaeaea;"
                                            "border-bottom:1px solid #eaeaea;}"));

    groupcountLabel = new QLabel(rightLabel); // 群成员数量面板
    groupcountLabel->setGeometry(gourpnoticeLabel->x(),gourpnoticeLabel->y()+gourpnoticeLabel->height(),gourpnoticeLabel->width(),40);
    groupcountLabel->setText("群成员 2000");
    groupcountLabel->setObjectName("groupcountLabel");
    groupcountLabel->setStyleSheet(QString("#groupcountLabel{"
                                           "padding-left:10px;"
                                           "font-size:13px;}"));

    searchGpUserPushButton = new QPushButton(rightLabel);// 搜索群成员按钮
    searchGpUserPushButton->setGeometry(rightLabel->width()-40,groupcountLabel->y(),40,40);
    searchGpUserPushButton->setObjectName("searchGpUserPushButton");
    searchGpUserPushButton->setCursor(Qt::PointingHandCursor);
    searchGpUserPushButton->setStyleSheet(QString("#searchGpUserPushButton{"
                                                  "border-image:url(../QQ_Test_Demo_Images/search2.png);}"));

    groupuserListWidget = new QListWidget(rightLabel); // 群成员列表
    groupuserListWidget->setGeometry(gourpnoticeLabel->x(),searchGpUserPushButton->y()+searchGpUserPushButton->height(),gourpnoticeLabel->width(),
                                     rightLabel->height()- searchGpUserPushButton->y()-searchGpUserPushButton->height());
    groupuserListWidget->setObjectName("groupuserListWidget");
    groupuserListWidget->setStyleSheet(QString("#groupuserListWidget{"
                                               "border-bottom-right-radius:10px;"
                                               "background-color:#f6f6f6;}"));
}

void MainWindow::InitWindowAssemblyEvent()
{
    // 设置关闭按钮事件
    connect(closePushButton,SIGNAL(clicked()),this,SLOT(close()));

    // 设置最小化按钮事件
    connect(minPushButton,SIGNAL(clicked()),this,SLOT(showMinimized()));

    // 消息、好友、群组按钮
    connect(messagesPushButton,&QPushButton::clicked,this,[this](){
        if(messagesPushButton->isDown()==false)
        {
            messagesPushButton->setDown(true);
            messagesPushButton->setStyleSheet(QString("#messagesPushButton{"
                                                      "border-image:url(../QQ_Test_Demo_Images/chat2.png);}"));
            messagesPushButton->setDown(true);
            firendsPushButton->setDown(false);
            emit firendsPushButton->released();
            groupsPushButton->setDown(false);
            emit groupsPushButton->released();
        }
    });
    connect(messagesPushButton,&QPushButton::released,this,[this](){
            messagesPushButton->setStyleSheet(QString("#messagesPushButton{"
                                                      "background-color:rgba(255,255,255,0);"
                                                      "border-radius:5px;"
                                                      "border:none;"
                                                      "border-image:url(../QQ_Test_Demo_Images/chat1.png);}"
                                                      "#messagesPushButton:hover{"
                                                      "background-color:rgba(220,220,220,255);}"));
    });

    connect(firendsPushButton,&QPushButton::clicked,this,[this](){
        if(firendsPushButton->isDown()==false)
        {
            firendsPushButton->setDown(true);
            firendsPushButton->setStyleSheet(QString("#firendsPushButton{"
                                                      "border-image:url(../QQ_Test_Demo_Images/firend2.png);}"));
            firendsPushButton->setDown(true);
            messagesPushButton->setDown(false);
            emit messagesPushButton->released();
            groupsPushButton->setDown(false);
            emit groupsPushButton->released();
        }
    });
    connect(firendsPushButton,&QPushButton::released,this,[this](){
        firendsPushButton->setStyleSheet(QString("#firendsPushButton{"
                                                  "background-color:rgba(255,255,255,0);"
                                                  "border-radius:5px;"
                                                  "border:none;"
                                                  "border-image:url(../QQ_Test_Demo_Images/firend1.png);}"
                                                  "#firendsPushButton:hover{"
                                                  "background-color:rgba(220,220,220,255);}"));
    });

    connect(groupsPushButton,&QPushButton::clicked,this,[this](){
        if(groupsPushButton->isDown()==false)
        {
            groupsPushButton->setDown(true);
            groupsPushButton->setStyleSheet(QString("#groupsPushButton{"
                                                      "border-image:url(../QQ_Test_Demo_Images/group2.png);}"));
            groupsPushButton->setDown(true);
            messagesPushButton->setDown(false);
            emit messagesPushButton->released();
            firendsPushButton->setDown(false);
            emit firendsPushButton->released();
        }
    });
    connect(groupsPushButton,&QPushButton::released,this,[this](){
        groupsPushButton->setStyleSheet(QString("#groupsPushButton{"
                                                  "background-color:rgba(255,255,255,0);"
                                                  "border-radius:5px;"
                                                  "border:none;"
                                                  "border-image:url(../QQ_Test_Demo_Images/group1.png);}"
                                                  "#groupsPushButton:hover{"
                                                  "background-color:rgba(220,220,220,255);}"));
    });

    // 消息发送框
    connect(messageSendTextEdit,&QTextEdit::textChanged,this,[this](){
        if(messageSendTextEdit->toPlainText().isEmpty() != true)
        {
            sendPushButton->setDisabled(false);
            sendPushButton->setStyleSheet(QString("#sendPushButton{"
                                                  "border-radius:5px;"
                                                  "background-color:#0099ff;"
                                                  "color:#ffffff;}"
                                                  "#sendPushButton:hover{"
                                                  "background-color:#00AAff}"));
        }
        else
        {
            sendPushButton->setDisabled(true);
            sendPushButton->setStyleSheet(QString("#sendPushButton{"
                                                  "border-radius:5px;"
                                                  "background-color:#0099ff;"
                                                  "color:#4db8ff;}"));
        }

    });
}

后续还有很多可以优化的地方，目前就写做成这样。

tips：这里给即将踏入QT的朋友们一个介意，还是尽量不要手写样式表，太难受了o(╥﹏╥)o。

下一个要完成的部分是

1、主界面的用户聊天消息列表

2、主界面群用户列表

3、主界面消息展示界面

4、主界面的表情选择

5、主界面的文件选择

6、主界面的图片选择

7、主界面的头像选取

还剩余要完成的部分：

1、聊天窗口界面

2、文件共享界面

3、软件设置界面

4、历史消息界面

5、所有界面的功能完善

6、可能还会增加其他的后续功能

在原有界面的基础进行了好有列表、群聊列表、消息列表，以及群聊成员列表的增加。

但是整个界面的一些细节之处还需要完善，这个界面还有很多功能没实现，后面慢慢更新

下面是列表里面的Item类型，用来显示用户或者群的一些信息的。

item.h

#ifndef ITEM_H
#define ITEM_H

#include <QObject>
#include <QWidget>
#include <QLabel>

class Item : public QWidget
{
public:
    Item(QWidget *parent = nullptr);
    ~Item();

    void setLogo(QString logopath);
    void setName(QString username);
    void setMessage(QString message);
    void setLastTime(QString lasttime);
    void setSimpleMode(bool state);
    // void setGroupMode(bool state = false);
    // void setMessageMode(bool state = true);
    // void setUserMode(bool state = false);
    void setTitle(QString title);
    void setState(bool state,bool mode = false);

private:
    QLabel userlogoLabel; // 用户头像面板
    QLabel usernameLabel; // 用户名称面板
    QLabel usermessageLabel;// 用户消息面板
    QLabel lasttimeLable; // 最后时间
};

#endif // ITEM_H

item.cpp

#include "item.h"

Item::Item(QWidget *parent)
    :QWidget(parent)
{
    this->setFixedSize(250,60);
    userlogoLabel.setGeometry(height()/6,height()/6,(height()/6)*4,(height()/6)*4);
    userlogoLabel.setObjectName("userlogoLabel");
    userlogoLabel.setStyleSheet(QString("#userlogoLabel{"
                                        "border:1px solid #cccccc;"
                                        "border-radius:20px;"
                                        "background-color:#cccccc;}"));
    userlogoLabel.setParent(this);

    usernameLabel.setGeometry(userlogoLabel.x()+userlogoLabel.width()+height()/6,height()/6,
                              width()-(userlogoLabel.x()+userlogoLabel.width()+10)-60,(userlogoLabel.height()/4)*3);
    usernameLabel.setText("企业版QQ测试交流群01 (2000)");
    usernameLabel.setObjectName("usernameLabel");
    usernameLabel.setStyleSheet(QString("#usernameLabel{"
                                        "font-size:15px;}"));
    // usernameLabel.
    usernameLabel.setParent(this);

    usermessageLabel.setGeometry(usernameLabel.x(),usernameLabel.y()+usernameLabel.height(),
                                 usernameLabel.width(),usernameLabel.height()/3);
    usermessageLabel.setText("测试消息内容内容太少了不断地来凑....");
    usermessageLabel.setObjectName("usermessageLabel");
    usermessageLabel.setStyleSheet(QString("#usermessageLabel{"
                                        "font-size:10px;"
                                        "color:#50514F;}"));
    usermessageLabel.setParent(this);

    lasttimeLable.setGeometry(usernameLabel.x()+usernameLabel.width()+10,usernameLabel.y(),
                              50,usernameLabel.height()-5);
    lasttimeLable.setText("19:30");
    lasttimeLable.setObjectName("lasttimeLable");
    lasttimeLable.setStyleSheet(QString("#lasttimeLable{"
                                           "font-size:8px;}"));
    lasttimeLable.setParent(this);
}
Item::~Item()
{

}

void Item::setLogo(QString logopath)
{
    userlogoLabel.setStyleSheet(QString("#userlogoLabel{"
                                        "border:1px solid #cccccc;"
                                        )+QString("border-image:url(")+logopath+QString(");")
                                        +
                                        QString("border-radius:20px;""background-color:#cccccc;}"));
}

void Item::setName(QString username)
{
    usernameLabel.setText(username);
}

void Item::setMessage(QString message)
{
    usermessageLabel.setText(message);
}

void Item::setLastTime(QString lasttime)
{
    lasttimeLable.setText(lasttime);
}

// void Item::setGroupMode(bool state)
// {

// }

// void Item::setUserMode(bool state)
// {

// }

void Item::setSimpleMode(bool state)
{
    if(state == true)
    {
        usernameLabel.setGeometry(usernameLabel.x(),usernameLabel.y(),usernameLabel.width(),userlogoLabel.height());
        usermessageLabel.setVisible(false);
        lasttimeLable.setVisible(false);
    }
    else
    {
        usernameLabel.setGeometry(userlogoLabel.x()+userlogoLabel.width()+height()/6,height()/6,
                                  width()-(userlogoLabel.x()+userlogoLabel.width()+10)-60,(userlogoLabel.height()/4)*3);
        usermessageLabel.setVisible(true);
        lasttimeLable.setVisible(true);
    }
}

// void Item::setLastTimeMode(bool state)
// {
//     lasttimeLable.setVisible(state);
// }

void Item::setTitle(QString title)
{

}

void Item::setState(bool state, bool mode)
{

}

THIRTEEN713

关注

7
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
Qt实现企业版QQ--主界面

没有一比一的复刻QQ的界面所有组件，因为后期加逻辑的时候，有些功能其实没必要或者说目前来说没法实现的。拖到了今天，整个界面的大体差不多完成了。左边的是QQ的主界面，右边的是QT写的主界面，其实还剩消息的列表组件和聊天界面以及群成员的组件没完成，明天在继续。后续要优化的话，会把关闭按钮，背景面板等这些重复的组件一起放到window类里面。1、新增了一个window类型，登录界面类和主界面类继承window类型。2、将鼠标的拖动事件放到了window（窗口类）类里面了。然后就是今天完成的部分了，主界面类。
复制链接

扫一扫