郑州货运公司,孤男寡猫 朕要爱妃,极品白领后记
目录
好久没有做业务相关的ui功能了,比较炫酷的交互效果也写的少了,最近花了2天时间写了一个简易的高仿富途牛牛组件化的功能,当然了这只是一个初步的效果,而且没有做贴图、美化等工作,但是基本的功能已经有了。本篇文章只是作为组件化的一个开始,后续还会陆续引入更多关于组件化的介绍,相信功能也会越来越丰富。除此之外,富途牛牛的一些其他高级功能也会陆续引入,不乏有k线、分时、五日、指标、自选这样的复杂功能。
自选和k线这些东西我已经有成型的效果了,可以参考,并且已经被我封装成控件,来需求即可定制
说的再多,也不如贴一张效果图来的实在,下边的图展示了附图牛牛组件化的一个简单demo,虽然没有数据,但是该有的基础交互流程已经都有了。用过富途牛牛的人应该都知道。
可能有一些人不是特别了解这个功能,这里我简单的说一下:
写这个demo,我基本上用了2天的时间,而且写的过程中,代码结构也有一些变动,达到现在这个效果
当时只考虑了一个主组件化界面templatelayout的实现,把这个页面总共分了这么几个部门:主frame、顶部工具条、页签窗体(支持拖拽)、中心内容窗体、工具箱、小窗体subwindow。
其中值得注意的有这么几个地方
除过上述两个问题以外,第一阶段暂时没有其他比较棘手的问题,简单的页面编写我这里就不做过多介绍,主要分析下上边两个问题的处理过程,也是比较重要的处理过程
这个问题,说实话,当时真是想了好几个小时,花费了比较长的事件。
自开始的想法就是重写父窗口的moveevent函数,当窗体移动时,我把移动的偏移量告知工具箱,这样工具箱就可以进行联动了,后来进行实现,发现工具箱移动的总是很慢,哎!moveevent肯定是优化了一些调用,真是坑爹啊
想了一会儿了,到了吃饭时间了,算了,还是换换脑子,或许吃完饭回来就有方案了,哈哈哈,事实上还就是这样,锁屏去吃饭啦!!!
程序员即是闲不下来,去吃饭的路上又开始想了,不过这次我想到了方案,我们之前都是考虑怎么传递变化量到工具箱,那么反过来我们如果只告诉工具箱主窗口位置发生变化了呢!!!,让工具箱自己去移动,只要保证和之前的主窗口的相对位置不变即可。你说什么?相对位置不变!,大家伙是不是也想到了呢,对了,就是这么简单了,我们只需要在工具箱自己移动的时候更新这个相对位置即可,当主窗口移动时,我们仍然是要保证相对位置不变。
就是这么简单!就是这么任性!
void toolboxdialog::linkmove() { if (qwidget * parent = parentwidget()) { qpoint globalpos = parent->maptoglobal(m_relativepos); move(globalpos); } }
在做这个组件化拖拽之前,我也简单的做过一些拖拽功能,因此这里做这个东西也不困难。首先就是我们的技术方案选择了,qt他为我们提供了一些拖拽上的功能实现,但是定制化不强,一旦我们想做的更美观,交互上更丰富一些,使用原有的操作逻辑就会遇到一些困难,因此这里我们完全自己实现一个拖拽的效果
看这里-我们通过过滤鼠标的3种事件,来模拟拖拽。哪三种事件呢?鼠标按下、鼠标移动和鼠标抬起
下面我们分析下具体的事件处理流程,既然我们想要过滤这三种事件,那么我们就必须要找一个过滤对象,来过滤所有的页签按钮事件,这里很自然的我就想到了他们的父窗口dragtabwidget,了解qt的事件循环的人应该都知道接下来我要干什么了,2个步骤:
代码可能会像下面这样
//按钮把自己的事件先让父类处理 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窗体中的按钮,这样事件就达到了统一。
为了解决不同工具栏之间可以相互拖拽页签,这里我们引入了第三方类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;
前两个阶段已经把主要的功能基本都实现了,但是代码结构上,包括一些类负责的功能上还是有一些问题。
第三阶段主要对代码进行了细微的重构,工程代码结构下图所示
下面是工程中包含的所有类:
以上代码基本把视线组件化功能的主要逻辑讲完了,具体的代码量比较大,而且是一个不诚信的demo,暂时就不往外放了。
转载声明:本站文章无特别说明,皆为原创,版权所有,转载请注明: or twowords
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
如何在没有core文件的情况下用dmesg+addr2line定位段错误
用QT制作3D点云显示器——QtDataVisualization
网友评论