Grouped QComboBox

Question

Could you show me a simple example of how to make this grouped combobox in Qt?

Answer 1

You can find the description how to do this here:

http://web.archive.org/web/20170826190441/mimec.org/node/305

The idea is that you add parent items and child items and then they are painted differently with the help of custom delegate.

I.e. you set

item->setData( "parent", Qt::AccessibleDescriptionRole );

when adding parent item of group and

item->setData( "child", Qt::AccessibleDescriptionRole );

otherwise.

And then you use this information for painting:

if ( type == QLatin1String( "parent" ) ) {
        QStyleOptionViewItem parentOption = option;
        parentOption.state |= QStyle::State_Enabled;
        QItemDelegate::paint( painter, parentOption, index );
    } 
    else if ( type == QLatin1String( "child" ) ) {
        QStyleOptionViewItem childOption = option;
        int indent = option.fontMetrics.width( QString( 4, QChar( ' ' ) ) );
        childOption.rect.adjust( indent, 0, 0, 0 );
        childOption.textElideMode = Qt::ElideNone;
        QItemDelegate::paint( painter, childOption, index );
    }

Answer 2

Here is my simple expample. If someone needs. In addition, I have added listview with the same function.

comboboxdelegate.h:

#ifndef COMBOBOXDELEGATE_H
#define COMBOBOXDELEGATE_H

#include <QItemDelegate>
#include <QPainter>

class ComboBoxDelegate : public QItemDelegate
{
    Q_OBJECT
    public:
        explicit ComboBoxDelegate(QObject *parent = nullptr);
    protected:
        void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const;
        QSize sizeHint(const QStyleOptionViewItem &option, const QModelIndex &index) const;
    };

    #endif // COMBOBOXDELEGATE_H

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QStandardItemModel>
#include <QtGui>
#include <QtCore>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();
    void start();
    void addParentItem(QStandardItemModel * model, const QString& text );
    void addChildItem( QStandardItemModel * model, const QString& text, const QVariant& data );

private:
    Ui::MainWindow *ui;
};

#endif // MAINWINDOW_H

comboboxdelegate.cpp:

#include "comboboxdelegate.h"

ComboBoxDelegate::ComboBoxDelegate(QObject *parent)
:QItemDelegate(parent)
{
}

void ComboBoxDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
    if(index.data(Qt::AccessibleDescriptionRole).toString() == QLatin1String("separator"))
    {
        painter->setPen(Qt::gray);
        painter->drawLine(option.rect.left(), option.rect.center().y(), option.rect.right(), option.rect.center().y());
    }
    else if(index.data(Qt::AccessibleDescriptionRole).toString() == QLatin1String("parent"))
    {
        QStyleOptionViewItem parentOption = option;
        parentOption.state |= QStyle::State_Enabled;
        QItemDelegate::paint( painter, parentOption, index );
    }
    else if ( index.data(Qt::AccessibleDescriptionRole).toString() == QLatin1String( "child" ) ) {
        QStyleOptionViewItem childOption = option;
        int indent = option.fontMetrics.horizontalAdvance( QString( 4, QChar( ' ' ) ) );
        childOption.rect.adjust( indent, 0, 0, 0 );
        childOption.textElideMode = Qt::ElideNone;
        QItemDelegate::paint( painter, childOption, index );
    }
    else
    {
        QItemDelegate::paint(painter, option, index);
    }
}

QSize ComboBoxDelegate::sizeHint(const QStyleOptionViewItem &option, const QModelIndex &index) const
{
    QString type = index.data(Qt::AccessibleDescriptionRole).toString();
    if(type == QLatin1String("separator"))
        return QSize(0, 10);
    return QItemDelegate::sizeHint( option, index );
}

main.cpp:

#include "mainwindow.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();

    return a.exec();
}

mainwindow.cpp:

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include "comboboxdelegate.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    start();
}

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

void MainWindow::start() {

    QStandardItemModel * model = new QStandardItemModel;

    addParentItem(model, "Success");
    addChildItem(model, "one", 1);
    addChildItem(model, "two", 2);
    addChildItem(model, "three", 3);
    addParentItem(model, "Failed");
    addChildItem(model, "one", 1);
    addChildItem(model, "two", 2);
    addChildItem(model, "three", 3);

    ui->comboBox->setModel(model);
    ui->comboBox->setItemDelegate(new ComboBoxDelegate);

    ui->listView->setModel(model);
    ui->listView->setItemDelegate(new ComboBoxDelegate);
}

void MainWindow::addParentItem( QStandardItemModel * model, const QString& text )
{
    QStandardItem* item = new QStandardItem( text );
    item->setFlags( item->flags() & ~( Qt::ItemIsEnabled | Qt::ItemIsSelectable ) );
    item->setData( "parent", Qt::AccessibleDescriptionRole );
    QFont font = item->font();
    //font.setBold( true );
    font.setItalic( true );
    item->setFont( font );
    model->appendRow( item );
}

void MainWindow::addChildItem( QStandardItemModel * model, const QString& text, const QVariant& data )
{
    QStandardItem* item = new QStandardItem( text );
    item->setData( data, Qt::UserRole );
    item->setData( "child", Qt::AccessibleDescriptionRole );
    model->appendRow( item );
}

ComboBoxDelegate.pro:

QT       += core gui

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = ComboBoxDelegate
TEMPLATE = app


SOURCES += main.cpp\
        mainwindow.cpp \
    comboboxdelegate.cpp

HEADERS  += mainwindow.h \
    comboboxdelegate.h

FORMS    += mainwindow.ui

mainwindow.ui:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>400</width>
    <height>345</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralWidget">
   <layout class="QGridLayout" name="gridLayout">
    <item row="0" column="0">
     <widget class="QComboBox" name="comboBox"/>
    </item>
    <item row="1" column="0">
     <widget class="QListView" name="listView"/>
    </item>
   </layout>
  </widget>
  <widget class="QMenuBar" name="menuBar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>400</width>
     <height>23</height>
    </rect>
   </property>
  </widget>
  <widget class="QToolBar" name="mainToolBar">
   <attribute name="toolBarArea">
    <enum>TopToolBarArea</enum>
   </attribute>
   <attribute name="toolBarBreak">
    <bool>false</bool>
   </attribute>
  </widget>
  <widget class="QStatusBar" name="statusBar"/>
 </widget>
 <layoutdefault spacing="6" margin="11"/>
 <resources/>
 <connections/>
</ui>