Qt: Drop-down button?

Question

How can I create a "drop down button" in Qt?

For a non-Qt example, see: Combination button/dropdown in office

The key point is that the widget needs an icon for the primary action, and a visually separate "pulldown arrow" to show secondary icons / actions.

Upon clicking the "pulldown arrow" for secondary options, the user should be presented with a grid of other icons to choose from. (All icons, no text.)

Does Qt have a widget that can do this?

If not, how can this be created in Qt? (I'm a new Qt user, so a Qt Designer based solution would be ideal.)

Thank you

score 20 · Answer 1 · answered Sep 05 '12 at 14:38

20

Actually, a QToolButton does this quite well.

http://qt-project.org/forums/viewthread/5377

It appears the OP asked this in a Qt forum and got a better answer. Adding it here for completeness.

answered Sep 05 '12 at 14:38

bb121622

1,036
11
13

1

link doesn't work anymore, but here is an excellent tutorial for C++: https://www.walletfox.com/course/customqtoolbutton.php – phidrho Jul 26 '18 at 09:26
FYI, link works for me. Maybe it was down temporarily? Tutorial looks good too. – bb121622 Aug 22 '18 at 16:00
now works for me too, it seems it was only temporarily – phidrho Aug 24 '18 at 15:15
The best solution and very easy to implement. (used Franzk answer) – RandomGuy Apr 12 '19 at 08:32
1

See also https://doc.qt.io/qt-5/qtoolbutton.html#ToolButtonPopupMode-enum Setting it to QToolButton::MenuButtonPopup enables the exact behavior described in the question. – Rotsiser Mho Oct 30 '19 at 17:46
Link doesn't work anymore, but it's in the web archive: https://web.archive.org/web/20150301180224/http://qt-project.org/forums/viewthread/5377 – Cyrill Jul 18 '22 at 14:20
that's why you don't put your answer on a link – iantonuk Aug 06 '23 at 02:34

Alberto · Answer 2 · 2014-02-21T09:03:10.750

You have to use a QToolButton. Then you may want to set an icon instead of button's text, set popupmenu property to menubuttonpopup. This is my code:

//widget.cpp:
#include "widget.h"
#include "ui_widget.h"

#include <QtGui>

Widget::~Widget()
{
    delete ui;
}

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    menu   = new QMenu(this);
    act0 = new QAction("test",this);
    act1 = new QAction("test1",this);
    act0->setObjectName("act0");
    act1->setObjectName("act1");
    menu->addAction(act0);
    menu->addAction(act1);
    ui->toolButton->setMenu(menu);
    connect(ui->toolButton,SIGNAL(clicked()),this,SLOT(slotTest()));
    connect(act0,SIGNAL(triggered()),this,SLOT(slotTest()));
    connect(act1,SIGNAL(triggered()),this,SLOT(slotTest()));
    adjustSize();
}

void Widget::slotTest()
{
    QToolButton *tbtn = qobject_cast<QToolButton*>(sender());
    QAction *act = qobject_cast<QAction*>(sender());
    if(tbtn)
    {
        qDebug() << "event raised by QToolButton: " << tbtn->objectName();
    }
    if(act)
    {
        qDebug() << "event raised by QAction: " << act->objectName();
    }
}

//widget.h:
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
class QMenu;
class QAction;
namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();
private slots:
    void slotTest();
private:
    QMenu *menu;
    QAction *act0;
    QAction *act1;
    Ui::Widget *ui;
};

#endif // WIDGET_H

//widget.ui:
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>Widget</class>
 <widget class="QWidget" name="Widget">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>53</width>
    <height>40</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Widget</string>
  </property>
  <layout class="QVBoxLayout" name="verticalLayout">
   <item>
    <widget class="QToolButton" name="toolButton">
     <property name="text">
      <string/>
     </property>
     <property name="icon">
      <iconset>
       <normaloff>cerca.png</normaloff>cerca.png</iconset>
     </property>
     <property name="popupMode">
      <enum>QToolButton::MenuButtonPopup</enum>
     </property>
    </widget>
   </item>
  </layout>
 </widget>
 <layoutdefault spacing="6" margin="11"/>
 <resources/>
 <connections/>
