恋恋风辰的官方博客

聊天项目(19) 实现搜索框和聊天列表
Posted on 2024-06-01 13:32:26 by 恋恋风辰 | In C++ | 原文链接

搜索框

我们需要实现如下效果

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

输入框默认不显示关闭按钮，当输入文字后显示关闭按钮，点击关闭按钮清空文字

添加CustomizeEdit类，头文件

  1. #ifndef CUSTOMIZEEDIT_H
  2. #define CUSTOMIZEEDIT_H
  3. #include <QLineEdit>
  4. #include <QDebug>
  6. class CustomizeEdit: public QLineEdit
  7. {
  8.     Q_OBJECT
  9. public:
  10.     CustomizeEdit(QWidget *parent = nullptr);
  11.     void SetMaxLength(int maxLen);
  12. protected:
  13.     void focusOutEvent(QFocusEvent *event) override
  14.     {
  15.         // 执行失去焦点时的处理逻辑
  16.         //qDebug() << "CustomizeEdit focusout";
  17.         // 调用基类的focusOutEvent()方法，保证基类的行为得到执行
  18.         QLineEdit::focusOutEvent(event);
  19.         //发送失去焦点得信号
  20.         emit sig_foucus_out();
  21.     }
  22. private:
  23.     void limitTextLength(QString text) {
  24.         if(_max_len <= 0){
  25.             return;
  26.         }
  28.         QByteArray byteArray = text.toUtf8();
  30.         if (byteArray.size() > _max_len) {
  31.             byteArray = byteArray.left(_max_len);
  32.             this->setText(QString::fromUtf8(byteArray));
  33.         }
  34.     }
  36.     int _max_len;
  37. signals:
  38.     void sig_foucus_out();
  39. };
  41. #endif // CUSTOMIZEEDIT_H

源文件

  1. #include "customizeedit.h"
  3. CustomizeEdit::CustomizeEdit(QWidget *parent):QLineEdit (parent),_max_len(0)
  4. {
  5.     connect(this, &QLineEdit::textChanged, this, &CustomizeEdit::limitTextLength);
  6. }
  8. void CustomizeEdit::SetMaxLength(int maxLen)
  9. {
  10.     _max_len = maxLen;
  11. }

设计师界面类里将ui->search_edit提升为CustomizeEdit

在ChatDialog的构造函数中设置输入的长度限制以及关闭等图标的配置

  1.     QAction *searchAction = new QAction(ui->search_edit);
  2.     searchAction->setIcon(QIcon(":/res/search.png"));
  3.     ui->search_edit->addAction(searchAction,QLineEdit::LeadingPosition);
  4.     ui->search_edit->setPlaceholderText(QStringLiteral("搜索"));
  7.     // 创建一个清除动作并设置图标
  8.     QAction *clearAction = new QAction(ui->search_edit);
  9.     clearAction->setIcon(QIcon(":/res/close_transparent.png"));
  10.     // 初始时不显示清除图标
  11.     // 将清除动作添加到LineEdit的末尾位置
  12.     ui->search_edit->addAction(clearAction, QLineEdit::TrailingPosition);
  14.     // 当需要显示清除图标时，更改为实际的清除图标
  15.     connect(ui->search_edit, &QLineEdit::textChanged, [clearAction](const QString &text) {
  16.         if (!text.isEmpty()) {
  17.             clearAction->setIcon(QIcon(":/res/close_search.png"));
  18.         } else {
  19.             clearAction->setIcon(QIcon(":/res/close_transparent.png")); // 文本为空时，切换回透明图标
  20.         }
  22.     });
  24.     // 连接清除动作的触发信号到槽函数，用于清除文本
  25.     connect(clearAction, &QAction::triggered, [this, clearAction]() {
  26.         ui->search_edit->clear();
  27.         clearAction->setIcon(QIcon(":/res/close_transparent.png")); // 清除文本后，切换回透明图标
  28.         ui->search_edit->clearFocus();
  29.         //清除按钮被按下则不显示搜索框
  30.         //ShowSearch(false);
  31.     });
  33.     ui->search_edit->SetMaxLength(15);

