Detailed explanation of QListWidget/QListWidgetItem in Qt

Qt series article directory

foreword

QListWidget is a convenience class that provides a list view similar to that provided by QListView, but with a classic item-based interface for adding and removing items. QListWidget uses an internal model to manage each QListWidgetItem in the list.
QListWidget -> QListView -> QAbstractItemView -> QAbstractScrollArea -> QFrame -> QWidget

For a more flexible list view widget, use the QListView class with the standard model.
List widgets are constructed in the same way as other widgets:

QListWidget *listWidget = new QListWidget(this);

Insert an item at the specified position (row parameter) of QListWidget.
In this approach, one thing to note:
When creating a new item, the parent control of the item cannot be QListWidget, otherwise it will be added to the end of QListWidget.

QListWidgetItem represents a single Item in a QListWidget. Each Item can contain multiple pieces of information and will display them appropriately.
QListWidgetItem is typically used to display text text() and icons icon() . These are set using the setText() and setIcon() functions. The appearance of the text can be customized using setFont() , setForeground() and setBackground() . Text in list items can be aligned using the setTextAlignment() function. Tooltips, status tips, and "what's this?" help can be added to list items using setToolTip() , setStatusTip() , and setWhatsThis() .
By default, Item is enabled, selectable, and checkable, and is configured to be drag-and-drop, editable, and clickable to check. These are all signs belonging to Item.
QListWidgetItem is specially used to represent the data items of the list control QListWidget. Note: QListWidgetItem is a pure data class, not a control. There is no base class, so there is no signal and slot function. QListWidgetItem can be read and written directly with the data stream QDataStream.
QListWidgetItem not only has strings, but also has its own icons, check boxes and other characteristics. The list control will present data and perform interactive operations according to the rich characteristics of the item object.

1. Examples

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QVector>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

    void initUi();
    void sortImage();
    void showSortImage04(QVector<QString> lst, QString path);
    void showSortImage02(QVector<QString> lst, QString path);
    void showSortImage05(QVector<QString> lst, QString path);

public:
    QVector<QString> sortResult04;
    QVector<QString> sortResult02;
    QVector<QString> sortResult05;
    QVector<QString> m_vec03;

private:
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

#include "MainWindow.h"
#include "ui_MainWindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    initUi();
    sortImage();
    showSortImage04(sortResult04,":/picture/");
    showSortImage02(sortResult02,":/picture/");
    showSortImage05(sortResult05,":/picture/");
}

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

void MainWindow::initUi()
{
    ui->listWidget04->resize(300, 900);
    ui->listWidget04->setViewMode(QListWidget::IconMode);  //display mode

    ui->listWidget04->setIconSize(QSize(300, 150));//set image size
    ui->listWidget04->setSpacing(0);//spacing
    ui->listWidget04->setResizeMode(QListWidget::Adjust); //Adapt to layout adjustments
    ui->listWidget04->setMovement(QListWidget::Free); //movable, static: not movable
    ui->listWidget04->setDragDropMode(QAbstractItemView::InternalMove);  //draggable
    ui->listWidget04->setWrapping(false);  //word wrap
    ui->listWidget04->setFlow(QListWidget::TopToBottom);  //Top to bottom LeftToRight layout from left to right

    ui->listWidget02->resize(300, 900);
    ui->listWidget02->setViewMode(QListWidget::IconMode);  //display mode

    ui->listWidget02->setIconSize(QSize(300, 150));//set image size
    ui->listWidget02->setSpacing(0);//spacing
    ui->listWidget02->setResizeMode(QListWidget::Adjust); //Adapt to layout adjustments Adjust
    ui->listWidget02->setMovement(QListWidget::Free); //movable, static: not movable
    ui->listWidget02->setDragDropMode(QAbstractItemView::InternalMove);  //draggable
    ui->listWidget02->setWrapping(false);  //word wrap
    ui->listWidget02->setFlow(QListWidget::TopToBottom);  //Top to bottom LeftToRight layout from left to right

    ui->listWidget05->resize(300, 900);
    ui->listWidget05->setViewMode(QListWidget::IconMode);  //display mode

    ui->listWidget05->setIconSize(QSize(300, 150));//set image size
    ui->listWidget05->setSpacing(0);//spacing
    ui->listWidget05->setResizeMode(QListWidget::Adjust); //Adapt to layout adjustments
    ui->listWidget05->setMovement(QListWidget::Free); //movable, static: not movable
    ui->listWidget05->setDragDropMode(QAbstractItemView::InternalMove);  //draggable
    ui->listWidget05->setWrapping(false);  //word wrap
    ui->listWidget05->setFlow(QListWidget::TopToBottom);  //Top to bottom LeftToRight layout from left to right


    QPalette palette;
    palette.setColor(QPalette::Background,QColor(255,255,255,0));
    setPalette(palette);
//    ui->listWidget04->setBackground(QColor(255,255,255,0));
    ui->listWidget04->setStyleSheet("background-color:rgba(0,0,0,0); border:1px solid rgb(0, 0,0)");
    ui->listWidget02->setStyleSheet("background-color:rgba(0,0,0,0); border:1px solid rgb(0, 0,0)");
    ui->listWidget05->setStyleSheet("background-color:rgba(0,0,0,0); border:1px solid rgb(0, 0,0)");

}

