实现实时qq好友搜索框
这篇文章围绕“QQ 好友实时搜索框”这个具体功能,记录了从初版失败到重构成功的完整思考与落地过程。场景与目标项目定位是纯 C++ 的 QQ 实现,客户端用 Qt 做 UI,并计划配套自研网络与序列化组件。当前阶段已经完成登录页和主界面,新增需求是“输入即筛选”的好友搜索体验。技术入口是 QLineEdit::textC…
项目背景 想要用纯C++实现一个QQ,包括客户端的ui和通信,以及服务端的数据收发通信。 客户端:使用C++的Qt框架实现UI(正在进行),使用自己手写的网络框架进行通信(还未开始),以及手写的bencode编码进本地序列化(已经完成)。 服务端:使用自己造好的网络框架进行数据的收发和通信(还未开始)。 本篇进度:已经实现了登录界面和基本的主界面,本次是想拓展一个实时的搜索框,结果碰到了坑,然后在此写下记录。 目前UI实现情况如下图: 登录界面: 登录界面 主界面: 主界面实时QQ好友搜索框实现思路 实现目标:当用户在搜索框输入名字的时候,会实时将当前列表内的包含该名字的好友给列举出来。 实现方式:通过连接信号 QLineEdit::textChanged 来对应用户按钮的存储控件中的槽函数。具体思路 由于我是通过 QListWidget 存下多个自己重写的 QPushButton 来实现好友列表,故想要进行列表中的删除和增加就是对 QListWidget 增加或删除 QListWidgetItem 。由于 QListWidget 只提供了 QListWidget::addItem 方法进行添加,而这个方法并不能保证在具体哪一行插入,只会在列表的尾部进行添加,所以我通过这样一个方法实现实时的列表搜索项:清空再重新创建符合条件的 QPushButton。实践实践一:通过保存一份拷贝(扑街bug) 根据这个思路,我很快想到,需要保存好搜索前的所有列表项,然后再通过用户输入的文字筛选,将符合条件的列表项添加进去。 这样很快就出现了问题:由于清空列表会导致列表项里面的所有内存都被析构!所以如果你去按照这样一个思路去实现,我们需要在每次调用 addUserBtn 添加用户按钮的时候存下一份拷贝,然后你把列表清空后内存析构也一直能用这一份拷贝再生成新的拷贝按钮来添加到列表中去,这样问题应该就解决了。 然后我马不停蹄的马上写好了代码,跑起来准备测试,立马出现新的问题:每次输入时确实会显示对应的用户按钮是没错,但图片都没了,甚至很多按钮是空的??? 经过注意排查,发现是我写拷贝构造函数的时候把很多 QString 成员转了右值用了移动构造,所以每次发送拷贝时,实际上资源已经转移了。。。 改好这个bug,又继续测试,然后果不其然,又出现了新的问题:用户输入的时候会有符合条件的项被创建没错,且都有对应的数据,但是随着继续输入创建的对象是越来越多了??? 又经过仔细排查,发现是因为每次 addUserBtn 的时候都会把对应的数据添加一份拷贝到缓存,但是如果是用户在输入框立马输入信息进行查询时,调用了这个add函数,那么就会不断的添加重复的信息到缓存中去!!! 此时很多人可能会想着用 set 替代 list 做缓存,但是我就此发现了我这个实现思路就很有问题: 一、每次重新添加控件需要把整个信息全拷贝一遍,如果数据多了会是一个很耗时的工作! 二、我发现了罪恶之源:QListWidget 把控件的生命周期牢牢把握!!!要不是每次删除控件都得把立马的东西析构才能让这个控件不显示,才不会出现这等问题!也才不会需要重复不断的创建对象!实践二:通过前后端分离+智能指针完美解决 这次推倒重来,前面的试探也并非是在做无用功,至少通过前面的实践发现,既然我们没法把 Button 的生命周期拿在手里(每次还是需要重新new出新的Button),但我们至少把 Button 里数据的生命周期拿在手里啊,我们利用数据和界面分离的思想,将数据以一个智能指针的方式保存在 Button 内部,这样一来按钮被析构,数据也不一定就会被析构,只有当智能指针的引用计数为0的时候才被析构。 所以回到前面的实践一,这次我们还是以一个缓存存下原本的数据,但是这次我们存储的不是 Button 对象,而是 Button 对象中的智能指针数据,所以只要缓存还存在,那么 Button 里面的数据就还是可以复用的!所以每次 new 出新的 Button 去显示的代价是很小的 ,因为指针的copy几乎是没有代价的。。。 而且如果用set存储指针的话,直接通过判断地址就能清楚是否是相同的数据了!这样的存储性能会比直接存下数据要高很多。 像这样把数据和界面分离开的思路,我觉得就和web端的前后端分离的思路是一模一样,所以我愿意称之为桌面端的前后端分离。附录 最后我贴上我具体实现的代码: 能看懂的应该会有收获,看不懂以后总会看得懂😁 UserButton.hclass UserButton :public QPushButton{ Q_OBJECT private: UserButton(QWidget*parent); public: //按钮的类型 enum class Type{ Meg_Btn, Use…
正在初始化 WebAssembly 引擎…
首次编译原生模块可能需要数秒
就绪后,页面交互将以接近原生的速度运行