Question

I am developing a GUI application in Qt, and I have some difficulties embedding a custom widget in my ui. From Qt’s documentation I can see it is possible to promote such a widget. However, I am still a little confused about how this should be done.

My widget QTreeWidget is heavily inspired by Qt’s torrent example, where I want to embed this in my application:

So I have for my FilesView class (not included the src code, because it is trivial):

#include <QTreeWidget>
#include <QUrl>
#include <QFile>
#include <QDragMoveEvent>
#include <QDropEvent>

// FilesView extends QTreeWidget to allow drag and drop.
class FilesView : public QTreeWidget
{
    Q_OBJECT
public:
    FilesView(QWidget *parent = 0);

signals:
    void fileDropped(const QString &fileName);

protected:
    void dragMoveEvent(QDragMoveEvent *event);
    void dropEvent(QDropEvent *event);
};

To this is a TorrentViewDelegate class (comment the progressbar for testing purposes)

#include <QItemDelegate>
#include <QMainWindow>
#include <QApplication>

// TorrentViewDelegate is used to draw the progress bars.
class TorrentViewDelegate : public QItemDelegate
{
    Q_OBJECT
public:
    inline TorrentViewDelegate(QMainWindow *mainWindow) : QItemDelegate(mainWindow) {}

    inline void paint(QPainter *painter, const QStyleOptionViewItem &option,
                      const QModelIndex &index ) const
    {
        if (index.column() != 2) {
            QItemDelegate::paint(painter, option, index);
            return;
        }

        // Set up a QStyleOptionProgressBar to precisely mimic the
        // environment of a progress bar.
        QStyleOptionProgressBar progressBarOption;
        progressBarOption.state = QStyle::State_Enabled;
        progressBarOption.direction = QApplication::layoutDirection();
        progressBarOption.rect = option.rect;
        progressBarOption.fontMetrics = QApplication::fontMetrics();
        progressBarOption.minimum = 0;
        progressBarOption.maximum = 100;
        progressBarOption.textAlignment = Qt::AlignCenter;
        progressBarOption.textVisible = true;

        // Set the progress and text values of the style option.
        //int progress = qobject_cast<MainWindow *>(parent())->clientForRow(index.row())->progress();
        int progress = 40;
        progressBarOption.progress = progress < 0 ? 0 : progress;
        progressBarOption.text = QString().sprintf("%d%%", progressBarOption.progress);

        // Draw the progress bar onto the view.
        QApplication::style()->drawControl(QStyle::CE_ProgressBar, &progressBarOption, painter);
    }
};

In the example the embed the widget in MainWindow as:

filesView = new FilesView(this);
filesView->setItemDelegate(new TorrentViewDelegate(this));
filesView->setHeaderLabels(headers);
filesView->setSelectionBehavior(QAbstractItemView::SelectRows);
filesView->setAlternatingRowColors(true);
filesView->setRootIsDecorated(false);
ui->verticalLayout_Filebox->addWidget(filesView);

How can I do this from the Qt designer?

Answer 1

• Place an empty widget where you want to have your FilesView
• Right click on it and select Promote to
• Set the promoted class name to FilesView press Add and then Promote
• You cannot set the delegate from QtDesigner

For more info have a look here:

http://qt-project.org/doc/qt-4.8/designer-using-custom-widgets.html

The second option you have is to create a plugin for your widget which will allow you to set its properties through designer. If you are not going to use your widget multiple times I do not suggest it. For more details check the following link:

http://qt-project.org/doc/qt-4.8/designer-creating-custom-widgets.html