Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Ribbon-like QToolButton group
QtWS25 Last Chance

Ribbon-like QToolButton group

Scheduled Pinned Locked Moved Unsolved General and Desktop
qtoolbuttonribbon ui
8 Posts 3 Posters 1.4k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    MajidKamali
    wrote on last edited by
    #1

    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

    1 Reply Last reply
    0
    • mrjjM Offline
      mrjjM Offline
      mrjj
      Lifetime Qt Champion
      wrote on last edited by
      #2

      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.

      1 Reply Last reply
      3
      • M Offline
        M Offline
        MajidKamali
        wrote on last edited by
        #3

        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

        1 Reply Last reply
        0
        • Christian EhrlicherC Offline
          Christian EhrlicherC Offline
          Christian Ehrlicher
          Lifetime Qt Champion
          wrote on last edited by Christian Ehrlicher
          #4

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

          Qt Online Installer direct download: https://download.qt.io/official_releases/online_installers/
          Visit the Qt Academy at https://academy.qt.io/catalog

          1 Reply Last reply
          4
          • M Offline
            M Offline
            MajidKamali
            wrote on last edited by
            #5

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

            1 Reply Last reply
            0
            • Christian EhrlicherC Offline
              Christian EhrlicherC Offline
              Christian Ehrlicher
              Lifetime Qt Champion
              wrote on last edited by
              #6

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

              Qt Online Installer direct download: https://download.qt.io/official_releases/online_installers/
              Visit the Qt Academy at https://academy.qt.io/catalog

              1 Reply Last reply
              3
              • M Offline
                M Offline
                MajidKamali
                wrote on last edited by
                #7

                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

                1 Reply Last reply
                0
                • Christian EhrlicherC Offline
                  Christian EhrlicherC Offline
                  Christian Ehrlicher
                  Lifetime Qt Champion
                  wrote on last edited by
                  #8

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

                  Qt Online Installer direct download: https://download.qt.io/official_releases/online_installers/
                  Visit the Qt Academy at https://academy.qt.io/catalog

                  1 Reply Last reply
                  2

                  • Login

                  • Login or register to search.
                  • First post
                    Last post
                  0
                  • Categories
                  • Recent
                  • Tags
                  • Popular
                  • Users
                  • Groups
                  • Search
                  • Get Qt Extensions
                  • Unsolved