Qt 实现的Ribbon风格主界面,基本思路是定制QTabWidget,通过QSS(样式表)实现显示样式的调整。左边和底部的停靠窗口是采用第三方控件实现的。
即:用qtabwidget+qss可以实现ribbon。
1、先看看最终效果
停靠窗口允许鼠标拖动和停靠任意位置。 2、Ribbon菜单栏的实现思路,完全是采用原生的QTabWidget来开发的。把各个QToolButton按钮拖入。然后通过QSS样式表调出效果。 每个Tab添加栅格布局:为了方便实现Ribbon菜单栏的伸缩,我们在TabWidget右上角添加按钮,
部分源码如下:
void RibbonTabWidget::initTabBar()
{
m_tempShowTimer.setSingleShot(true);
m_tempShowTimer.setInterval(QApplication::doubleClickInterval());
this->setProperty("TTWidget", QVariant(true));
this->tabBar()->setProperty("TTTab", QVariant(true));
this->setUsesScrollButtons(true);
QFrame *cornerFrame = new QFrame(this);
cornerFrame->setProperty("TTFrame", QVariant(true));
cornerFrame->setFrameShape(QFrame::NoFrame);
cornerFrame->setLineWidth(0);
cornerFrame->setContentsMargins(0, 0, 0, 0);
cornerFrame->setSizePolicy(QSizePolicy::Preferred, QSizePolicy::Minimum);
QHBoxLayout *cornerLayout = new QHBoxLayout(cornerFrame);
cornerLayout->setMargin(0);
cornerLayout->setContentsMargins(0, 0, 0, 0);
cornerLayout->setSpacing(0);
cornerLayout->setDirection(QBoxLayout::LeftToRight);
cornerFrame->setLayout(cornerLayout);
QAction *hideAction = new QAction(this);
hideAction->setCheckable(true);
hideAction->setIcon(QIcon(":/res/icons/ribbonMinimize.png"));
QToolButton *hideButton = new QToolButton(this);
hideButton->setObjectName("btnMenu");
hideButton->setToolButtonStyle(Qt::ToolButtonIconOnly);
hideButton->setDefaultAction(hideAction);
hideButton->setAutoRaise(true);
hideButton->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
cornerLayout->addWidget(hideButton);
this->setCornerWidget(cornerFrame);
QObject::connect(this, &QTabWidget::tabBarDoubleClicked, hideAction, &QAction::trigger);
QObject::connect(this, &QTabWidget::tabBarClicked, this, &RibbonTabWidget::slotTabClicked);
QObject::connect(this, &QTabWidget::currentChanged, this, &RibbonTabWidget::slotCurrentTabChanged);
QObject::connect(hideAction, &QAction::triggered, this, [=]() {
m_tempShowTimer.start();
m_bIsMinimized = hideAction->isChecked();
hideAction->setIcon(m_bIsMinimized ? QIcon(":/res/icons/ribbonMaximize.png") : QIcon(":/res/icons/ribbonMinimize.png"));
hideAt(this->currentIndex());
if (m_bIsMinimized)
emit sigMinimized();
else
emit sigMaximized();
});
QObject::connect((QApplication *)QApplication::instance(), &QApplication::focusChanged, this, &RibbonTabWidget::slotFocusChanged);
}
3、停靠窗口是采取第三方控件实现的。开源。
https://github.com/githubuser0xFFFF/Qt-Advanced-Docking-System4、Tabbar参考了开源项目:
https://github.com/SeriousAlexej/TabToolbar