Qt Ribbon style main interface, the basic idea is to customize QTabWidget, through QSS (style sheet) display style adjustment. The docked Windows on the left and bottom are implemented using third-party controls.

Qtabwidget + QSS enables ribbon.

1, first look at the final effect

The dock window allows the mouse to drag and dock anywhere.

2. The Ribbon menu bar is developed using native QtabWidgets. Drag in the individual QToolButton buttons. The effect is then called up through the QSS style sheet.

Add grid layout to each Tab:

To make the Ribbon menu bar scalable, we add a button in the upper right corner of the TabWidget.

Part of the source code is as follows:

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);
}
Copy the code

3, dock window is to take the third party control to achieve. Open source.

Github.com/githubuser0…

4. Tabbar references open source projects:

Github.com/SeriousAlex…

 

 

 

——

[email protected]