Qt 實作的Ribbon風格主界面,基本思路是定制QTabWidget,通過QSS(樣式表)實作顯示樣式的調整。左邊和底部的停靠視窗是采用第三方控件實作的。
即:用qtabwidget+qss可以實作ribbon。
1、先看看最終效果

為了友善實作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