stylesheet.qss 中修改样式

  1. #search_wid{
  2.      background-color:rgb(247,247,247);
  3. }
  5. #search_edit {
  6.     border: 2px solid #f1f1f1;
  7. }

聊天记录列表

创建C++ 类ChatUserList

  1. #ifndef CHATUSERLIST_H
  2. #define CHATUSERLIST_H
  3. #include <QListWidget>
  4. #include <QWheelEvent>
  5. #include <QEvent>
  6. #include <QScrollBar>
  7. #include <QDebug>
  9. class ChatUserList: public QListWidget
  10. {
  11.     Q_OBJECT
  12. public:
  13.     ChatUserList(QWidget *parent = nullptr);
  14. protected:
  15.     bool eventFilter(QObject *watched, QEvent *event) override;
  17. signals:
  18.     void sig_loading_chat_user();
  19. };
  21. #endif // CHATUSERLIST_H

实现

  1. #include "chatuserlist.h"
  3. ChatUserList::ChatUserList(QWidget *parent):QListWidget(parent)
  4. {
  5.     Q_UNUSED(parent);
  6.      this->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
  7.      this->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
  8.     // 安装事件过滤器
  9.     this->viewport()->installEventFilter(this);
  10. }
  12. bool ChatUserList::eventFilter(QObject *watched, QEvent *event)
  13. {
  14.     // 检查事件是否是鼠标悬浮进入或离开
  15.     if (watched == this->viewport()) {
  16.         if (event->type() == QEvent::Enter) {
  17.             // 鼠标悬浮，显示滚动条
  18.             this->setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);
  19.         } else if (event->type() == QEvent::Leave) {
  20.             // 鼠标离开，隐藏滚动条
  21.             this->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
  22.         }
  23.     }
  25.     // 检查事件是否是鼠标滚轮事件
  26.     if (watched == this->viewport() && event->type() == QEvent::Wheel) {
  27.         QWheelEvent *wheelEvent = static_cast<QWheelEvent*>(event);
  28.         int numDegrees = wheelEvent->angleDelta().y() / 8;
  29.         int numSteps = numDegrees / 15; // 计算滚动步数
  31.         // 设置滚动幅度
  32.         this->verticalScrollBar()->setValue(this->verticalScrollBar()->value() - numSteps);
  34.         // 检查是否滚动到底部
  35.         QScrollBar *scrollBar = this->verticalScrollBar();
  36.         int maxScrollValue = scrollBar->maximum();
  37.         int currentValue = scrollBar->value();
  38.         //int pageSize = 10; // 每页加载的联系人数量
  40.         if (maxScrollValue - currentValue <= 0) {
  41.             // 滚动到底部，加载新的联系人
  42.             qDebug()<<"load more chat user";
  43.             //发送信号通知聊天界面加载更多聊天内容
  44.             emit sig_loading_chat_user();
  45.          }
  47.         return true; // 停止事件传递
  48.     }
  50.     return QListWidget::eventFilter(watched, event);
  51. }

在设计师界面类里提升ui->chat_user_list为ChatUserList

在ChatDialog构造函数和搜索清除按钮的回调中增加

  1.  ShowSearch(false);

该函数的具体实现

  1. void ChatDialog::ShowSearch(bool bsearch)
  2. {
  3.     if(bsearch){
  4.         ui->chat_user_list->hide();
  5.         ui->con_user_list->hide();
  6.         ui->search_list->show();
  7.         _mode = ChatUIMode::SearchMode;
  8.     }else if(_state == ChatUIMode::ChatMode){
  9.         ui->chat_user_list->show();
  10.         ui->con_user_list->hide();
  11.         ui->search_list->hide();
  12.         _mode = ChatUIMode::ChatMode;
  13.     }else if(_state == ChatUIMode::ContactMode){
  14.         ui->chat_user_list->hide();
  15.         ui->search_list->hide();
  16.         ui->con_user_list->show();
  17.         _mode = ChatUIMode::ContactMode;
  18.     }
  19. }

ChatDialog类中声明添加

  1.     ChatUIMode _mode;
  2.     ChatUIMode _state;
  3.     bool _b_loading;

