Use of QListWidget and QListView and item click event

QListWidget and QListView are very commonly used, but they have similar functions in use, and it is often easy to distinguish the difference, but I don't know how to choose. Here is a summary of the differences and uses between the two, share them with those in need, and click to collect them if you need them.

Introduction to QListView

QListView is a control used to display lists in Qt. It can display a single-column list, and each item can be a text, image or custom QWidget object. QListView provides a rich interface, you can set the selection mode, sorting method, scroll bar and other properties of the list, and you can also set the item's style, size, alignment and other information. QListView can also manage items by customizing the QAbstractItemModel class to achieve more flexible functions.
 Common interfaces of QListView include:
 - setModel(): Set the model of QListView.
- setSelectionMode(): Sets the selection mode of the list.
- setSortingEnabled(): Set whether to enable sorting.
- setIconSize(): Set the icon size of the item.
- setViewMode(): Set the display mode of the list.
- setSpacing(): Set the spacing between items.
- setUniformItemSizes(): Set whether to use a uniform item size.
- setWordWrap(): Set whether to automatically wrap.
- setHorizontalScrollBarPolicy() and setVerticalScrollBarPolicy(): Set the scroll bar display policy.
 Here is a simple example that demonstrates how to use QListView to display a simple list:

// 创建一个QStringListModel
QStringListModel* model = new QStringListModel();
model->setStringList({"Item 1", "Item 2", "Item 3"});
// 创建一个QListView,并设置model
QListView* listView = new QListView();
listView->setModel(model);
// 设置列表的选择模式为单选
listView->setSelectionMode(QAbstractItemView::SingleSelection);
// 设置列表的排序方式为升序
listView->setSortingEnabled(true);
// 设置item的图标大小为32x32
listView->setIconSize(QSize(32, 32));
// 设置item之间的间距为10
listView->setSpacing(10);
// 设置列表的显示模式为图标模式
listView->setViewMode(QListView::IconMode);
// 设置是否自动换行
listView->setWordWrap(true);
// 设置滚动条的显示策略
listView->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
listView->setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);

In the above code, first create a QStringListModel, and set the text of the three items. Then created a QListView and set the model as its model. The selection mode of the list is set to single selection, the sorting method is ascending order, the icon size is 32x32, the spacing between items is 10, the display mode is icon mode, automatic line wrapping, the display strategy of the scroll bar is not displayed horizontally, and vertically as needed show. Finally, add QListView to the window to display the list.

Introduction to QListWidget

The QListWidget class provides an item-based list widget. QListWidget is a convenience class that provides a list view similar to what QlistView has, but with add and delete functionality. QListWidget uses an internal model to manage each QListWidgetItem in the list. For a more flexible list view, use the QListView class with a standard model.

The difference between QListWidget and QListView

Both QListWidget and QListView are controls used to display lists in Qt. The difference between them mainly lies in the display method and usage method. QListView is based on Model, while QListWidget is based on Item. This is their essential difference.

QListWidget is an advanced control based on QListView that provides a convenient list view in which images, text, and other custom content can be displayed. Each item in QListWidget is a QListWidgetItem object. You can add items to the list through the addItem() function, set whether the item is selected through the setItemSelected() function, and set the selection mode of the list through the setSelectionMode() function.

QListView is a lower-level control that provides a view to display a list, but does not provide item management functions. Each item in QListView is a QModelIndex object, and the item can be managed through the interface of the QAbstractItemModel class. The item in QListView can be any custom QWidget object, and the QWidget object can be set as the display content of the item through the setIndexWidget() function.

QListWidget inherits QListView, and QListView is based on the model. It needs to model itself (such as creating QStringListModel, QSqlTableModel, etc.) and save data, which greatly reduces data redundancy and improves program efficiency. QListWidget is an upgraded version of QListView. It has built a data storage model (QListWidgetItem) for us. It is easy to operate. You can add items (ICON, text) by calling addItem directly.

The following is a simple usage example that demonstrates how to use QListWidget and QListView to display a simple list:

// 使用QListWidget显示一个简单的列表
QListWidget* listWidget = new QListWidget();
listWidget->addItem("Item 1");
listWidget->addItem("Item 2");
listWidget->addItem("Item 3");

// 使用QListView显示一个简单的列表
QStringListModel* model = new QStringListModel();
model->setStringList({"Item 1", "Item 2", "Item 3"});
QListView* listView = new QListView();
listView->setModel(model);

QListWidget uses

