聊天项目(20) 动态加载聊天列表

聊天列表动态加载

如果要动态加载聊天列表内容,我们可以在列表的滚动区域捕获鼠标滑轮事件,并且在滚动到底部的时候我们发送一个加载聊天用户的信号

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

回到ChatDialog类里添加槽函数

  1. void ChatDialog::slot_loading_chat_user()
  2. {
  3. if(_b_loading){
  4. return;
  5. }
  6. _b_loading = true;
  7. LoadingDlg *loadingDialog = new LoadingDlg(this);
  8. loadingDialog->setModal(true);
  9. loadingDialog->show();
  10. qDebug() << "add new data to list.....";
  11. addChatUserList();
  12. // 加载完成后关闭对话框
  13. loadingDialog->deleteLater();
  14. _b_loading = false;
  15. }

槽函数中我们添加了LoadingDlg类,这个类也是个QT 设计师界面类,ui如下

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

添加stackwidget管理界面

ChatDialog界面里添加stackedWidget,然后添加两个页面

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

回头我们将这两个界面升级为我们自定义的界面

我们先添加一个自定义的QT设计师界面类ChatPage,然后将原来放在ChatDialog.ui中的chat_data_wid这个widget移动到ChatPage中ui布局如下

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

布局属性如下

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

然后我们将ChatDialog.ui中的chat_page 升级为ChatPage。

接着我们将ChatPage中的一些控件比如emo_lb, file_lb升级为ClickedLabel, receive_btn, send_btn升级为ClickedBtn

如下图:

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

然后我们在ChatPage的构造函数中添加按钮样式的编写

  1. ChatPage::ChatPage(QWidget *parent) :
  2. QWidget(parent),
  3. ui(new Ui::ChatPage)
  4. {
  5. ui->setupUi(this);
  6. //设置按钮样式
  7. ui->receive_btn->SetState("normal","hover","press");
  8. ui->send_btn->SetState("normal","hover","press");
  9. //设置图标样式
  10. ui->emo_lb->SetState("normal","hover","press","normal","hover","press");
  11. ui->file_lb->SetState("normal","hover","press","normal","hover","press");
  12. }

因为我们继承了QWidget,我们想实现样式更新,需要重写paintEvent

  1. void ChatPage::paintEvent(QPaintEvent *event)
  2. {
  3. QStyleOption opt;
  4. opt.init(this);
  5. QPainter p(this);
  6. style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
  7. }

类似的,我们的ListItemBase

  1. void ListItemBase::paintEvent(QPaintEvent *event)
  2. {
  3. QStyleOption opt;
  4. opt.init(this);
  5. QPainter p(this);
  6. style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
  7. }

ClickedLabel完善

我们希望ClickedLabel在按下的时候显示按下状态的资源,在抬起的时候显示抬起的资源,所以修改按下事件和抬起事件

  1. void ClickedLabel::mousePressEvent(QMouseEvent *event)
  2. {
  3. if (event->button() == Qt::LeftButton) {
  4. if(_curstate == ClickLbState::Normal){
  5. qDebug()<<"clicked , change to selected hover: "<< _selected_hover;
  6. _curstate = ClickLbState::Selected;
  7. setProperty("state",_selected_press);
  8. repolish(this);
  9. update();
  10. }else{
  11. qDebug()<<"clicked , change to normal hover: "<< _normal_hover;
  12. _curstate = ClickLbState::Normal;
  13. setProperty("state",_normal_press);
  14. repolish(this);
  15. update();
  16. }
  17. return;
  18. }
  19. // 调用基类的mousePressEvent以保证正常的事件处理
  20. QLabel::mousePressEvent(event);
  21. }

抬起事件

  1. void ClickedLabel::mouseReleaseEvent(QMouseEvent *event)
  2. {
  3. if (event->button() == Qt::LeftButton) {
  4. if(_curstate == ClickLbState::Normal){
  5. // qDebug()<<"ReleaseEvent , change to normal hover: "<< _normal_hover;
  6. setProperty("state",_normal_hover);
  7. repolish(this);
  8. update();
  9. }else{
  10. // qDebug()<<"ReleaseEvent , change to select hover: "<< _selected_hover;
  11. setProperty("state",_selected_hover);
  12. repolish(this);
  13. update();
  14. }
  15. emit clicked();
  16. return;
  17. }
  18. // 调用基类的mousePressEvent以保证正常的事件处理
  19. QLabel::mousePressEvent(event);
  20. }

qss美化