void MainWindow::sortImage()
{
//    //04
//    sortResult04.push_back("0011_052322_151412_04_002_00001_00004_00.jpg");
//    sortResult04.push_back("0011_052322_151409_04_002_00001_00003_00.jpg");
//    sortResult04.push_back("0011_052322_151406_04_002_00001_00002_00.jpg");
//    sortResult04.push_back("0011_052322_151403_04_002_00001_00001_00.jpg");
//    sortResult04.push_back("1754_040821_111917_04_001_00001_00006_00.jpg");
//    sortResult04.push_back("1754_040821_111915_04_001_00001_00005_00.jpg");

    sortResult04.push_back("1.jpg");
    sortResult04.push_back("2.jpg");
    sortResult04.push_back("3.jpg");
    sortResult04.push_back("4.jpg");
    sortResult04.push_back("5.jpg");
    sortResult04.push_back("6.jpg");

//    //02
//    sortResult02.push_back("0011_052322_151415_02_002_00001_00004_00.jpg");
//    sortResult02.push_back("0011_052322_151411_02_002_00001_00003_00.jpg");
//    sortResult02.push_back("0011_052322_151407_02_002_00001_00002_00.jpg");
//    sortResult02.push_back("0011_052322_151403_02_002_00001_00001_00.jpg");
//    sortResult02.push_back("0231_010421_130836_02_001_00001_00005_00.jpg");
//    sortResult02.push_back("0231_010421_130834_02_001_00001_00004_00.jpg");
//    sortResult02.push_back("0231_010421_130830_02_001_00001_00003_00.jpg");
//    sortResult02.push_back("0231_010421_130828_02_001_00001_00002_00.jpg");
//    sortResult02.push_back("0231_010421_130826_02_001_00001_00001_00.jpg");

    sortResult02.push_back("7.jpg");
    sortResult02.push_back("8.jpg");
    sortResult02.push_back("9.jpg");
    sortResult02.push_back("10.jpg");
    sortResult02.push_back("11.jpg");
    sortResult02.push_back("12.jpg");
    sortResult02.push_back("13.jpg");
    sortResult02.push_back("14.jpg");
    sortResult02.push_back("15.jpg");

//    //05
//    sortResult05.push_back("0011_052322_151412_05_002_00001_00004_00.jpg");
//    sortResult05.push_back("0011_052322_151409_05_002_00001_00003_00.jpg");
//    sortResult05.push_back("0011_052322_151406_05_002_00001_00002_00.jpg");
//    sortResult05.push_back("0011_052322_151403_05_002_00001_00001_00.jpg");
//    sortResult05.push_back("1754_040821_111921_05_001_00001_00008_00.jpg");
//    sortResult05.push_back("1754_040821_111919_05_001_00001_00007_00.jpg");

    sortResult05.push_back("16.jpg");
    sortResult05.push_back("17.jpg");
    sortResult05.push_back("18.jpg");
    sortResult05.push_back("19.jpg");
    sortResult05.push_back("20.jpg");
    sortResult05.push_back("21.jpg");

}


