天天看點

我的Qt作品(3)基于QTabWidget和AdvancedDocking實作的Ribbon風格主界面【開源】

Qt 實作的Ribbon風格主界面,基本思路是定制QTabWidget,通過QSS(樣式表)實作顯示樣式的調整。左邊和底部的停靠視窗是采用第三方控件實作的。

即:用qtabwidget+qss可以實作ribbon。

1、先看看最終效果

我的Qt作品(3)基于QTabWidget和AdvancedDocking實作的Ribbon風格主界面【開源】
停靠視窗允許滑鼠拖動和停靠任意位置。
我的Qt作品(3)基于QTabWidget和AdvancedDocking實作的Ribbon風格主界面【開源】
2、Ribbon菜單欄的實作思路,完全是采用原生的QTabWidget來開發的。把各個QToolButton按鈕拖入。然後通過QSS樣式表調出效果。
我的Qt作品(3)基于QTabWidget和AdvancedDocking實作的Ribbon風格主界面【開源】
每個Tab添加栅格布局:
我的Qt作品(3)基于QTabWidget和AdvancedDocking實作的Ribbon風格主界面【開源】

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

4、Tabbar參考了開源項目:

https://github.com/SeriousAlexej/TabToolbar
我的Qt作品(3)基于QTabWidget和AdvancedDocking實作的Ribbon風格主界面【開源】

繼續閱讀