一、概述
好久没有做业务相关的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。移除的过程可能像下面这样
- 隐藏被拖拽的按钮上的占位控件
- 移除对应的面板，即中心内容窗口
- 让面板跟随鼠标进行移动，位置在拖拽的页签下方
i