我们添加qss美化一下

  1. LoadingDlg{
  2. background: #f2eada;
  3. }
  4. #title_lb{
  5. font-family: "Microsoft YaHei";
  6. font-size: 18px;
  7. font-weight: normal;
  8. }
  9. #chatEdit{
  10. background: #ffffff;
  11. border: none; /* 隐藏边框 */
  12. font-family: "Microsoft YaHei"; /* 设置字体 */
  13. font-size: 18px; /* 设置字体大小 */
  14. padding: 5px; /* 设置内边距 */
  15. }
  16. #send_wid{
  17. background: #ffffff;
  18. border: none; /* 隐藏边框 */
  19. }
  20. #add_btn[state='normal']{
  21. border-image: url(:/res/add_friend_normal.png);
  22. }
  23. #add_btn[state='hover']{
  24. border-image: url(:/res/add_friend_hover.png);
  25. }
  26. #add_btn[state='press']{
  27. border-image: url(:/res/add_friend_hover.png);
  28. }
  29. #receive_btn[state='normal']{
  30. background: #f0f0f0;
  31. color: #2cb46e;
  32. font-size: 16px; /* 设置字体大小 */
  33. font-family: "Microsoft YaHei"; /* 设置字体 */
  34. border-radius: 20px; /* 设置圆角 */
  35. }
  36. #receive_btn[state='hover']{
  37. background: #d2d2d2;
  38. color: #2cb46e;
  39. font-size: 16px; /* 设置字体大小 */
  40. font-family: "Microsoft YaHei"; /* 设置字体 */
  41. border-radius: 20px; /* 设置圆角 */
  42. }
  43. #receive_btn[state='press']{
  44. background: #c6c6c6;
  45. color: #2cb46e;
  46. font-size: 16px; /* 设置字体大小 */
  47. font-family: "Microsoft YaHei"; /* 设置字体 */
  48. border-radius: 20px; /* 设置圆角 */
  49. }
  50. #send_btn[state='normal']{
  51. background: #f0f0f0;
  52. color: #2cb46e;
  53. font-size: 16px; /* 设置字体大小 */
  54. font-family: "Microsoft YaHei"; /* 设置字体 */
  55. border-radius: 20px; /* 设置圆角 */
  56. }
  57. #send_btn[state='hover']{
  58. background: #d2d2d2;
  59. color: #2cb46e;
  60. font-size: 16px; /* 设置字体大小 */
  61. font-family: "Microsoft YaHei"; /* 设置字体 */
  62. border-radius: 20px; /* 设置圆角 */
  63. }
  64. #send_btn[state='press']{
  65. background: #c6c6c6;
  66. color: #2cb46e;
  67. font-size: 16px; /* 设置字体大小 */
  68. font-family: "Microsoft YaHei"; /* 设置字体 */
  69. border-radius: 20px; /* 设置圆角 */
  70. }
  71. #tool_wid{
  72. background: #ffffff;
  73. border-bottom: 0.5px solid #ececec; /* 设置下边框颜色和宽度 */
  74. }
  75. #emo_lb[state='normal']{
  76. border-image: url(:/res/smile.png);
  77. }
  78. #emo_lb[state='hover']{
  79. border-image: url(:/res/smile_hover.png);
  80. }
  81. #emo_lb[state='press']{
  82. border-image: url(:/res/smile_press.png);
  83. }
  84. #file_lb[state='normal']{
  85. border-image: url(:/res/filedir.png);
  86. }
  87. #file_lb[state='hover']{
  88. border-image: url(:/res/filedir_hover.png);
  89. }
  90. #file_lb[state='press']{
  91. border-image: url(:/res/filedir_press.png);
  92. }

效果

最后整体运行一下看看效果, 下一节我们实现红框内的内容

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

视频链接

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

源码链接

https://gitee.com/secondtonone1/llfcchat

热门评论

热门文章

  1. slice介绍和使用

    喜欢(521) 浏览(1880)
  2. Linux环境搭建和编码

    喜欢(594) 浏览(6419)
  3. windows环境搭建和vscode配置

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

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

    喜欢(588) 浏览(2960)

最新评论

  1. 类和对象 陈宇航:支持!!!!
  2. 解决博客回复区被脚本注入的问题 secondtonone1:走到现在我忽然明白一个道理,无论工作也好生活也罢,最重要的是开心,即使一份安稳的工作不能给我带来事业上的积累也要合理的舍弃,所以我还是想去做喜欢的方向。
  3. slice介绍和使用 恋恋风辰:切片作为引用类型极大的提高了数据传递的效率和性能,但也要注意切片的浅拷贝隐患,算是一把双刃剑,这世间的常态就是在两极之间寻求一种稳定。
  4. 泛型算法的定制操作 secondtonone1:lambda和bind是C11新增的利器,善于利用这两个机制可以极大地提升编程安全性和效率。
  5. C++ 虚函数表原理和类成员内存分布 WangQi888888:class Test{ int m; int b; }中b成员是int,为什么在内存中只占了1个字节。不应该是4个字节吗?是不是int应该改为char。这样的话就会符合图上说明的情况

个人公众号

个人微信