QToolBox+QSS 垂直版本的QTabWidget

QToolBox简直可以说是QTabWidget的同门师兄弟，QTabWidget是主攻横向，而QToolBox是主攻竖向。

伪状态数量虽不及QTabWidget，但也都有：
:only-one 只有一个Tab时
:first 第一个Tab
:last 最后一个Tab
:middle 中间的Tab
:previous-selected 当前选中的前一个Tab
:next-selected 当前选中的后一个Tab
:selected 当前选中的Tab

分页子控件:
::tab

高对比一

QToolBox::tab:previous-selected{ background-color: red; } QToolBox::tab:next-selected{ background-color: green; } QToolBox::tab:selected { background-color: blue; color: white; }

可以明显看到显示上有点BUG，不知道是不是用得这个Qt版本有问题呢，本豆也不晓得呀！

高对比二

QToolBox::tab:first{ background-color: #1E90FF; } QToolBox::tab:last{ background-color: #9932CC; } QToolBox::tab:middle{ background-color: #32CD32; } QToolBox::tab:selected{ background-color: blue; color: white; }

这些伪状态倒还好，均可以按照预期显示。

简单样式

QToolBox { background-color: none; border: none; } QToolBox::tab { background-color: #e0e0e0; border-radius: 3px; padding: 1px 12px; margin: 2px; } QToolBox::tab:selected { background-color: #2196F3; color: white; font-weight: bold; } QToolBox::tab:hover:!selected { background-color: #bdbdbd; }

效果展示

功能

不过功能上没啥可圈可点的地方，也都是常用的添加个页，插入个页，删除个页，设置个图标等等这些啦。

这个控件名字就叫工具箱，正如其名，也就需要展示工具的时候，才会想起来用用它。但是它身子太胖，占用的空间实在是太多了，用到它的地方也着实不多。

Tab之间有默认间距，而这些间距其实是垂直布局搞得鬼，所以如果想修改间距的话，可以改改布局的spacing。

QVBoxLayout* lay = qobject_cast<QVBoxLayout*>(ui->toolBox->layout()); lay->setSpacing(0);

看，这样tab就紧紧贴在一起了！