恋恋风辰的官方博客

聊天项目(23) 侧边栏切换和搜索列表
Posted on 2024-06-23 11:43:01 by 恋恋风辰 | In C++ | 原文链接

侧边栏按钮

我们接下来实现侧边栏按钮功能，希望点击一个按钮，清空其他按钮的选中状态。而我们又希望按钮上面能在有新的通知的时候出现红点的图标，所以不能用简单的按钮，要用自定义的一个widget实现点击效果

我们自定义StateWidget ，声明如下

  1. class StateWidget : public QWidget
  2. {
  3.     Q_OBJECT
  4. public:
  5.     explicit StateWidget(QWidget *parent = nullptr);
  7.     void SetState(QString normal="", QString hover="", QString press="",
  8.                   QString select="", QString select_hover="", QString select_press="");
  10.     ClickLbState GetCurState();
  11.     void ClearState();
  13.     void SetSelected(bool bselected);
  14.     void AddRedPoint();
  15.     void ShowRedPoint(bool show=true);
  17. protected:
  18.     void paintEvent(QPaintEvent* event);
  20.     virtual void mousePressEvent(QMouseEvent *ev) override;
  21.     virtual void mouseReleaseEvent(QMouseEvent *ev) override;
  22.     virtual void enterEvent(QEvent* event) override;
  23.     virtual void leaveEvent(QEvent* event) override;
  25. private:
  27.     QString _normal;
  28.     QString _normal_hover;
  29.     QString _normal_press;
  31.     QString _selected;
  32.     QString _selected_hover;
  33.     QString _selected_press;
  35.     ClickLbState _curstate;
  36.     QLabel * _red_point;
  38. signals:
  39.     void clicked(void);
  41. signals:
  43. public slots:
  44. };