</ui>

score 11 · Answer 3 · edited Aug 09 '17 at 13:13

11

You can just use setMenu() on a regular push button.

QMenu* menu = new QMenu(this);
menu->addAction(tr("Sub-action"));
ui->button->setMenu(menu);

I don't think the menu expansion is facultative though...

edited Aug 09 '17 at 13:13

Lukas Kalbertodt

79,749
26
255
305

answered Sep 14 '15 at 21:44

leplatrem

1,005
13
25

1

See also https://doc.qt.io/qt-5/qtoolbutton.html#ToolButtonPopupMode-enum Setting it to QToolButton::MenuButtonPopup enables the exact behavior described in the question. – Rotsiser Mho Oct 30 '19 at 17:46

score 4 · Answer 4 · answered Sep 08 '12 at 15:42

I created a A firefoxlooking drop down menu from a button for my previous project. Basically i subclass QPushButton and did some custom painting. Then i add a menu to that button using the function (QPushButton.setMenu(Qmenu). The attached image show what it looks like.

Dropbutton

score 4 · Answer 5 · answered Jun 17 '18 at 13:09

4

A simple python based solution is using 'activated' function:

In qt designer, select a Combo-Box. Then rename it as QComboBoxName or whatever you may like to call. Then in the init function, paste this code:

self.QComboBoxName.activated.connect(self.someFunction)

def someFunction(self): #foo
    text=self.QComboBoxName.currentText()
    #do something with this text string
    if (text=='someString'): #do this 
    else : pass

answered Jun 17 '18 at 13:09

Ashish Gupta

185
1
12

while not exactly the answer to the question, any web search for qt dropdown will lead here. And this is the usual answer that should be given, without OP's specific icon requirements. – Finlay Beaton Nov 27 '18 at 23:09

score 1 · Answer 6 · answered Apr 18 '11 at 06:54

1

I think you will want to subclass QComboBox and reimplement the needed functionality / look (with paintEvent or something) as its the widget which looks closest to what you are lookin for (I guess).

Good Luck!

answered Apr 18 '11 at 06:54

snoofkin

8,725
14
49
86

score 0 · Answer 7 · edited Dec 15 '15 at 07:25

0

I don't actually know if this does what you want... but try it out? http://doc.qt.io/archives/4.6/qtoolbutton.html#arrowType-prop

edited Dec 15 '15 at 07:25

Christophe Weis

2,518
4
28
32

answered Apr 17 '11 at 18:00

mpen

272,448
266
850
1,236

score -1 · Accepted Answer · answered Apr 18 '11 at 21:17

-1

Your best bet will be to make your own subclass of QAbstractButton to use. You would want to draw the regular icon in the designated portion, and your own icon in the other area. You would also need to grab the mouse press event to show the popup-menu if it is in the designated area (instead of letting the regular button-handling code take it, which would lead to a button clicked signal when the mouse was released).

answered Apr 18 '11 at 21:17

Caleb Huitt - cjhuitt

14,785
3
42
49

Thank you. Can you recommended any tutorials? I've never sub-classed a widget. Not exactly sure how the drawing is supposed to happen. – nonot1 Apr 21 '11 at 04:16
@nonot1: A little late, but try http://doc.trolltech.com/latest/widgets-analogclock.html for a basic overview, and http://doc.trolltech.com/latest/widgets-calculator.html specifically overrides a type of button. They are examples rather than tutorials, but ought to help you out some. – Caleb Huitt - cjhuitt Apr 27 '11 at 21:22
1

As other answers point out, QToolButton has support built-in. Subclassing QAbstractButton is definitely not the simplest approach. – Rotsiser Mho Oct 30 '19 at 17:45

Qt: Drop-down button?

8 Answers8

Related