构造函数的初始化列表初始化这些模式和状态

  1. ChatDialog::ChatDialog(QWidget *parent) :
  2.     QDialog(parent),
  3.     ui(new Ui::ChatDialog),_mode(ChatUIMode::ChatMode),
  4.     _state(ChatUIMode::ChatMode),_b_loading(false){//...}

为了让用户聊天列表更美观，修改qss文件

  1. #chat_user_wid{
  2.     background-color:rgb(0,0,0);
  3. }
  5. #chat_user_list {
  6.     background-color: rgb(247,247,248);
  7.     border: none;
  8. }
  11. #chat_user_list::item:selected {
  12.     background-color: #d3d7d4;
  13.     border: none;
  14.     outline: none;
  15. }
  17. #chat_user_list::item:hover {
  18.     background-color: rgb(206,207,208);
  19.     border: none;
  20.     outline: none;
  21. }
  23. #chat_user_list::focus {
  24.     border: none;
  25.     outline: none;
  26. }

添加聊天item

我们要为聊天列表添加item，每个item包含的样式为

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

对于这样的列表元素，我们采用设计师界面类设计非常方便, 新建设计师界面类ChatUserWid, 在ChatUserWid.ui中拖动布局如下

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

我们定义一个基类ListItemBase

  1. #ifndef LISTITEMBASE_H
  2. #define LISTITEMBASE_H
  3. #include <QWidget>
  4. #include "global.h"
  6. class ListItemBase : public QWidget
  7. {
  8.     Q_OBJECT
  9. public:
  10.     explicit ListItemBase(QWidget *parent = nullptr);
  11.     void SetItemType(ListItemType itemType);
  13.     ListItemType GetItemType();
  15. private:
  16.     ListItemType _itemType;
  18. public slots:
  20. signals:
  23. };
  25. #endif // LISTITEMBASE_H

我们实现这个基类

  1. #include "listitembase.h"
  3. ListItemBase::ListItemBase(QWidget *parent) : QWidget(parent)
  4. {
  6. }
  8. void ListItemBase::SetItemType(ListItemType itemType)
  9. {
  10.     _itemType = itemType;
  11. }
  13. ListItemType ListItemBase::GetItemType()
  14. {
  15.     return _itemType;
  16. }

我们实现ChatUserWid

  1. #ifndef CHATUSERWID_H
  2. #define CHATUSERWID_H
  4. #include <QWidget>
  5. #include "listitembase.h"
  6. namespace Ui {
  7. class ChatUserWid;
  8. }
  10. class ChatUserWid : public ListItemBase
  11. {
  12.     Q_OBJECT
  14. public:
  15.     explicit ChatUserWid(QWidget *parent = nullptr);
  16.     ~ChatUserWid();
  18.     QSize sizeHint() const override {
  19.         return QSize(250, 70); // 返回自定义的尺寸
  20.     }
  22.     void SetInfo(QString name, QString head, QString msg);
  24. private:
  25.     Ui::ChatUserWid *ui;
  26.     QString _name;
  27.     QString _head;
  28.     QString _msg;
  29. };
  31. #endif // CHATUSERWID_H

具体实现

  1. #include "chatuserwid.h"
  2. #include "ui_chatuserwid.h"
  4. ChatUserWid::ChatUserWid(QWidget *parent) :
  5.     ListItemBase(parent),
  6.     ui(new Ui::ChatUserWid)
  7. {
  8.     ui->setupUi(this);
  9.     SetItemType(ListItemType::CHAT_USER_ITEM);
  10. }
  12. ChatUserWid::~ChatUserWid()
  13. {
  14.     delete ui;
  15. }
  17. void ChatUserWid::SetInfo(QString name, QString head, QString msg)
  18. {
  19.     _name = name;
  20.     _head = head;
  21.     _msg = msg;
  22.     // 加载图片
  23.     QPixmap pixmap(_head);
  25.     // 设置图片自动缩放
  26.     ui->icon_lb->setPixmap(pixmap.scaled(ui->icon_lb->size(), Qt::KeepAspectRatio, Qt::SmoothTransformation));
  27.     ui->icon_lb->setScaledContents(true);
  29.     ui->user_name_lb->setText(_name);
  30.     ui->user_chat_lb->setText(_msg);
  31. }

