[项目:微服务即时通讯系统客户端(基于C++QT)]三,左侧界面搭建 ...

海哥  金牌会员 | 2024-9-23 07:20:43 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题

主题 826|帖子 826|积分 2478

三,左侧界面搭建

一,导入

先把MainWidget类做成“单例类”
采用的是单例模式,让某一个类,在指定进程中只有唯一的实例
先看一下MainWidget的框架
  1. QWidget//这部分是头文件保护宏,确保该头文件只被包含一次,防止因重复包含导致的编译错误。
  2. #ifndef MAINWIDGET_H
  3. #define MAINWIDGET_H
  4. //引入 Qt 的 QWidget 类,这个类是所有用户界面对象的基类。
  5. #include <QWidget>
  6. //这段代码使用 Qt 的命名空间机制。
  7. //它定义了一个名为 Ui 的命名空间,里面声明了一个名为 mainWidget 的类。
  8. //这个类通常是通过 Qt Designer 生成的,用于管理 UI 元素。
  9. QT_BEGIN_NAMESPACE
  10. namespace Ui {
  11. class mainWidget;
  12. }
  13. QT_END_NAMESPACE
  14. //这里定义了一个名为 mainWidget 的类,它继承自 QWidget。Q_OBJECT
  15. class mainWidget : public QWidget
  16. {
  17.     Q_OBJECT
  18. public:
  19.     mainWidget(QWidget *parent = nullptr);
  20.     ~mainWidget();
  21. private:
  22.     Ui::mainWidget *ui;
  23. };
  24. #endif // MAINWIDGET_H
复制代码
  1. //包含了之前定义的 mainWidget 类的头文件。
  2. #include "mainwidget.h"
  3. //包含了由 Qt Designer 生成的 UI 代码的头文件,通常负责设置 UI 元素。
  4. #include "./ui_mainwidget.h"
  5. //这行代码定义了一个静态指针成员变量 instance,初始化为 nullptr。这通常用于实现单例模式,确保 mainWidget 类只有一个实例
  6. mainWidget* mainWidget::instance=nullptr;
  7. //构造函数,接受一个可选的父窗口部件指针
  8. mainWidget::mainWidget(QWidget *parent)
  9.     : QWidget(parent)        //调用基类 QWidget 的构造函数,并将父部件传递给它
  10.     , ui(new Ui::mainWidget) //创建一个新的 Ui::mainWidget 对象,负责设置 UI。
  11. {
  12.     ui->setupUi(this);       //调用 setupUi 方法,将 UI 组件设置到当前 mainWidget 实例中
  13. }
  14. //析构函数
  15. mainWidget::~mainWidget()
  16. {
  17.     delete ui;
  18. }
复制代码
二,需求分析


三,代码誊写

前置:设置图标,需要把图标图片,导入到项目中,通过qrc文件进行管理
在本章节大致利用了一下素材
素材网站:
https://www.aigei.com/
https://www.iconfont.cn/