接下来实现定义

  1. StateWidget::StateWidget(QWidget *parent): QWidget(parent),_curstate(ClickLbState::Normal)
  2. {
  3.     setCursor(Qt::PointingHandCursor);
  4.     //添加红点
  5.     AddRedPoint();
  6. }
  8. void StateWidget::SetState(QString normal, QString hover, QString press, QString select, QString select_hover, QString select_press)
  9. {
  10.     _normal = normal;
  11.     _normal_hover = hover;
  12.     _normal_press = press;
  14.     _selected = select;
  15.     _selected_hover = select_hover;
  16.     _selected_press = select_press;
  18.     setProperty("state",normal);
  19.     repolish(this);
  20. }
  22. ClickLbState StateWidget::GetCurState()
  23. {
  24.     return _curstate;
  25. }
  27. void StateWidget::ClearState()
  28. {
  29.     _curstate = ClickLbState::Normal;
  30.     setProperty("state",_normal);
  31.     repolish(this);
  32.     update();
  33. }
  35. void StateWidget::SetSelected(bool bselected)
  36. {
  37.     if(bselected){
  38.         _curstate = ClickLbState::Selected;
  39.         setProperty("state",_selected);
  40.         repolish(this);
  41.         update();
  42.         return;
  43.     }
  45.     _curstate = ClickLbState::Normal;
  46.     setProperty("state",_normal);
  47.     repolish(this);
  48.     update();
  49.     return;
  50. }
  53. void StateWidget::AddRedPoint()
  54. {
  55.     //添加红点示意图
  56.     _red_point = new QLabel();
  57.     _red_point->setObjectName("red_point");
  58.     QVBoxLayout* layout2 = new QVBoxLayout;
  59.     _red_point->setAlignment(Qt::AlignCenter);
  60.     layout2->addWidget(_red_point);
  61.     layout2->setMargin(0);
  62.     this->setLayout(layout2);
  63.     _red_point->setVisible(false);
  64. }
  66. void StateWidget::ShowRedPoint(bool show)
  67. {
  68.     _red_point->setVisible(true);
  69. }
  71. void StateWidget::paintEvent(QPaintEvent *event)
  72. {
  73.     QStyleOption opt;
  74.     opt.init(this);
  75.     QPainter p(this);
  76.     style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
  77.     return;
  78. }
  80. void StateWidget::mousePressEvent(QMouseEvent *event)
  81. {
  82.     if (event->button() == Qt::LeftButton) {
  83.         if(_curstate == ClickLbState::Selected){
  84.             qDebug()<<"PressEvent , already to selected press: "<< _selected_press;
  85.             //emit clicked();
  86.             // 调用基类的mousePressEvent以保证正常的事件处理
  87.             QWidget::mousePressEvent(event);
  88.             return;
  89.         }
  91.         if(_curstate == ClickLbState::Normal){
  92.             qDebug()<<"PressEvent , change to selected press: "<< _selected_press;
  93.             _curstate = ClickLbState::Selected;
  94.             setProperty("state",_selected_press);
  95.             repolish(this);
  96.             update();
  97.         }
  99.         return;
  100.     }
  101.     // 调用基类的mousePressEvent以保证正常的事件处理
  102.     QWidget::mousePressEvent(event);
  103. }
  105. void StateWidget::mouseReleaseEvent(QMouseEvent *event)
  106. {
  107.     if (event->button() == Qt::LeftButton) {
  108.         if(_curstate == ClickLbState::Normal){
  109.             //qDebug()<<"ReleaseEvent , change to normal hover: "<< _normal_hover;
  110.             setProperty("state",_normal_hover);
  111.             repolish(this);
  112.             update();
  114.         }else{
  115.             //qDebug()<<"ReleaseEvent , change to select hover: "<< _selected_hover;
  116.             setProperty("state",_selected_hover);
  117.             repolish(this);
  118.             update();
  119.         }
  120.         emit clicked();
  121.         return;
  122.     }
  123.     // 调用基类的mousePressEvent以保证正常的事件处理
  124.     QWidget::mousePressEvent(event);
  125. }
  127. void StateWidget::enterEvent(QEvent *event)
  128. {
  129.     // 在这里处理鼠标悬停进入的逻辑
  130.     if(_curstate == ClickLbState::Normal){
  131.          //qDebug()<<"enter , change to normal hover: "<< _normal_hover;
  132.         setProperty("state",_normal_hover);
  133.         repolish(this);
  134.         update();
  136.     }else{
  137.          //qDebug()<<"enter , change to selected hover: "<< _selected_hover;
  138.         setProperty("state",_selected_hover);
  139.         repolish(this);
  140.         update();
  141.     }
  143.     QWidget::enterEvent(event);
  144. }
  146. void StateWidget::leaveEvent(QEvent *event)
  147. {
  148.     // 在这里处理鼠标悬停离开的逻辑
  149.     if(_curstate == ClickLbState::Normal){
  150.         // qDebug()<<"leave , change to normal : "<< _normal;
  151.         setProperty("state",_normal);
  152.         repolish(this);
  153.         update();
  155.     }else{
  156.         // qDebug()<<"leave , change to select normal : "<< _selected;
  157.         setProperty("state",_selected);
  158.         repolish(this);
  159.         update();
  160.     }
  161.     QWidget::leaveEvent(event);
  162. }

为了让按钮好看一点，我们修改下qss文件

  1. #chat_user_name {
  2.     color:rgb(153,153,153);
  3.     font-size: 14px;
  4.     font-family: "Microsoft YaHei";
  5. }
  7. #side_chat_lb[state='normal']{
  8.     border-image: url(:/res/chat_icon.png);
  9. }
  11. #side_chat_lb[state='hover']{
  12.     border-image: url(:/res/chat_icon_hover.png);
  13. }
  15. #side_chat_lb[state='pressed']{
  16.     border-image: url(:/res/chat_icon_press.png);
  17. }
  19. #side_chat_lb[state='selected_normal']{
  20.     border-image: url(:/res/chat_icon_press.png);
  21. }
  23. #side_chat_lb[state='selected_hover']{
  24.     border-image: url(:/res/chat_icon_press.png);
  25. }
  27. #side_chat_lb[state='selected_pressed']{
  28.     border-image: url(:/res/chat_icon_press.png);
  29. }
  31. #side_contact_lb[state='normal']{
  32.     border-image: url(:/res/contact_list.png);
  33. }
  35. #side_contact_lb[state='hover']{
  36.     border-image: url(:/res/contact_list_hover.png);
  37. }
  39. #side_contact_lb[state='pressed']{
  40.     border-image: url(:/res/contact_list_press.png);
  41. }
  43. #side_contact_lb[state='selected_normal']{
  44.     border-image: url(:/res/contact_list_press.png);
  45. }
  47. #side_contact_lb[state='selected_hover']{
  48.     border-image: url(:/res/contact_list_press.png);
  49. }
  51. #side_contact_lb[state='selected_pressed']{
  52.     border-image: url(:/res/contact_list_press.png);
  53. }

