Qt/C++ - Lesson 061. Adding images to the application using the Drag And Drop method from the file manager

QDropEvent, QStyledDelegate, QStandardItemModel, QListView

Let's write a small application that will allow Drag and Drop to drag and drop images from the file manager into the application itself. In this application, there will be an image preview area and a list of all the images that we put into our application. In this case, when clicking on the image in the list, the image will be placed in the main view area, by which we clicked. In this list, each element will have a preview of the image without text. This preview will be generated using a delegate inherited from QStyledDelegate .

The application will look like this:

Project structure

  • DropEvent.pro - project profile;
  • main.cpp - File with the main function;
  • widget.h - The header file for the application window;
  • widget.cpp - The application source code file;
  • imagedelegate.h - Header file of the list item delegate;
  • Imagedelegate.cpp - File of the source code of the delegate of the list item.

A delegate in this project is required in order to delete the text under the images. The fact is that for displaying thumbnails of images, QListView and QStandardItemModel will be used, which do not have the functionality of displaying icons without text. But you can remove the text using the delegate, completely redefining the appearance of the list item.

I will not bring the source code for the DropEvent.pro and main.cpp files, because there is the default code generated when creating the project.

widget.h

In the window of the application window, we redefine the methods for the Drag and Drop events, and also add objects for the interface and the data model for the images.

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QPalette>
#include <QDragEnterEvent>
#include <QMimeData>
#include <QDropEvent>
#include <QScrollArea>
#include <QLabel>
#include <QListView>
#include <QGridLayout>
#include <QStandardItemModel>

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();

    // Drag event method
    virtual void dragEnterEvent(QDragEnterEvent* event) override;
    // Method for drop an object with data
    virtual void dropEvent(QDropEvent *event) override;

private slots:
    // Slot for processing clicks on list items
    void onImagesListViewClicked(const QModelIndex& index);

private:
    QScrollArea*        m_scrollArea;       // Image scrolling area
    QLabel*             m_imageLabel;       // Label for displaying pictures
    QListView*          m_imagesListView;   // List with images
    QGridLayout*        m_gridLayout;       // Grid for the interface
    QStandardItemModel* m_imagesModel;      // Data Model with Images
};

#endif // WIDGET_H

widget.cpp

To form a list with images, QStandardItemModel will be used, and QListView will be used to display the model elements. For customized display of items in the list, the Delegate will be used, because only redefining the appearance display can remove the text. By the way, this text contains the path to the image file, which will be used to create a QPixmap and display the image both in the main view and in the previews. To get the path to the file from the data model, you need to use the data() method, and pass QModellndex and enum Qt::DisplayRole as the arguments, which is the default argument.

#include "widget.h"
#include "ui_widget.h"

#include <QStandardItem>
#include "imagedelegate.h"

Widget::Widget(QWidget *parent) :
    QWidget(parent)
{
    setAcceptDrops(true);       // Allow drop events for data objects
    setMinimumWidth(640);
    setMinimumHeight(480);

    /// Configure the interface
    m_gridLayout = new QGridLayout(this);
    m_imagesListView = new QListView(this);

    // Create a data model for the image list
    m_imagesModel = new QStandardItemModel(m_imagesListView);
    m_imagesListView->setModel(m_imagesModel);  // Install the model in the view for preview images
    m_imagesListView->setFixedWidth(200);

    // Without a delegate, you can not get rid of the text in the list item and set the display of the preview
    m_imagesListView->setItemDelegate(new ImageDelegate(m_imagesModel, m_imagesListView));

    // Adjust the scrolling area for the current image
    m_scrollArea = new QScrollArea(this);
    m_scrollArea->setBackgroundRole(QPalette::Dark);
    m_imageLabel = new QLabel(this);
    m_scrollArea->setWidget(m_imageLabel);
    m_gridLayout->addWidget(m_scrollArea, 0, 0);
    m_gridLayout->addWidget(m_imagesListView, 0, 1);

    connect(m_imagesListView, &QListView::clicked, this, &Widget::onImagesListViewClicked);
}

Widget::~Widget()
{

}

void Widget::dragEnterEvent(QDragEnterEvent *event)
{
    // You must necessarily accept the data transfer event in the application window area
    event->accept();
}

void Widget::dropEvent(QDropEvent *event)
{
    // When we drop the file into the application area, we take the path to the file from the MIME data
    QString filePath = event->mimeData()->urls()[0].toLocalFile();
    // Create an image
    QPixmap pixmap(filePath);
    // We place it in the scrolling area through QLabel
    m_imageLabel->setPixmap(pixmap);
    m_imageLabel->resize(pixmap.size());

    // Adding an item to the list
    m_imagesModel->appendRow(new QStandardItem(QIcon(pixmap), filePath));
}

void Widget::onImagesListViewClicked(const QModelIndex &index)
{
    // When we click on an element in the list, we take the path to the file
    QPixmap pixmap(m_imagesModel->data(index).toString());
    // And install the file in the main view area
    m_imageLabel->setPixmap(pixmap);
    m_imageLabel->resize(pixmap.size());
}

imagedelegate.h

And here is the delegate himself, whose task it is to display the item in the list. To get the path to the image file, I passed a pointer to the data model, and through QModelIndex in the paint method I get the path to the image.

Another important point is the use of the sizeHint() method. Which adjusts the size of the item in the list. If it does not make a size adjustment, then the element's size will be equal in height to the text line. The preview will look absolutely awful.

#ifndef IMAGEDELEGATE_H
#define IMAGEDELEGATE_H