一,mainWidget.h的编写

  1. #ifndef MAINWIDGET_H
  2. #define MAINWIDGET_H
  3. #include <QWidget>
  4. #include <QPushButton>
  5. QT_BEGIN_NAMESPACE
  6. namespace Ui {
  7. class mainWidget;
  8. }
  9. QT_END_NAMESPACE
  10. class mainWidget : public QWidget
  11. {
  12.     Q_OBJECT
  13. private:
  14.     static mainWidget* instance;//指针指向当前的类的唯一实例
  15.     //静态指针,用于指向 mainWidget 类的唯一实例
  16.     //这是单例模式的核心,确保全局只存在一个 mainWidget 对象
  17.     //对于单例模式来说,最关键的部分,不是创建实例,而是限制别人创建实例
  18.     mainWidget(QWidget *parent = nullptr);
  19.     //他是私有的防止外部代码直接创建mainWidget实例
  20. public:
  21.     static mainWidget*  getInstance();//静态成员函数用于获取当前实例
  22.     ~mainWidget();//析构函数
  23. private:
  24.     Ui::mainWidget *ui;
  25.     //窗口最左侧部分
  26.     QWidget* windowLeft;
  27.     //窗口中间部分
  28.     QWidget* windowMid;
  29.     //窗口右侧部分
  30.     QWidget* windowRight;
  31.     //用户头像
  32.     QPushButton* userAvatar;
  33.     //会话标签页按钮
  34.     QPushButton* sessionTabBtn;
  35.     //好友标签页按钮
  36.     QPushButton* friendTabBtn;
  37.     //好友申请标签页按钮
  38.     QPushButton* applyTabBtn;
  39.     //枚举类型当前的激活的标签页是哪一个
  40.     enum ActiveTab{
  41.         SESSION_LIST,
  42.         FRIEND_LIST,
  43.         APPLY_LIST
  44.     };
  45.     ActiveTab activeTab=SESSION_LIST;//默认为会话列表
  46.     //初始化主窗口的样式布局
  47.     void initMainWindow();
  48.     //初始化左侧窗口布局
  49.     void initLeftWindow();
  50.     //初始化中间窗口布局
  51.     void initMidWindow();
  52.     //初始化右侧窗口布局
  53.     void initRightWindow();
  54.     //信号槽
  55.     void initSignalSlot();
  56.     //槽函数
  57.     void switchTabToSession();
  58.     void switchTabToFriend();
  59.     void switchTabToApply();
  60.     void loadSessionList();
  61.     void loadFriendList();
  62.     void loadApplyList();
  63. };
  64. #endif // MAINWIDGET_H
复制代码
本头文件采用了单例模式

单例模式(Singleton Pattern)是一种筹划模式,它确保一个类在程序运行期间只会创建一个实例,并且提供一个全局访问点。
到底此处的代码怎么实现的单例模式呢?

  • 私有构造函数
  • 静态实例指针static mainWidget* instance;
  • 静态访问接口static mainWidget* getInstance();
回顾静态成员的特点



  • 静态成员变量:属于类本身,而不是某个对象。所有类的实例共享同一个静态成员变量,它在程序运行时只会分配一块内存空间。
  • 静态成员函数:同样属于类,而不是对象。它只能访问静态成员变量和静态成员函数,不能访问非静态成员变量和非静态成员函数(由于非静态成员是属于具体对象的)。
单例模式ABC详解

A.构造函数是私有的mainWidget(QWidget *parent = nullptr);
防止外部代码直接创建mainWidget实例
B.**static** 修饰的 **instance** 是一个静态成员变量,它属于 **mainWidget** 类本身,而不是某个特定的 mainWidget 对象.
程序整个周期只存在一份,所有访问mainWidget类的都共享一个instance指针,初始值为nullptr的时候阐明还没有创建。
静态成员变量 instance 可以在 mainWidget 类的任何成员函数中访问,也可以通过 getInstance() 方法从类的外部访问。
C.提供对单例实例的访问
  1. mainWidget* mainWidget::getInstance()
  2. {
  3.     //此处不传入参数,以桌面为父窗口
  4.     //由于此时的窗口是整个程序的主窗口,父窗口就设定为桌面,本身就是常规设定。
  5.     if(instance==nullptr)
  6.     {
  7.         instance=new mainWidget();
  8.     }
  9.     return instance;
  10. }
复制代码
第一次调用 getInstance() 时,创建一个新的实例
第二次以后调用,直接返回instance实例;
二,逐步编写mainwidget.cpp

一,构造函数

  1. mainWidget::mainWidget(QWidget *parent)
  2.     : QWidget(parent)
  3.     , ui(new Ui::mainWidget)
  4. {
  5.     ui->setupUi(this);
  6.     //this指向被构造的mainWidget
  7.     this->setWindowTitle("Pokemon聊天室");
  8.     this->setWindowIcon(QIcon(":/resource/image/logo.png"));
  9.     //初始化主窗口的样式布局
  10.     initMainWindow();
  11.     //初始化左侧窗口布局
  12.     initLeftWindow();
  13.     //初始化中间窗口布局
  14.     initMidWindow();
  15.     //初始化右侧窗口布局
  16.     initRightWindow();
  17.     //初始化信号槽
  18.     initSignalSlot();
  19. }
