天天看点

我的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风格主界面【开源】

继续阅读