恋恋风辰的官方博客

聊天项目(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. vscode搭建windows C++开发环境
    喜欢(596) 浏览(83635)

  2. 聊天项目(28) 分布式服务通知好友申请
    喜欢(507) 浏览(6104)

  3. 使用hexo搭建个人博客
    喜欢(533) 浏览(11922)

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

  5. Qt环境搭建
    喜欢(517) 浏览(24775)

最新评论

  1. 无锁并发队列 TenThousandOne:_head  和 _tail  替换为原子变量。那里pop的逻辑，val = _data[h] 可以移到循环外面吗
  2. 堆排序 secondtonone1:堆排序非常实用，定时器就是这个原理制作的。
  3. 答疑汇总(thread,async源码分析) Yagus:如果引用计数为0，则会执行 future 的析构进而等待任务执行完成，那么看到的输出将是 这边应该不对吧，std::future析构只在这三种情况都满足的时候才回block: 1.共享状态是std::async 创造的(类型是_Task_async_state) 2.共享状态没有ready 3.这个future是共享状态的最后一个引用 这边共享状态类型是“_Package_state”，引用计数即使为0也不应该block啊
  4. 再谈单例模式 secondtonone1:是的，C++11以后返回局部static变量对象能保证线程安全了。
  5. C++ 并发三剑客future, promise和async Yunfei:大佬您好，如果这个线程池中加入的异步任务的形参如果有右值引用，这个commit中的返回类型推导和bind绑定就会出现问题，请问实际工程中，是不是不会用到这种任务，如果用到了，应该怎么解决？
  6. interface应用 secondtonone1:interface是万能类型，但是使用时要转换为实际类型来使用。interface丰富了go的多态特性，也降低了传统面向对象语言的耦合性。
  7. 类和对象 陈宇航:支持！！！！
  8. 聊天项目(7) visualstudio配置grpc diablorrr:cmake文件得改一下 find_package(Boost REQUIRED COMPONENTS system filesystem)，要加上filesystem。在target_link_libraries中也同样加上
  9. 解决博客回复区被脚本注入的问题 secondtonone1:走到现在我忽然明白一个道理，无论工作也好生活也罢，最重要的是开心，即使一份安稳的工作不能给我带来事业上的积累也要合理的舍弃，所以我还是想去做喜欢的方向。
  10. boost::asio之socket的创建和连接 项空月:发现一些错别字 :每隔vector存储  是不是是每个. asio::mutable_buffers_1 o或者    是不是多打了个o
  11. string类 WangQi888888:确实错了，应该是！isspace(sind[index]). 否则不进入循环，还是原来的字符串“some string”
  12. 网络编程学习方法和图书推荐 Corleone:啥程度可以找工作
  13. 创建项目和编译 secondtonone1:谢谢支持
  14. visual studio配置boost库 一giao里我离giaogiao:请问是修改成这样吗：.\b2.exe toolset=MinGW
  15. 面试题汇总(一) secondtonone1:看到网络上经常提问的go的问题，做了一下汇总，结合自己的经验给出的答案，如有纰漏，望指正批评。
  16. 可变参数模板+异步队列实现异步打印功能 熊二:学到了%%%
  17. protobuf配置和使用 熊二:你可以把dll放到系统目录，也可以配置环境变量，还能把dll丢到lib里
  18. 聊天项目(15) 客户端实现TCP管理者 lkx:已经在&QTcpSocket::readyRead 回调函数中做了处理了的。
  19. Qt 对话框 Spade2077:QDialog w(); //这里是不是不需要带括号
  20. 处理网络粘包问题 zyouth: //消息的长度小于头部规定的长度，说明数据未收全，则先将部分消息放到接收节点里 if (bytes_transferred < data_len) { memcpy(_recv_msg_node->_data + _recv_msg_node->_cur_len, _data + copy_len, bytes_transferred); _recv_msg_node->_cur_len += bytes_transferred; ::memset(_data, 0, MAX_LENGTH); _socket.async_read_some(boost::asio::buffer(_data, MAX_LENGTH), std::bind(&CSession::HandleRead, this, std::placeholders::_1, std::placeholders::_2, shared_self)); //头部处理完成 _b_head_parse = true; return; } 把_b_head_parse = true;放在_socket.async_read_some前面是不是更好
  21. 构造函数 secondtonone1:构造函数是类的基础知识，要着重掌握
  22. 聊天项目(9) redis服务搭建 pro_lin:redis线程池的析构函数，除了pop出队列，还要free掉redis连接把
  23. Qt MVC结构之QItemDelegate介绍 胡歌-此生不换:gpt, google
  24. 利用栅栏实现同步 Dzher:作者你好！我觉得 std::thread a(write_x); std::thread b(write_y); std::thread c(read_x_then_y); std::thread d(read_y_then_x); 这个例子中的assert fail并不会发生，原子变量设定了非relaxed内存序后一个线程的原子变量被写入，那么之后的读取一定会被同步的，c和d线程中只可能同时发生一个z++未执行的情况，最终z不是1就是2了，我测试了很多次都没有assert，请问我这个观点有什么错误，谢谢！

其他链接

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

个人公众号

个人微信