回到ChatDialog.ui中，将side_chat_lb改为StateWidget，side_contact_lb改为StateWidget。

https://cdn.llfc.club/1719028635439.jpg

接下来回到ChatDialog.cpp中构造函数中添加

  1.    QPixmap pixmap(":/res/head_1.jpg");
  2.     ui->side_head_lb->setPixmap(pixmap); // 将图片设置到QLabel上
  3.     QPixmap scaledPixmap = pixmap.scaled( ui->side_head_lb->size(), Qt::KeepAspectRatio); // 将图片缩放到label的大小
  4.     ui->side_head_lb->setPixmap(scaledPixmap); // 将缩放后的图片设置到QLabel上
  5.     ui->side_head_lb->setScaledContents(true); // 设置QLabel自动缩放图片内容以适应大小
  7.     ui->side_chat_lb->setProperty("state","normal");
  9.     ui->side_chat_lb->SetState("normal","hover","pressed","selected_normal","selected_hover","selected_pressed");
  11.     ui->side_contact_lb->SetState("normal","hover","pressed","selected_normal","selected_hover","selected_pressed");
  13.     AddLBGroup(ui->side_chat_lb);
  14.     AddLBGroup(ui->side_contact_lb);
  16.     connect(ui->side_chat_lb, &StateWidget::clicked, this, &ChatDialog::slot_side_chat);
  17.     connect(ui->side_contact_lb, &StateWidget::clicked, this, &ChatDialog::slot_side_contact);

切换函数中实现如下

  1. void ChatDialog::slot_side_chat()
  2. {
  3.     qDebug()<< "receive side chat clicked";
  4.     ClearLabelState(ui->side_chat_lb);
  5.     ui->stackedWidget->setCurrentWidget(ui->chat_page);
  6.     _state = ChatUIMode::ChatMode;
  7.     ShowSearch(false);
  8. }

上述函数我们实现了清楚其他标签选中状态，只将被点击的标签设置为选中的效果,核心功能是下面

  1. void ChatDialog::ClearLabelState(StateWidget *lb)
  2. {
  3.     for(auto & ele: _lb_list){
  4.         if(ele == lb){
  5.             continue;
  6.         }
  8.         ele->ClearState();
  9.     }
  10. }

我们在构造函数里将要管理的标签通过AddGroup函数加入_lb_list实现管理

  1. void ChatDialog::AddLBGroup(StateWidget *lb)
  2. {
  3.      _lb_list.push_back(lb);
  4. }

搜索列表类

