一、概述
今天是组件化的第三篇文章了，前两篇文章主要是以功能为主，分别讲解了 高仿富途牛牛-组件化(一)-支持页签拖拽、增删、小工具和高仿富途牛牛-组件化(二)-磁力吸附，其中也不乏有一些小的bug，不过这些都不是问题。
之前的效果展示只是为了表达意思，界面是真的丑，标准的程序员审美，哈哈哈。今天这篇文章主要是对之前的程序进行了美化，并且进行了一些bug的修改。
效果美化是参照富途牛牛做的，虽然不是一模一样，但是确实比之前的效果好了一些，喜欢的同学可以参考下。
文章最后会把描述显示效果的qss文件贴上，希望可以帮到大家
二、效果展示
下面个gif图，录制的时间比较长，大家可以仔细看下，交互效果完全是参照富途牛牛做的，如有问题，欢迎提出。感谢！！！
欢迎大家提出问题，交互、配色都可以
三、工具箱
工具箱是一个很重要的功能。我们的每一个独立组件模板都拥有一个工具箱。
- 工具箱自身支持移动
- 组件模板移动时 会联动工具箱移动（工具箱和组件模板的相对位置不变）
下面我们来分析下工具箱是怎么做的
1、布局
首先，从界面布局上我们先来说下，工具箱从整体颜色划分上，可以分为两个部分：标题栏和客户区窗口。
a、标题栏
标题栏我们是一个窗口的眼睛，通过标题栏的命名我们可以看到这个窗口是干什么的，例如展示图中所示，交易、迷你报价、自选股、今日统计等等。
除此之外，标题栏还提供了一个很灵活的操作：移动窗口，我们可以通过鼠标按下标题栏来进行窗口拖拽
这里我们为了实现这个功能，重写了QWidget的三个接口，实现内容都比较简单，这里就不做说明了，有兴趣的自行百度，网上一大堆。
virtual void mousePressEvent(QMouseEvent *) override;
virtual void mouseMoveEvent(QMouseEvent *) override;
virtual void mouseReleaseEvent(QMouseEvent *) override;最后也是很重要的一点，那就是标题栏还支持关闭窗口，我们通过点击标题栏上的关闭按钮，可以关闭当前窗口。
对于工具箱来说，我们也可以通过点击组件模板工具栏上的按钮进行关闭
b、客户区
一个窗口除过标题栏以为剩下的就是客户区了，客户端使我们展示展示数据的主要地方，展示效果中的工具箱里边包含了很多工具按钮，包括通用页签下的迷你报价、自选股、短线精灵，和港股页签下的迷你报价、交易、账户等等。
工具箱的客户端我们这里是只有一个QTabWidget类，而通用和港股页签就是QTabWidget下的两个页签。
每个页签里边都是一个QListWidget，我给QListWidget设置了图表展示模式，让他有了一个钟按钮的显示风格。
2、功能详解
上边我们主要分析了工具箱的一个组成部分，接下来我将会从更为详细的代码层面说明工具箱的实现过程，其中可能会包含一些qss样式表，全部的样式表将会在文章最后贴出
上边已经提供到两个页签里边的工具按钮都是包含在QListWidget控件中的，下面我直接贴出页签初始化的关键代码
void ToolBoxDialog::InitializeTools(int start, int end, const QString & title)
{
QListWidget * normalWidget = new QListWidget;
normalWidget->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
normalWidget->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
connect(normalWidget, &QListWidget::itemClicked, this, &ToolBoxDialog::ItemClicked);
normalWidget->setDragEnabled(false);
normalWidget->setViewMode(QListView::IconMode);
normalWidget->setResizeMode(QListView::Adjust);
normalWidget->setSpacing(3);
for (int i = start; i < end; ++i)
{
normalWidget->addItem(createItem(toolNames[i], toolTypes[i]));
}
m_pTabWidget->addTab(normalWidget, title);
}从上边代码可以看出，我们的列表使用了图标(QListView::IconMode)显示模式，并且设置了图标项不可以拖拽。
最后我们使用一个循环构造了很多item，插入到了QListWidget控件中
样式美化代码如下，不了解Qss语法的可以参考qt qss这篇文章，我以前写的，比较详细。
QDialog#ToolBoxDialog QTabWidget::pane { border-top: 1px solid #2B3236; }
QDialog#ToolBoxDialog QTabWidget::tab-bar { top:1px;}
QDialog#ToolBoxDialog QTabBar::tab { background:#1D2224;border-bottom: 1 solid #2B3236; min-width: 20ex; padding: 4px; color:#919AA3; }
QDialog#ToolBoxDialog QTabBar::tab:selected { border-bottom: 1 solid #FF9900; }
QDialog#ToolBoxDialog QTabBar::tab:hover { border-bottom: 1 solid #FFB700; }
QDialog#ToolBoxDialog QTabBar::tab:!selected:!hover { border-bottom: 1 solid #2B3236; }
QDialog#ToolBoxDialog QListView{border:0px solid blue;margin-top:12px;margin-left:12px;outline:none;}
QDialog#ToolBoxDialog QListView::item{padding-top:10px;border:1 solid transparent;}
QDialog#ToolBoxDialog QListView::item:hover{color:#FF9900;background:#6B7276;}最后也是最重要的一点，item我们是怎么构造的
static QListWidgetItem * createItem(const QString & text, SubWin