高仿富途牛牛-组件化(一)-支持页签拖拽、增删、小工具
目录
一、概述
好久没有做业务相关的ui功能了,比较炫酷的交互效果也写的少了,最近花了2天时间写了一个简易的高仿富途牛牛组件化的功能,当然了这只是一个初步的效果,而且没有做贴图、美化等工作,但是基本的功能已经有了。本篇文章只是作为组件化的一个开始,后续还会陆续引入更多关于组件化的介绍,相信功能也会越来越丰富。除此之外,富途牛牛的一些其他高级功能也会陆续引入,不乏有k线、分时、五日、指标、自选这样的复杂功能。
自选和k线这些东西我已经有成型的效果了,可以参考,并且已经被我封装成控件,来需求即可定制
二、效果展示
说的再多,也不如贴一张效果图来的实在,下边的图展示了附图牛牛组件化的一个简单demo,虽然没有数据,但是该有的基础交互流程已经都有了。用过富途牛牛的人应该都知道。
可能有一些人不是特别了解这个功能,这里我简单的说一下:
- 主窗口templatelayout是一个基础的页签定制页面,上边的页签可以被拖拽,支持在自身组件化页面交换位置,如果出了自身组件页面时,它会自动生成一个新的templatelayout组件页面。
- 新的组件页面支持页签栏移动窗口,注意主组件页面不支持(需求限制)
- 页签栏的最左侧是一个工具按钮,点击可以唤醒工具箱
- 工具箱里边有各种小工具,当我们点击时,就会弹出小窗口subwindow
- 小窗口subwindow支持选中高亮
- 不同页签下弹出的小窗口subwindow是独立的,切换页签时,subwindow不会跟随,也就是说在不同页签创建的小窗口只显示在该页签下
- 不同组件化页面(templatelayout)之间的页签是支持互相拖拽
- 小工具窗口和templatelayout窗口是一一对应关系,并且支持移动联动,主窗口移动时,小工具自动移动;小工具移动时,主窗口不动
三、实现方案分析
写这个demo,我基本上用了2天的时间,而且写的过程中,代码结构也有一些变动,达到现在这个效果
1、第一阶段
当时只考虑了一个主组件化界面templatelayout的实现,把这个页面总共分了这么几个部门:主frame、顶部工具条、页签窗体(支持拖拽)、中心内容窗体、工具箱、小窗体subwindow。
其中值得注意的有这么几个地方
- 工具箱和主窗口的联动
- 页签的拖拽效果
除过上述两个问题以外,第一阶段暂时没有其他比较棘手的问题,简单的页面编写我这里就不做过多介绍,主要分析下上边两个问题的处理过程,也是比较重要的处理过程
a、工具箱和主窗口的联动
这个问题,说实话,当时真是想了好几个小时,花费了比较长的事件。
自开始的想法就是重写父窗口的moveevent函数,当窗体移动时,我把移动的偏移量告知工具箱,这样工具箱就可以进行联动了,后来进行实现,发现工具箱移动的总是很慢,哎!moveevent肯定是优化了一些调用,真是坑爹啊
想了一会儿了,到了吃饭时间了,算了,还是换换脑子,或许吃完饭回来就有方案了,哈哈哈,事实上还就是这样,锁屏去吃饭啦!!!
程序员即是闲不下来,去吃饭的路上又开始想了,不过这次我想到了方案,我们之前都是考虑怎么传递变化量到工具箱,那么反过来我们如果只告诉工具箱主窗口位置发生变化了呢!!!,让工具箱自己去移动,只要保证和之前的主窗口的相对位置不变即可。你说什么?相对位置不变!,大家伙是不是也想到了呢,对了,就是这么简单了,我们只需要在工具箱自己移动的时候更新这个相对位置即可,当主窗口移动时,我们仍然是要保证相对位置不变。
就是这么简单!就是这么任性!
void toolboxdialog::linkmove() { if (qwidget * parent = parentwidget()) { qpoint globalpos = parent->maptoglobal(m_relativepos); move(globalpos); } }
b、页签拖拽
在做这个组件化拖拽之前,我也简单的做过一些拖拽功能,因此这里做这个东西也不困难。首先就是我们的技术方案选择了,qt他为我们提供了一些拖拽上的功能实现,但是定制化不强,一旦我们想做的更美观,交互上更丰富一些,使用原有的操作逻辑就会遇到一些困难,因此这里我们完全自己实现一个拖拽的效果
看这里-我们通过过滤鼠标的3种事件,来模拟拖拽。哪三种事件呢?鼠标按下、鼠标移动和鼠标抬起
下面我们分析下具体的事件处理流程,既然我们想要过滤这三种事件,那么我们就必须要找一个过滤对象,来过滤所有的页签按钮事件,这里很自然的我就想到了他们的父窗口dragtabwidget,了解qt的事件循环的人应该都知道接下来我要干什么了,2个步骤:
- 把页签的事件按钮的父窗口中
- 重写父类的eventfilter函数
代码可能会像下面这样
//按钮把自己的事件先让父类处理 this这里表示父窗口 tabbutton->installeventfilter(this); //父类重写eventfilter函数 bool dragtabwidget::eventfilter(qobject * watched, qevent * event) { tabbutton * button = dynamic_cast<tabbutton *>(watched); if (button && m_buttonmaps.contains(button->getid())) { } return __super::eventfilter(watched, event); }
有了上面这个步骤之后,我们接下来只需要专心的处理鼠标事件即可
1、鼠标按下
鼠标按下时,我们这里需要记录鼠标按下的位置,方便后续移动我们的页签。
if (event->type() == qevent::mousebuttonpress) { qmouseevent * mouseevent = static_cast<qmouseevent *>(event); m_pressglobalpos = button->maptoglobal(mouseevent->pos()); m_pressbuttonpos = button->pos(); }
2、鼠标移动
当鼠标被按下时,并且进行了移动,这个时候的处理过程就比较复杂了,这里我们涉及到2种效果
首先就是我们的页签在自身的工具栏种移动,这样的情况比较好处理一些,我们只需要把根据当前的鼠标位置移动我们的占用控件
和被拖拽的页签,
占位控件:就是效果展示图中,我们看到的空白区域,主要是告诉使用者,当鼠标抬起时,控件将会在被移动到这个地方
这里边有一个小技巧:就是我们拖拽页签的时候,我们构造一个被拖拽页签的图片,跟随鼠标移动即可,这样省时、省力又省心,最主要还是bug少。
其次呢当我们的鼠标移除工具栏时,我们的页签也是要跟着被拖出原有的组件化页面的,也就是原有的templatelayout。移除的过程可能像下面这样
- 隐藏被拖拽的按钮上的占位控件
- 移除对应的面板,即中心内容窗口
- 让面板跟随鼠标进行移动,位置在拖拽的页签下方
if (event->type() == qevent::mousemove) { if (ismovetab()) { //移动当前选中按钮 movein(button); movesnapseat(button); } else { //把当前选中按钮拖出布局 moveout(button); } }
3、鼠标抬起
当我们移动页签时,无非就三种情况
- 原有工具栏移动
- 新建一个组件化页面
- 移动到另一个组件化页面
处理代码如下,这是第一个阶段的代码,有点儿问题,不支持第三种情况。
仔细回想下我们把按钮的事件都安装给了自己的父窗口dragtabwidget,可想而知不同dragtabwidget之间可能也不能进行交互了,因为他们走的都是自己的事件循环、和处理逻辑。
if (event->type() == qevent::mousebuttonrelease) { if (ismovetab()) { //移动拖拽的按钮到占位位置 movedragbutton(); } else { //添加新的独立窗口 //button 添加到新的templatelayout布局中 emit buttonmoveoutcompleted(button->getid()); //原有布局中 如果只剩下一个按钮 关闭按钮将不让使用 if (m_buttonmaps.size() == 1) { m_buttonmaps.values().first()->setcloseeanble(false); } } }
这不第一个版本有了解决不了的问题,这里我才进行了适当的重构,引入第二个版本。
第二个版本的修改主要是,按钮的事件不在交给父窗口去优先处理了,而是交给一个第三者,这个第三者接收了所有的按钮事件,包括不同dragtabwidget窗体中的按钮,这样事件就达到了统一。
2、第二阶段
为了解决不同工具栏之间可以相互拖拽页签,这里我们引入了第三方类tabmovemanager,这个类专门负责处理所有的按钮事件,处理过程和第一阶段类型,这里我把关键部分的代码贴出来
bool tabmovemanager::eventfilter(qobject * watched, qevent * event) { tabbutton * button = dynamic_cast<tabbutton *>(watched); if (button && m_tabbuttonmap.contains(button->getid())) { if (event->type() == qevent::mousebuttonpress) { qmouseevent * mouseevent = static_cast<qmouseevent *>(event); m_pressglobalpos = mouseevent->globalpos(); m_pressbuttonpos = button->maptoparent(qpoint(0, 0)); //记录从当前被拖拽的tab和模板 resolvedragtab(button); } else if (event->type() == qevent::mousemove) { if (ismovetab()) { //移动当前选中按钮 movein(button); movesnapseat(button); } else { //把当前选中按钮拖出布局 moveout(button); } } else if (event->type() == qevent::mousebuttonrelease) { if (ismovetab()) { //移动拖拽的按钮到候选模板占位位置 movedragbutton(); } else //空白处 释放鼠标 需要新构造一个templatelayout { emit neednewtemplatelayout(button->getid()); } //清理原有模板布局 if (m_pdragtemplate != m_pcandidatetemplate && m_pcandidatetemplate != nullptr) { m_pdragtemplate->cleanup(button->getid()); } //原有布局中 如果只剩下一个按钮 关闭按钮将不让使用 if (m_pdragtabwidget->getbuttoncount() == 1) { m_pdragtabwidget->gettoolbutton()->setcloseeanble(false); } ··· } } return __super::eventfilter(watched, event); }
除了处理拖拽事件以外,他还起到了一个容器的作用,所有的subpanel我都注册到这个类中,其他的地方都可以通过这个类来获取指定panel
void registersubpanel(const qstring &, subcontentwidget *); void unregistersybpanel(const qstring &); subcontentwidget * getsubpanel(const qstring &) const;
3、第三阶段
前两个阶段已经把主要的功能基本都实现了,但是代码结构上,包括一些类负责的功能上还是有一些问题。
第三阶段主要对代码进行了细微的重构,工程代码结构下图所示
下面是工程中包含的所有类:
- contentpanel:中心窗口,里边包含了一个个subpanel,每个subpanel对应一个页签。该类的内存中记录了很多窗体指针,但只负责内存维护,不对窗体的打开、关闭进行操作
- dragtabwidget:页签所属窗体,支持移动整个组件化窗口
- dragtoolbar:工具栏,内部包括调出工具箱的按钮和dragtabwidget
- smallwidget:小窗体,支持各种小工具页面
- tabbutton:页签
- tabmovemanager:静态单例,负责处理页签移动事件
- templatelayout:组件化窗口
- toolboxdialog:工具箱
- templatedefine:头文件,定义了很多变量
以上代码基本把视线组件化功能的主要逻辑讲完了,具体的代码量比较大,而且是一个不诚信的demo,暂时就不往外放了。
转载声明:本站文章无特别说明,皆为原创,版权所有,转载请注明: or twowords