在pro中添加我们自定义一个搜索列表类

  1. class SearchList: public QListWidget
  2. {
  3.     Q_OBJECT
  4. public:
  5.     SearchList(QWidget *parent = nullptr);
  6.     void CloseFindDlg();
  7.     void SetSearchEdit(QWidget* edit);
  8. protected:
  9.     bool eventFilter(QObject *watched, QEvent *event) override {
  10.         // 检查事件是否是鼠标悬浮进入或离开
  11.         if (watched == this->viewport()) {
  12.             if (event->type() == QEvent::Enter) {
  13.                 // 鼠标悬浮，显示滚动条
  14.                 this->setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);
  15.             } else if (event->type() == QEvent::Leave) {
  16.                 // 鼠标离开，隐藏滚动条
  17.                 this->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
  18.             }
  19.         }
  21.         // 检查事件是否是鼠标滚轮事件
  22.         if (watched == this->viewport() && event->type() == QEvent::Wheel) {
  23.             QWheelEvent *wheelEvent = static_cast<QWheelEvent*>(event);
  24.             int numDegrees = wheelEvent->angleDelta().y() / 8;
  25.             int numSteps = numDegrees / 15; // 计算滚动步数
  27.             // 设置滚动幅度
  28.             this->verticalScrollBar()->setValue(this->verticalScrollBar()->value() - numSteps);
  30.             return true; // 停止事件传递
  31.         }
  33.         return QListWidget::eventFilter(watched, event);
  34.     }
  35. private:
  36.     void waitPending(bool pending = true);
  37.     bool _send_pending;
  38.     void addTipItem();
  39.     std::shared_ptr<QDialog> _find_dlg;
  40.     QWidget* _search_edit;
  41.     LoadingDlg * _loadingDialog;
  42. private slots:
  43.     void slot_item_clicked(QListWidgetItem *item);
  44.     void slot_user_search(std::shared_ptr<SearchInfo> si);
  45. signals:
  47. };

然后在构造函数中初始化条目列表

  1. SearchList::SearchList(QWidget *parent):QListWidget(parent),_find_dlg(nullptr), _search_edit(nullptr), _send_pending(false)
  2. {
  3.     Q_UNUSED(parent);
  4.      this->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
  5.      this->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
  6.     // 安装事件过滤器
  7.     this->viewport()->installEventFilter(this);
  8.     //连接点击的信号和槽
  9.     connect(this, &QListWidget::itemClicked, this, &SearchList::slot_item_clicked);
  10.     //添加条目
  11.     addTipItem();
  12.     //连接搜索条目
  13.     connect(TcpMgr::GetInstance().get(), &TcpMgr::sig_user_search, this, &SearchList::slot_user_search);
  14. }

addTipItem是用来添加一个一个条目的

  1. void SearchList::addTipItem()
  2. {
  3.     auto *invalid_item = new QWidget();
  4.     QListWidgetItem *item_tmp = new QListWidgetItem;
  5.     //qDebug()<<"chat_user_wid sizeHint is " << chat_user_wid->sizeHint();
  6.     item_tmp->setSizeHint(QSize(250,10));
  7.     this->addItem(item_tmp);
  8.     invalid_item->setObjectName("invalid_item");
  9.     this->setItemWidget(item_tmp, invalid_item);
  10.     item_tmp->setFlags(item_tmp->flags() & ~Qt::ItemIsSelectable);
  13.     auto *add_user_item = new AddUserItem();
  14.     QListWidgetItem *item = new QListWidgetItem;
  15.     //qDebug()<<"chat_user_wid sizeHint is " << chat_user_wid->sizeHint();
  16.     item->setSizeHint(add_user_item->sizeHint());
  17.     this->addItem(item);
  18.     this->setItemWidget(item, add_user_item);
  19. }

sig_user_search可以先在TcpMgr中声明信号

  1.  void sig_user_search(std::shared_ptr<SearchInfo>);

SearchInfo定义在userdata.h中

  1. class SearchInfo {
  2. public:
  3.     SearchInfo(int uid, QString name, QString nick, QString desc, int sex);
  4.     int _uid;
  5.     QString _name;
  6.     QString _nick;
  7.     QString _desc;
  8.     int _sex;
  9. };

接下来实现我们自定义的AddUserItem, 在pro中添加qt设计师界面类AddUserItem

  1. class AddUserItem : public ListItemBase
  2. {
  3.     Q_OBJECT
  5. public:
  6.     explicit AddUserItem(QWidget *parent = nullptr);
  7.     ~AddUserItem();
  8.     QSize sizeHint() const override {
  9.         return QSize(250, 70); // 返回自定义的尺寸
  10.     }
  11. protected:
  13. private:
  14.     Ui::AddUserItem *ui;
  15. };

