Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Ribbon-like QToolButton group



  • Hi.
    Where can I find a widget like below image:
    a.png
    I searched the internet but I could not find anything
    How can I implement such widget with native look and feel?
    Thanks


  • Lifetime Qt Champion

    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.



  • 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


  • Qt Champions 2019

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



  • 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 :)


  • Qt Champions 2019

    @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...



  • 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
    Screenshot_20200120_065015.png


  • Qt Champions 2019

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


Log in to reply