复制代码
二,initMainWindow初始化主窗口

  1. void mainWidget::initMainWindow()
  2. {
  3.     //创建一个水平布局管理器
  4.     QHBoxLayout* layout=new QHBoxLayout();
  5.     //处理间隔Spacing就是layout内部元素之间的间隔距离,设置为0就是紧紧挨着水平的紧紧挨着
  6.     layout->setSpacing(0);
  7.     this->setLayout(layout);//将 layout 设置为 mainWidget 窗口的布局管理器
  8.    
  9.     //创建三个QWidget子部件
  10.     windowLeft=new QWidget();
  11.     windowMid=new QWidget();
  12.     windowRight=new QWidget();
  13.     //这三个部分马上添加到布局管理器中
  14.     //在设计界面的时候,会涉及到很多尺寸,间距,边框,字体相关细节。
  15.     windowLeft->setFixedWidth(60);//左侧导航栏为固定的70像素
  16.     windowMid->setFixedWidth(230);//中间
  17.     windowRight->setMinimumWidth(500);//右边聊天框 根据窗口自动化改变
  18.     //可以使用qq的截图来进行判定大小
  19.     //设计颜色qss
  20.     windowLeft->setStyleSheet("QWidget {background-color:rgb(23,23,23)}");//左侧导航栏为固定的70像素
  21.     windowMid->setStyleSheet("QWidget {background-color:rgb(46,46,46)}");
  22.     windowRight->setStyleSheet("QWidget {background-color:rgb(255,255,255)}");
  23.     //子窗口添加到布局管理器中
  24.     layout->addWidget(windowLeft);
  25.     layout->addWidget(windowMid);
  26.     layout->addWidget(windowRight);
  27. }
复制代码

三,initLeftWindow()

  1. //H 代表 Horizontal(水平),V 代表 Vertical(垂直)
  2. void mainWidget::initLeftWindow()
  3. {
  4.     QVBoxLayout* layout =new QVBoxLayout();
  5.     layout->setSpacing(20);//设置按钮的间距
  6.     layout->setContentsMargins(0,70,0,0);//设置左上右下的间距
  7.     windowLeft->setLayout(layout);
  8.     //添加用户头像
  9.     userAvatar =new QPushButton();
  10.     userAvatar->setFixedSize(45,45);//按钮本身的尺寸
  11.     userAvatar->setIconSize(QSize(45,45));//按钮自身的尺寸
  12.     userAvatar->setIcon(QIcon(":/resource/image/userAvatar.jpg"));
  13.     userAvatar->setStyleSheet("QPushButton{ background-color:transparent;}");
  14.     layout->addWidget(userAvatar,1,Qt::AlignTop |   Qt::AlignCenter);//1是占据空间的权重,靠上对齐,水平居中
  15.     layout->addStretch(5);//添加空白处
  16.     //添加会话标签按钮
  17.     sessionTabBtn=new QPushButton();
  18.     sessionTabBtn->setFixedSize(45,45);//按钮本身的尺寸
  19.     sessionTabBtn->setIconSize(QSize(45,45));//按钮自身的尺寸
  20.     sessionTabBtn->setIcon(QIcon(":/resource/image/session_active.png"));
  21.     sessionTabBtn->setStyleSheet("QPushButton{ background-color:transparent;}");
  22.     layout->addWidget(sessionTabBtn,1,Qt::AlignTop |   Qt::AlignCenter);
  23.     //添加好友标签页按钮
  24.     friendTabBtn=new QPushButton();
  25.     friendTabBtn->setFixedSize(45,45);//按钮本身的尺寸
  26.     friendTabBtn->setIconSize(QSize(45,45));//按钮自身的尺寸
  27.     friendTabBtn->setIcon(QIcon(":/resource/image/friend_inactive.png"));
  28.     friendTabBtn->setStyleSheet("QPushButton{ background-color:transparent;}");
  29.     layout->addWidget(friendTabBtn,1,Qt::AlignTop |   Qt::AlignCenter);
  30.     //添加好友申请标签页按钮
  31.     applyTabBtn=new QPushButton();
  32.     applyTabBtn->setFixedSize(45,45);//按钮本身的尺寸
  33.     applyTabBtn->setIconSize(QSize(45,45));//按钮自身的尺寸
  34.     applyTabBtn->setIcon(QIcon(":/resource/image/apply_inactive.png"));
  35.     applyTabBtn->setStyleSheet("QPushButton{ background-color:transparent;}");
  36.     layout->addWidget(applyTabBtn,1,Qt::AlignTop |   Qt::AlignCenter);;
  37.     layout->addStretch(20);//添加下面的空白处
  38.     //连接信号槽,处理标签页按钮切换的问题
  39. }