#include <QStyledItemDelegate>
#include <QPainter>
#include <QStyleOptionViewItem>
#include <QModelIndex>
#include <QStandardItemModel>
#include <QPixmap>
#include <QDebug>

class ImageDelegate : public QStyledItemDelegate
{
public:
    explicit ImageDelegate(QStandardItemModel *model, QObject *parent = nullptr);

    virtual void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const override;
    virtual QSize sizeHint(const QStyleOptionViewItem &option, const QModelIndex &index) const override;
    QStandardItemModel* m_model;
};


#endif // IMAGEDELEGATE_H

Imagedelegate.cpp

Another important point is the use of QRect from QStyleOptionViewItem. The fact is that it contains not only the height and width of the element, but also its position in x and y in the list. If you do not take into account these coordinates, you can see that all the elements will be drawn in one place. For example, in the upper left corner of the list, if you specify x = 0 and y = 0 when drawing.

#include "imagedelegate.h"

ImageDelegate::ImageDelegate(QStandardItemModel *model, QObject *parent) :
    QStyledItemDelegate(parent),
    m_model(model)
{

}

void ImageDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
    // Instead of drawing icons and text, we will draw only one image with small indents of 5 pixels
    QPixmap pix(m_model->data(index).toString());
    QRect optionRect = option.rect;
    painter->drawPixmap(optionRect.x() + 5,
                        optionRect.y() + 5,
                        optionRect.width() - 10,
                        optionRect.height() - 10 ,
                        pix);
}

QSize ImageDelegate::sizeHint(const QStyleOptionViewItem &option, const QModelIndex &index) const
{
    // Correct the size of the display area of the object in the list
    QSize result = QStyledItemDelegate::sizeHint(option, index);
    result.setHeight(140);
    result.setWidth(140);
    return QSize(140, 140);
}

Project application with Drag and Drop

Virtual hosting with 10 percent discount
Virtual hosting with 10 percent discount
EVILEG offers reliable hosting with a 10% discount for virtual hosting and 5% for VPS
Support the author Donate

Comments

Only authorized users can post comments.
Please, Log in or Sign up
TT
June 13, 2019, 7:01 p.m.
Taimoor Tanweer

C++ - Test 001. The first program and data types

  • Result:66points,
  • Rating points-1
TT
June 13, 2019, 6:51 p.m.
Taimoor Tanweer

C++ - Test 002. Constants

  • Result:75points,
  • Rating points2
ВМ
June 13, 2019, 12:30 p.m.
Ваня Мороз

C++ - Test 001. The first program and data types

  • Result:100points,
  • Rating points10
Last comments
i
June 17, 2019, 6:10 a.m.
ingenfly

Только по осям xAxis2, уAxis2 значения начинаются с 0. Почему-то xAxis2 и xAxis не синхронизированы по данным. Ну и QCustomPlot последний.
June 16, 2019, 8:21 p.m.
Евгений Легоцкой

Добрый день. Ну точно также добавляете ту же самую информацию на ось xAxis2, только добавляете другое форматирование customPlot->xAxis2->setDateTimeFormat("hh:mm"); если я ...
EF
June 14, 2019, 1:56 p.m.
Egor Fomin

Спасибо за ваш ответ, у меня получилось реализовать это. Тем не менее появилась другая проблема, поэтому опять надеюсь на вашу помощь. Скажем, я уже выставил точки и они соеденены. Когда я нач...
d
June 13, 2019, 2:47 p.m.
damix

Можно классу, который описывает точку, добавить сигнал, который подавать (emit), когда точка перемещается (переопределить mouseMoveEvent или mouseReleaseEvent). Так вот эти сигналы у каждой из...
i
June 13, 2019, 2:09 p.m.
ingenfly

Здравствайте! Подскажите, пожалуйста: customPlot->xAxis2->setTickLabels(true); //Здесь включается отображение данных на оси xAxis2. а можно как-то продублировать информацию cus...
Now discuss on the forum
June 20, 2019, 9:30 a.m.
IscanderChe

Вернулся к этой задачке только-только, поэтому и не ответил ничего раньше.Как переопределить mouseReleaseEvent(QMouseEvent* event) у QTableView, если QTableView задан в ui? Или задавать QTabl...
I
June 19, 2019, 1:41 p.m.
Intruder

Всем добрый день. При разборе XML файла наткнулся на тег вот такого плана: <TagName attribute1="value1" attribute2="value2" /> При попытке проверить на наличие такого элеме...
June 19, 2019, 12:55 p.m.
Михаиллл

Скажите пожалуйста, как его в таком случае перемещать и удалять?
June 18, 2019, 7:50 p.m.
Дмитрий

Большое спасибо! SDK заработал.К сожалению удалось продвинутся только на один шаг. При сборке чистого проекта NDK выдаёт следующие ошибки C:\Android\ndk-bundle/toolchains/arm-linux-andr...
June 18, 2019, 4:59 p.m.
Михаиллл

Добрый день.В этом учебнике представлен код INSTALLED_APPS = ( ... 'rest_framework', 'snippets.apps.SnippetsConfig',) На строчке 'snippets.apps.SnippetsConf...
Looking for a Job?
25,000.00 руб. - 30,000.00 руб.
Разработчик Qt/C++
Barnaul, Altai Krai, Russia

For registered users on the site there is a minimum amount of advertising

EVILEG
About
Services
Join us
© EVILEG 2015-2019
Recommend hosting TIMEWEB