void MainWindow::initListView()
{

    ui->m_ListWidget->setViewMode(QListWidget::IconMode);//显示模式
    ui->m_ListWidget->setIconSize(QSize(220, 100));//设置图片大小
    ui->m_ListWidget->setSpacing(5);//间距
    ui->m_ListWidget->setResizeMode(QListView::Adjust);//适应布局调整
    ui->m_ListWidget->setMovement(QListView::Static);//不能移动
    ui->m_ListWidget->setFlow(QListWidget::TopToBottom);  //从上到下(横向布局)
    ui->m_ListWidget->setSortingEnabled(true);//自动排序

    QDir dir_(QCoreApplication::applicationDirPath() +"/image/");    //遍历子目录中所有文件
    dir_.setFilter(QDir::Files | QDir::Hidden | QDir::NoSymLinks);        //获取当前所有文件
    dir_.setSorting(QDir::Size | QDir::Reversed);
    dir_.setNameFilters(QStringList("test*.png"));
    QFileInfoList list_file = dir_.entryInfoList();
    QImage* img=new QImage;
    for (int i = 0; i < list_file.size(); ++i) {
         QFileInfo fileInfo = list_file.at(i);
        qDebug()<<"fileInfos:"<<fileInfo.fileName();

        img->load(QCoreApplication::applicationDirPath() +"/image/"+fileInfo.fileName());
        QImage  image = img->scaled(QSize(220, 100),Qt::KeepAspectRatio, Qt::SmoothTransformation);
        QPixmap pixmap = QPixmap::fromImage(image);
        QListWidgetItem *imageItem = new QListWidgetItem;
        imageItem->setIcon(QIcon(pixmap));
        imageItem->setText(fileInfo.fileName());
        imageItem->setSizeHint(QSize(230, 115));
        imageItem->setTextAlignment(Qt::AlignCenter);
        // 连接item的clicked信号到槽函数,实现item的点击事件
        ui->m_ListWidget->addItem(imageItem);
    }

    connect(ui->m_ListWidget,&QListWidget::pressed,[=](QModelIndex pos){
        qDebug()<<"m_ListWidget pos.row:"<<pos.row();
    });

    //我们可以通过信号和槽的方式对列表控件的选项进行响应,例如
    connect(ui->m_ListWidget, SIGNAL(currentTextChanged(QString)),this, SLOT(textChanged(QString)));
}

QListView uses

void MainWindow::initListView1()
{
    listModel = new QStandardItemModel(this);
    ui->listView1->setIconSize(QSize(220, 100));
    for(int listRow=0; listRow< 5; listRow++) {
        QStandardItem* item = new QStandardItem(QString("Item %0").arg(listRow));

        QString filename = QCoreApplication::applicationDirPath() +"test.png";
        QImage* img=new QImage;
        img->load(QCoreApplication::applicationDirPath() +"/test.png");
        QImage  image = img->scaled(QSize(220, 100),Qt::KeepAspectRatio, Qt::SmoothTransformation);
        QPixmap pixmap = QPixmap::fromImage(image);
        item->setIcon(QIcon(pixmap));

        item->setSizeHint(QSize(230, 115));

        listModel->appendRow(item);
    }
    connect(ui->listView1,&QListView::pressed,[=](QModelIndex pos){
        qDebug()<<"listView pos.row:"<<pos.row();
    });

    ui->listView1->setModel(listModel);
}

other resources

Use of QT's QListWidget - Programmer Sought

Qt QListWidget Detailed Explanation - Tencent Cloud Developer Community - Tencent Cloud

QListWidget Usage (1): Add item in list mode_Qt Advanced Development Video Tutorial_C/C++ Video-51CTO School

QT uses QListWidget to display multiple pictures_listwidget add pictures_Miaowei's Blog-CSDN Blog

QT uses QListWidget to realize the picture list_qt picture list_Still free people's blog-CSDN blog

Add controls and pictures to Qt listView___Unhappy Blog - CSDN Blog

https://ruikezhishiyun.blog.csdn.net/article/details/122683533

QListWidget adds custom widgets and automatically sorts_qlistwidget adds widgets_bclshuai's Blog-CSDN Blog

QListWidget performs row sorting function_qt qlistwidget sorting_Pailugou's Blog-CSDN Blog

[QT_007] Detailed explanation of QListWidget control of Qt learning_Sky Castle 8020 Blog-CSDN Blog

QListWidget Arrangement Controls in Qt

https://www.cnblogs.com/tony-yang-flutter/p/15979967.html

The elements in QListWidget are arranged horizontally_qlistwidget horizontally_Licht Xiaofan's Blog-CSDN Blog

Qt's QListwiget sets the horizontal arrangement_qt horizontal list control_liuxizhen2009's blog-CSDN blog

QListWidget displays the contents of the folder, selects the file and displays the pictures under the folder

The use of QListWidget and QTableWidget and style settings_qlistwidget style table_Ming Zhiji's Blog-CSDN Blog

Guess you like

Origin blog.csdn.net/qq8864/article/details/130986313