void MainWindow::showSortImage04(QVector<QString> lst, QString path)
{
    QStringList listMap;
        foreach(QString item, lst)
        {
            listMap.append(item);
        }
        QString allPath = path + "/";
        for (int i = 0; i < lst.size(); i++)
        {
            QString onlyFile = lst.at(i);
            int pos = onlyFile.lastIndexOf("/");
            onlyFile = lst.at(i).right(lst.at(i).size() - pos - 1);
            QListWidgetItem* imageItem = new QListWidgetItem(/*m_ImageList*/);
            QString allImgFiles = allPath + lst.at(i);

            /*QPixmap pPhoto;
            pPhoto.loadFromData(QByteArray(), "jpg");
            QIcon ico;
            ico.addPixmap(pPhoto);*/

            imageItem->setIcon(QIcon(allImgFiles));
            //imageItem->setText(onlyFile);
            imageItem->setSizeHint(QSize(190, 150));
            ui->listWidget04->addItem(imageItem);
            //m_ImageList->setItemWidget(imageItem, this);
        }

        /*QGridLayout* grid = new QGridLayout;
        grid->addWidget(m_ImageList);
        this->setLayout(grid);*/
        //m_ImageList->setHidden(false);
        ui->listWidget04->show();
}

void MainWindow::showSortImage02(QVector<QString> lst, QString path)
{
    QStringList listMap;
        foreach(QString item, lst)
        {
            listMap.append(item);
        }
        QString allPath = path + "/";
        for (int i = 0; i < lst.size(); i++)
        {
            QString onlyFile = lst.at(i);
            int pos = onlyFile.lastIndexOf("/");
            onlyFile = lst.at(i).right(lst.at(i).size() - pos - 1);
            QListWidgetItem* imageItem = new QListWidgetItem(/*m_ImageList*/);
            QString allImgFiles = allPath + lst.at(i);

            /*QPixmap pPhoto;
            pPhoto.loadFromData(QByteArray(), "jpg");
            QIcon ico;
            ico.addPixmap(pPhoto);*/

            imageItem->setIcon(QIcon(allImgFiles));
            //imageItem->setText(onlyFile);
            imageItem->setSizeHint(QSize(190, 150));
            ui->listWidget02->addItem(imageItem);
            //m_ImageList->setItemWidget(imageItem, this);
        }

        /*QGridLayout* grid = new QGridLayout;
        grid->addWidget(m_ImageList);
        this->setLayout(grid);*/
        //m_ImageList->setHidden(false);
        ui->listWidget02->show();

}

void MainWindow::showSortImage05(QVector<QString> lst, QString path)
{
    QStringList listMap;
        foreach(QString item, lst)
        {
            listMap.append(item);
        }
        QString allPath = path + "/";
        for (int i = 0; i < lst.size(); i++)
        {
            QString onlyFile = lst.at(i);
            int pos = onlyFile.lastIndexOf("/");
            onlyFile = lst.at(i).right(lst.at(i).size() - pos - 1);
            QListWidgetItem* imageItem = new QListWidgetItem(/*m_ImageList*/);
            QString allImgFiles = allPath + lst.at(i);

            /*QPixmap pPhoto;
            pPhoto.loadFromData(QByteArray(), "jpg");
            QIcon ico;
            ico.addPixmap(pPhoto);*/

            imageItem->setIcon(QIcon(allImgFiles));
            //imageItem->setText(onlyFile);
            imageItem->setSizeHint(QSize(190, 150));
            ui->listWidget05->addItem(imageItem);
            //m_ImageList->setItemWidget(imageItem, this);
        }

        /*QGridLayout* grid = new QGridLayout;
        grid->addWidget(m_ImageList);
        this->setLayout(grid);*/
        //m_ImageList->setHidden(false);
        ui->listWidget05->show();
}

2. Add resource images

1. Add QListWidget to UI design interface

Add QListWidget in the ui design interface to display pictures

2. Add resource images

3. Operation effect

4. Source code download

Source code download address

Tags: Qt UI

Posted by shlumph on Wed, 29 Mar 2023 07:51:39 +0530