实现

  1. AddUserItem::AddUserItem(QWidget *parent) :
  2.     ListItemBase(parent),
  3.     ui(new Ui::AddUserItem)
  4. {
  5.     ui->setupUi(this);
  6.     SetItemType(ListItemType::ADD_USER_TIP_ITEM);
  7. }
  9. AddUserItem::~AddUserItem()
  10. {
  11.     delete ui;
  12. }

我们将ChatDialog.ui中将search_list升级为SearchList类型

美化界面

我们用qss美化界面

  1. #search_edit {
  2.     border: 2px solid #f1f1f1;
  3. }
  5. /* 搜索框列表*/
  6. #search_list {
  7.     background-color: rgb(247,247,248);
  8.     border: none;
  9. }
  11. #search_list::item:selected {
  12.     background-color: #d3d7d4;
  13.     border: none;
  14.     outline: none;
  15. }
  17. #search_list::item:hover {
  18.     background-color: rgb(206,207,208);
  19.     border: none;
  20.     outline: none;
  21. }
  23. #search_list::focus {
  24.     border: none;
  25.     outline: none;
  26. }
  28. #invalid_item {
  29.     background-color: #eaeaea;
  30.     border: none;
  31. }
  33. #add_tip {
  34.     border-image: url(:/res/addtip.png);
  35. }
  37. #right_tip{
  38.  border-image: url(:/res/right_tip.png);
  39. }
  41. #message_tip{
  42.   text-align: center;
  43.   font-family: "Microsoft YaHei";
  44.   font-size: 12pt;
  45. }

我们在ChatDialog的构造函数中添加

  1. //链接搜索框输入变化
  2.     connect(ui->search_edit, &QLineEdit::textChanged, this, &ChatDialog::slot_text_changed);

slot_text_changed槽函数中实现

  1. void ChatDialog::slot_text_changed(const QString &str)
  2. {
  3.     //qDebug()<< "receive slot text changed str is " << str;
  4.     if (!str.isEmpty()) {
  5.         ShowSearch(true);
  6.     }
  7. }

源码和视频

再次启动后在输入框输入文字，就会显示搜索框

https://cdn.llfc.club/1719113143252.jpg

视频

https://www.bilibili.com/video/BV1uM4m1U7MP/?spm_id_from=333.999.0.0&vd_source=8be9e83424c2ed2c9b2a3ed1d01385e9

源码链接

https://gitee.com/secondtonone1/llfcchat

热门评论
点击查看更多评论 没有更多评论了,点击收起 展开评论

热门文章

  1. 解密定时器的实现细节
    喜欢(566) 浏览(3033)

  2. C++ 类的继承封装和多态
    喜欢(588) 浏览(4300)

  3. Linux环境搭建和编码
    喜欢(594) 浏览(9931)

  4. windows环境搭建和vscode配置
    喜欢(587) 浏览(2300)

  5. slice介绍和使用
    喜欢(521) 浏览(2229)

最新评论

  1. 类和对象 陈宇航:支持！！！！
  2. C++ 虚函数表原理和类成员内存分布 WangQi888888:class Test{ int m; int b; }中b成员是int，为什么在内存中只占了1个字节。不应该是4个字节吗？是不是int应该改为char。这样的话就会符合图上说明的情况
  3. 解决博客回复区被脚本注入的问题 secondtonone1:走到现在我忽然明白一个道理，无论工作也好生活也罢，最重要的是开心，即使一份安稳的工作不能给我带来事业上的积累也要合理的舍弃，所以我还是想去做喜欢的方向。
  4. asio多线程模型IOServicePool Lion:线程池一定要继承单例模式吗
  5. 泛型算法的定制操作 secondtonone1:lambda和bind是C11新增的利器，善于利用这两个机制可以极大地提升编程安全性和效率。

其他链接

  1. GitHub
  2. 个人博客
  3. 博客园
  4. CSDN

个人公众号

个人微信