复制代码
四,initSignalSlot()

  1. void mainWidget::initSignalSlot()
  2. {
  3.     /
  4.     ///连接信号槽,处理标签页按钮切换的问题
  5.     /
  6.     connect(sessionTabBtn,&QPushButton::clicked,this,&mainWidget::switchTabToSession);
  7.     //连接的信号来自sessionTabBtn这个指向 QPushButton 对象的指针
  8.     //&QPushButton::clicked 表示 QPushButton 类中的 clicked 信号,clicked 信号在 QPushButton 被点击时触发
  9.     //槽(slot)函数所属对象的指针,指的是 mainWidget 类的一个实例对象,槽函数是在当前对象(即 mainWidget 类的实例)中定义的
  10.     //最后一个位置是槽函数:每当 sessionTabBtn 发出 clicked 信号时,这个槽函数就会被调用
  11.     connect(friendTabBtn,&QPushButton::clicked,this,&mainWidget::switchTabToFriend);
  12.     connect(applyTabBtn,&QPushButton::clicked,this,&mainWidget::switchTabToApply);
  13. }
复制代码
addWidget的参数中1的作用
  1. 拉伸系数的作用:它决定了当布局空间发生变化(如窗口大小改变时),该部件在布局中占据的比例。如果拉伸系数为 1,那么它在布局中将获得与其他拉伸系数为 1 的部件相同的空间份额。如果拉伸系数为 0,则该部件的大小不会随布局的空间变化而变化(即固定大小)
复制代码
五,槽函数

  1. void mainWidget::switchTabToSession()
  2. {
  3.     //1.记录当前切换到了哪一个标签页
  4.     activeTab=SESSION_LIST;
  5.     //2.调整当前图片显示情况,把会话的按钮图标设为active,另两个图标设为inactive
  6.     sessionTabBtn->setIcon(QIcon(":/resource/image/session_active.png"));
  7.     friendTabBtn->setIcon(QIcon(":/resource/image/friend_inactive.png"));
  8.     applyTabBtn->setIcon(QIcon(":/resource/image/apply_inactive.png"));
  9.     //3.在主窗口中间部分,加载会话列表数据
  10.     this->loadSessionList();
  11. }
  12. void mainWidget::switchTabToFriend()
  13. {
  14.     //1.记录当前切换到了哪一个标签页
  15.     activeTab=FRIEND_LIST;
  16.     //2.调整当前图片显示情况,把会话的按钮图标设为active,另两个图标设为inactive
  17.     sessionTabBtn->setIcon(QIcon(":/resource/image/session_inactive.png"));
  18.     friendTabBtn->setIcon(QIcon(":/resource/image/friend_active.png"));
  19.     applyTabBtn->setIcon(QIcon(":/resource/image/apply_inactive.png"));
  20.     //3.在主窗口中间部分,加载会话列表数据
  21.     this->loadFriendList();
  22. }
  23. void mainWidget::switchTabToApply()
  24. {
  25.     //1.记录当前切换到了哪一个标签页
  26.     activeTab=APPLY_LIST;
  27.     //2.调整当前图片显示情况,把会话的按钮图标设为active,另两个图标设为inactive
  28.     sessionTabBtn->setIcon(QIcon(":/resource/image/session_inactive.png"));
  29.     friendTabBtn->setIcon(QIcon(":/resource/image/friend_inactive.png"));
  30.     applyTabBtn->setIcon(QIcon(":/resource/image/apply_active.png"));
  31.     //3.在主窗口中间部分,加载会话列表数据
  32.     this->loadApplyList();
  33. }
复制代码
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

海哥

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表