Ribbon-like QToolButton group

[MajidKamali]

Hi.
Where can I find a widget like below image:

I searched the internet but I could not find anything
How can I implement such widget with native look and feel?
Thanks

[mrjj]

Hi
Do you mean like in the office apps ?
Or on what platform ?
I have only seen commercial versions
https://www.devmachines.com/qtitanribbon-gallery.html

and also a few homemade versions
https://github.com/martijnkoopman/Qt-Ribbon-Widget
That does not have a native look to it.

[MajidKamali]

Actually the ribbon is not important in my question (just picked the image from ribbon).
Is there a ready-made widget like above picture? If not, how can I implement that? being inside a ribbon does not matter

[Christian Ehrlicher]

Your picture only show four QToolButtons. So what else do you need?

[MajidKamali]

I need a widget that gets a QList<QToolButton *> or QList<QAction*> in its ctor, and creates this layout and rendering. inner buttons don't have any border radius but left and right buttons have radius on outer sides. also there is a line between each button. This is what I want actually :)

[Christian Ehrlicher]

@MajidKamali said in Ribbon-like QToolButton group:

This is what I want actually :)

There is no such a widget, but putting 4 QToolButtons into a layout shouldn't be that hard...

[MajidKamali]

I tried following code but with no luck, border-radius does not work

#ifndef QTOOLBUTTONGROUP_H
#define QTOOLBUTTONGROUP_H

#include <QToolButton>
#include <QWidget>

class QToolButtonGroup : public QWidget
{
    Q_OBJECT

    QVector<QToolButton *> m_buttons;

public:
    explicit QToolButtonGroup(QWidget *parent = nullptr);

    void addButton(const QString &text, QIcon icon = QIcon());
signals:

public slots:

    // QWidget interface
public:
    virtual QSize sizeHint() const override;

private:
    void relayout();
    void addLine();
};

#endif // QTOOLBUTTONGROUP_H

#include "qtoolbuttongroup.h"

#include <QFrame>
#include <QHBoxLayout>

QToolButtonGroup::QToolButtonGroup(QWidget *parent) : QWidget(parent)
{
    QHBoxLayout *layout = new QHBoxLayout;
    layout->setSpacing(0);
    this->setLayout(layout);
}

void QToolButtonGroup::addButton(const QString &text, QIcon icon)
{
    QToolButton *btn = new QToolButton;
    btn->setText(text);
    btn->setIcon(icon);
    btn->setFixedSize(32, 32);

    if(m_buttons.size() > 0)
        addLine();

    m_buttons << btn;
    this->layout()->addWidget(btn);

    relayout();
}

QSize QToolButtonGroup::sizeHint() const
{
    if(m_buttons.size())
        return QSize(m_buttons.size() * m_buttons[0]->width(), m_buttons[0]->height());
    else
        return QSize();
}

void QToolButtonGroup::relayout()
{
    if(m_buttons.size() > 0)
    {
        const QString leftSS = "border-radius: 3px 0px 0px 3px;";
        const QString midSS = "border-radius: 0px;";
        const QString rightSS = "border-radius: 0px 3px 3px 0px;";
        m_buttons[0]->setStyleSheet(leftSS);

        for(int i = 1; i < m_buttons.size() - 1; i++)
            m_buttons[i]->setStyleSheet(midSS);

        m_buttons.last()->setStyleSheet(rightSS);
    }
}

void QToolButtonGroup::addLine()
{
    QFrame *vLine = new QFrame;
    vLine->setFrameShape(QFrame::VLine);
    vLine->setFrameShadow(QFrame::Sunken);
    vLine->setLineWidth(1);
    this->layout()->addWidget(vLine);
}

I use this class in main.cpp:

QToolButtonGroup qtbg;
qtbg.addButton("B1");
qtbg.addButton("B2");
qtbg.addButton("B3");
qtbg.show();

This is the result, there is no border around toolbuttons

[Christian Ehrlicher]

A QWidget does not draw a border but a QFrame does.