在ChatDialog里定义一些全局的变量用来做测试

  1. std::vector<QString>  strs ={"hello world !",
  2.                              "nice to meet u",
  3.                              "New year，new life",
  4.                             "You have to love yourself",
  5.                             "My love is written in the wind ever since the whole world is you"};
  7. std::vector<QString> heads = {
  8.     ":/res/head_1.jpg",
  9.     ":/res/head_2.jpg",
  10.     ":/res/head_3.jpg",
  11.     ":/res/head_4.jpg",
  12.     ":/res/head_5.jpg"
  13. };
  15. std::vector<QString> names = {
  16.     "llfc",
  17.     "zack",
  18.     "golang",
  19.     "cpp",
  20.     "java",
  21.     "nodejs",
  22.     "python",
  23.     "rust"
  24. };

这些数据只是测试数据，实际数据是后端传输过来的，我们目前只测试界面功能，用测试数据即可，写一个函数根据上面的数据添加13条item记录

  1. void ChatDialog::addChatUserList()
  2. {
  3.     // 创建QListWidgetItem，并设置自定义的widget
  4.     for(int i = 0; i < 13; i++){
  5.         int randomValue = QRandomGenerator::global()->bounded(100); // 生成0到99之间的随机整数
  6.         int str_i = randomValue%strs.size();
  7.         int head_i = randomValue%heads.size();
  8.         int name_i = randomValue%names.size();
  10.         auto *chat_user_wid = new ChatUserWid();
  11.         chat_user_wid->SetInfo(names[name_i], heads[head_i], strs[str_i]);
  12.         QListWidgetItem *item = new QListWidgetItem;
  13.         //qDebug()<<"chat_user_wid sizeHint is " << chat_user_wid->sizeHint();
  14.         item->setSizeHint(chat_user_wid->sizeHint());
  15.         ui->chat_user_list->addItem(item);
  16.         ui->chat_user_list->setItemWidget(item, chat_user_wid);
  17.     }
  18. }

在ChatDialog构造函数中添加

  1. addChatUserList();

完善界面效果，新增qss

  1. ChatUserWid {
  2.     background-color:rgb(247,247,247);
  3.     border: none;
  4. }
  6. #user_chat_lb{
  7.     color:rgb(153,153,153);
  8.     font-size: 12px;
  9.     font-family: "Microsoft YaHei";
  10. }
  12. #user_name_lb{
  13.     color:rgb(0,0,0);
  14.     font-size: 14px;
  15.     font-weight: normal;
  16.     font-family: "Microsoft YaHei";
  17. }
  19. #time_wid #time_lb{
  20.    color:rgb(140,140,140);
  21.    font-size: 12px;
  22.    font-family: "Microsoft YaHei";
  23. }
  25. QScrollBar:vertical {
  26.     background: transparent; /* 将轨道背景设置为透明 */
  27.     width: 8px; /* 滚动条宽度，根据需要调整 */
  28.     margin: 0px; /* 移除滚动条与滑块之间的间距 */
  29. }
  31. QScrollBar::handle:vertical {
  32.     background: rgb(173,170,169); /* 滑块颜色 */
  33.     min-height: 10px; /* 滑块最小高度，根据需要调整 */
  34.     border-radius: 4px; /* 滑块边缘圆角，调整以形成椭圆形状 */
  35. }
  37. QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical {
  38.     height: 0px; /* 移除上下按钮 */
  39.     border: none; /* 移除边框 */
  40.     background: transparent; /* 背景透明 */
  41. }
  43. QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
  44.     background: none; /* 页面滚动部分背景透明 */
  45. }

测试效果

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

源码链接

https://gitee.com/secondtonone1/llfcchat

视频链接

https://www.bilibili.com/video/BV13Z421W7WA/?spm_id_from=333.788&vd_source=8be9e83424c2ed2c9b2a3ed1d01385e9

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

热门文章

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

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

  3. slice介绍和使用
    喜欢(521) 浏览(1945)

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

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

最新评论

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

其他链接

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

个人公众号

个人微信