QListWidget和QListView的使用和item点击事件

简介: QListWidget和QListView的使用和item点击事件

QListWidget和QListView很常用,但是使用上功能类似,往往容易分不清区别,但是不知道如何选择。这里总结下二者之间的区别和使用,分享给有需要的人,有需要的可点击收藏。


QListView介绍


QListView是Qt中用于显示列表的一个控件,它可以显示一个单列的列表,每个item可以是一个文本、图像或自定义的QWidget对象。QListView提供了丰富的接口,可以设置列表的选择模式、排序方式、滚动条等属性,还可以设置item的样式、大小、对齐方式等信息。


QListView还可以通过自定义QAbstractItemModel类来管理item,实现更加灵活的功能。


QListView的常用接口包括:


- setModel():设置QListView的model。


- setSelectionMode():设置列表的选择模式。


- setSortingEnabled():设置是否启用排序。


- setIconSize():设置item的图标大小。


- setViewMode():设置列表的显示模式。


- setSpacing():设置item之间的间距。


- setUniformItemSizes():设置是否使用统一的item大小。


- setWordWrap():设置是否自动换行。


- setHorizontalScrollBarPolicy()和setVerticalScrollBarPolicy():设置滚动条的显示策略。


下面是一个简单的例子,演示了如何使用QListView来显示一个简单的列表:


// 创建一个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);


在上面的代码中,首先创建了一个QStringListModel,并设置了三个item的文本。然后创建了一个QListView,并将model设置为其model。设置了列表的选择模式为单选,排序方式为升序,图标大小为32x32,item之间的间距为10,显示模式为图标模式,自动换行,滚动条的显示策略为水平不显示,垂直按需显示。最后将QListView添加到窗口中,就可以显示列表了。


QListWidget介绍


QListWidget类提供了一个基于item的列表小部件。QListWidget是一个方便的类,它提供了类似于QlistView所具有的列表视图,但是具有增加和删除的功能。QListWidget使用内部模型来管理列表中的每个QListWidgetItem。想要有更灵活的列表视图,请使用具有标准模型的QListView类。



QListWidget和QListView区别


QListWidget和QListView都是Qt中用于显示列表的控件,它们之间的区别主要在于显示方式和使用方法。QListView是基于Model,而QListWidget是基于Item。这是它们的本质区别。


QListWidget是一个基于QListView的高级控件,它提供了一个方便的列表视图,可以在其中显示图像、文本和其他自定义内容。QListWidget中的每个item都是一个QListWidgetItem对象,可以通过addItem()函数向列表中添加item,通过setItemSelected()函数设置item是否被选中,通过setSelectionMode()函数设置列表的选择模式。


QListView是一个更加底层的控件,它提供了一个显示列表的视图,但是不提供item的管理功能。QListView中的每个item都是一个QModelIndex对象,可以通过QAbstractItemModel类的接口来管理item。QListView中的item可以是任何自定义的QWidget对象,可以通过setIndexWidget()函数将QWidget对象设置为item的显示内容。


QListWidget是继承QListView,QListView是基于model的,需要自己来建模(例如建立QStringListModel、QSqlTableModel等),保存数据,这样就大大降低了数据冗余,提高了程序的效率。QListWidget是一个升级版本的QListView,它已经自己为我们建立了一个数据存储模型(QListWidgetItem),操作方便,直接调用addItem即可添加项目(ICON,文字)。


下面是一个简单的使用示例,分别演示了如何使用QListWidget和QListView来显示一个简单的列表:


// 使用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使用


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使用


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);
}


其他资源


QT的QListWidget使用_蓝天巨人的博客-CSDN博客


Qt QListWidget详解-腾讯云开发者社区-腾讯云


QListWidget用法(一):列表模式添加item_Qt高级开发视频教程_C/C++视频-51CTO学堂


QT使用QListWidget显示多张图片_listwidget添加图片_妙为的博客-CSDN博客


QT使用QListWidget实现图片列表_qt 图片列表_依旧自由人的博客-CSDN博客


Qt listView添加控件、图片___不高兴的博客-CSDN博客


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


QListWidget添加自定义的widget并自动排序_qlistwidget添加widget_bclshuai的博客-CSDN博客


QListWidget进行行排序功能_qt qlistwidget排序_Pailugou的博客-CSDN博客


[QT_007]Qt学习之QListWidget控件详解_天空之城8020的博客-CSDN博客


Qt中QListWidget排列控件_qt qlistwidget排序_我不是萧海哇~~~~的博客-CSDN博客


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


QListWidget 中的元素水平排列_qlistwidget横向_Licht小粉的博客-CSDN博客


qt的QListwiget设置横向的排列_qt横向列表控件_liuxizhen2009的博客-CSDN博客


QListWidget显示文件夹内容,选择文件并显示文件夹下图片_qlistwidget 显示图片_前进的小xy的博客-CSDN博客


QListWidget与QTableWidget的使用以及样式设置_qlistwidget样式表_明之季的博客-CSDN博客

相关文章
|
6月前
QComboBox设置下拉item大小
QComboBox设置下拉item大小
196 0
|
JavaScript 小程序
picker bindchange="bindPickerChange" 点击事件
picker bindchange="bindPickerChange" 点击事件
265 1
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
414 1
ListView Item多布局的实现
ListView这个小节的最后一节,给大家带来的是ListView多布局Item的实现, 何为ListView Item多布局,打个比方,QQ这种聊天列表
118 0
ListView onItemLongClick 弹出ContextMenu
ListView onItemLongClick 弹出ContextMenu
117 0
element-ui:el-dialog遮罩层变黑
element-ui:el-dialog遮罩层变黑
544 0
WPF listview item mouse enter/over popup
This is because the routing strategy of the Loaded event is Direct, which means that the routed event does not route though an element tree.
993 0