Qt模型视图框架——列表视图-阿里云开发者社区

在项目中，针对一个数据模型，可能会有不同的展示需求，或以表格列表形式展示，或以树，复杂点可能是各种统计图，在接下来的文章中，小豆君就为大家介绍下Qt中的各种视图控件的使用方法。

在Qt中，提供了最基本的三种视图控件，分别是列表视图、表格视图和树视图。

这篇文章就先来给大家介绍下列表视图，所谓列表，大家都很熟悉了，在我们生活中也经常看到，比如QQ微信的好友列表，公众号的文章列表等等，在Qt中列表视图使用QListView类来表示。

1 QListView属性介绍

老规矩，查看一个类，最好的方法就是先看它有哪些属性：

下面对其每个属性做一介绍

batchSize和layoutMode一起介绍

1.1 flow

在列表控件中的每个item，其实都是存在于布局之中的，flow字面意思是流动的意思，既然流动就会有一个方向。

LeftToRight 代表从左到右排列item，如果isWrapping为true，在item到达可见区域的最右边时会自动换行。

TopToBottom 代表从上到下排列item，如果isWrapping为true，在item到达可见区域的最下边时会自动换行。

1.2 gridSize

对于每个item其大小不一定完全一样，如果把每个item排列起来，对于多行item，那么他们很可能不会对齐，这对有强迫症的人来说是很不舒服的，为此，为了使item可以彼此对齐，可以设置每个item的网格大小。默认情况下是不存在网格的。注意，这里并不是指item的大小，而是网格的大小，item被放置在网格内。

1.3 isWrapping

当item到达可见区域边缘时是否自动换行。

1.4 layoutMode和batchSize

当设置view中的item自动换行，或者当view大小改变后item需自动调整位置时，可以设置layoutMode属性，从而决定让全部item一次性调整位置还是item成批次调整位置。

SinglePass 全部item一次性重新布局

Batched item按批次重新布局，每批次为batchSize个item。

1.5 modelColumn

我们知道，在一个model模型中可以存放多列数据，但是QListView只能显示一列数据，在默认情况下，QListView显示第一列数据，如果指定modelColumn设为n，view将显示model的第n列数据。

1.6 movement

前面我们讲了，QListView是可以有网格的，如果我想移动item（可类比电脑桌面上的图标），则可以选择移动方式，自由移动，或按网格移动，或根本不能移动。

Static 不能移动item 此为默认

Free 可自由移动item

Snap 只能在网格间移动

1.7 resizeMode

当为true时，表示如果view窗口大小改变，item会重新布局。

1.8 selectionRectVisible

当我们在多选item时，往往希望能有一个矩形框来帮助我们选择多个item，如果设置该属性为true，则可按住鼠标框选多个item

1.9 spacing

很简单，就是item之间的间距

1.10 uniformItemSizes

当视图中的每个item具有相同大小时，可以设置该属性为true，这会让视图进行一些性能优化。对于显示大量大小相同的item时，这是一个提升性能的很好的办法。

1.11 viewMode

视图模式，该属性可以让item以列表或图标模式显示，可以类比于windows窗口的列表模式和缩略图模式。

ListMode item以列表方式显示

IconMode item以图标方式显示

1.12 wordWrap

item是否换行

下面我们就以实际的示例来看看这些属性的用法吧

2 示例

该示例可以以缩略图的形式显示一个文件夹下的所有图片。

新建一个ui application工程ListWidget，类名为ListWidget，继承自QWidget，不需要生成ui。

listwidget.h

#ifndef LISTWIDGET_H
#define LISTWIDGET_H
#include <QWidget>
#include <QStandardItemModel>
#include <QFileInfoList>
#include <QListView>
class ListWidget : public QWidget
{
    Q_OBJECT
public:
    ListWidget(QWidget *parent = 0);
    ~ListWidget();
    //设置图片文件夹，显示该文件夹下的所有图片
    void setDir(const QString& dirPath);
    //清空显示
    void clear();
private:
    //初始化所有控件
    void initControl();
    //初始化所有右键命令，所有命令均来自于view的属性
    void initActions();
    //重新设置模型数据 infos所有图片文件信息列表
    void resetModel(const QFileInfoList &infos);
    //重新设置view
    void resetView();
    //获取指定路径下的图片文件信息列表
    QFileInfoList getImageFileInfoList(const QString &dirPath) const;
    //添加QListView的各个属性动作
    void addActionFlow();
    void addActionWrapping();
    void addActionMoveMent();
    void addActionResizeMode();
    void addActionViewMode();
    //将动作添加到右键菜单，并按动作组进行管理
    void setActions(const QList<QAction*>& actions);
private:
    QStandardItemModel* model;
    QListView* view;
    QMenu*     menu;
};
#endif // LISTWIDGET_H

listwidget.cpp

#include <QMenu>
#include <QAction>
#include <QListWidget>
#include <QDebug>
#include <QDir>
#include <QVBoxLayout>
#include "listwidget.h"
ListWidget::ListWidget(QWidget *parent)
    : QWidget(parent)
{
    initControl();
    initActions();
    resetView();
    setDir("F:/Picture/Qt/");
}
ListWidget::~ListWidget()
{
}
//设置图片文件夹，显示该文件夹下的所有图片
void ListWidget::setDir(const QString &dirPath)
{
    clear();
    resetModel(getImageFileInfoList(dirPath));
}
//清空显示
void ListWidget::clear()
{
    model->clear();
}
//初始化所有控件
void ListWidget::initControl()
{
    /*创建模型*/
    model = new QStandardItemModel;
    /*创建view，并对view进行设置*/
    view  = new QListView;
    view->setModel(model);
    view->setSelectionRectVisible(true);//设置框选矩形框可见
    //设置选择模式，该模式为最常用模式，其他选择模式请自行查看帮助说明
    //按住ctrl可多选，按住shift可连续多选
    //当点击另一个item，其他被选中的item会取消选中状态
    view->setSelectionMode(QAbstractItemView::ExtendedSelection);
    QVBoxLayout* layout = new QVBoxLayout(this);
    layout->addWidget(view);
    //设置右键菜单为自定义菜单，关于菜单模式以后会讲到
    menu = new QMenu(this);
    setContextMenuPolicy(Qt::CustomContextMenu);
    connect(this, &QWidget::customContextMenuRequested, [=](const QPoint &pos)
    {
        menu->exec(mapToGlobal(pos));
    });
}
//初始化所有右键命令，所有命令均来自于view的属性
void ListWidget::initActions()
{
    addActionFlow();
    menu->addSeparator();
    addActionWrapping();
    menu->addSeparator();
    addActionMoveMent();
    menu->addSeparator();
    addActionResizeMode();
    menu->addSeparator();
    addActionViewMode();
}
//重新设置模型数据 infos所有图片文件信息列表
void ListWidget::resetModel(const QFileInfoList &infos)
{
    for(auto &&info : infos)
    {
        //定义QStandardItem对象
        QStandardItem *imageItem = new QStandardItem;
        //为单元项设置属性
        imageItem->setIcon(QIcon(info.absoluteFilePath()));
        imageItem->setText(info.fileName());
        model->appendRow(imageItem);
    }
}
//重新设置view
void ListWidget::resetView()
{
    //设置QStandardItem中单元项的图片大小
    view->setIconSize(QSize(100,100));
    //设置QStandardItem中单元项的间距
    view->setSpacing(10);
}
//获取指定路径下的图片文件信息列表
QFileInfoList ListWidget::getImageFileInfoList(const QString& dirPath) const
{
    QDir dir(dirPath);
    QStringList filters;
    filters <<"*.png" << "*.bmp" << "*.jpg" << "jpeg";
    return dir.entryInfoList(filters, QDir::Files, QDir::Name);
}
//添加QListView的各个属性动作
void ListWidget::addActionFlow()
{
    QAction* actLeftToRight = new QAction("LeftToRight");
    connect(actLeftToRight, &QAction::triggered,
            [=](bool)
    {
        view->setFlow(QListView::LeftToRight);
    });
    QAction* actTopToBottom = new QAction("TopToBottom");
    actTopToBottom->setChecked(true);
    connect(actTopToBottom, &QAction::triggered,
            [=](bool)
    {
        view->setFlow(QListView::TopToBottom);
    });
    QList<QAction*> actions;
    actions << actLeftToRight << actTopToBottom;
    setActions(actions);
    actTopToBottom->setChecked(true);
}
void ListWidget::addActionWrapping()
{
    QAction* actWrapping = new QAction("Wrapping");
    connect(actWrapping, &QAction::toggled,
            [=](bool b)
    {
        view->setWrapping(b);
    });
    QList<QAction*> actions;
    actions << actWrapping;
    setActions(actions);
}
void ListWidget::addActionMoveMent()
{
    QAction* actStatic = new QAction("Static");
    connect(actStatic, &QAction::triggered,
            [=](bool)
    {
        view->setMovement(QListView::Static);
    });
    QAction* actFree = new QAction("Free");
    connect(actFree, &QAction::triggered,
            [=](bool)
    {
        view->setMovement(QListView::Free);
    });
    QAction* actSnap = new QAction("Snap");
    connect(actSnap, &QAction::triggered,
            [=](bool)
    {
        view->setMovement(QListView::Snap);
    });
    QList<QAction*> actions;
    actions << actStatic << actFree << actSnap;
    setActions(actions);
    actStatic->setChecked(true);
}
void ListWidget::addActionResizeMode()
{
    QAction* actFixed = new QAction("Fixed");
    connect(actFixed, &QAction::triggered,
            [=](bool)
    {
        view->setResizeMode(QListView::Fixed);
    });
    QAction* actAdjust = new QAction("Adjust");
    connect(actAdjust, &QAction::triggered,
            [=](bool)
    {
        view->setResizeMode(QListView::Adjust);
    });
    QList<QAction*> actions;
    actions << actFixed << actAdjust;
    setActions(actions);
    actFixed->setChecked(true);
}
void ListWidget::addActionViewMode()
{
    QAction* actListMode = new QAction("ListMode");
    connect(actListMode, &QAction::triggered,
            [=](bool)
    {
        view->setViewMode(QListView::ListMode);
    });
    QAction* actIconMode = new QAction("IconMode");
    connect(actIconMode, &QAction::triggered,
            [=](bool)
    {
        view->setViewMode(QListView::IconMode);
    });
    QList<QAction*> actions;
    actions << actListMode << actIconMode;
    setActions(actions);
    actListMode->setChecked(true);
}
//将动作添加到右键菜单，并按动作组进行管理
void ListWidget::setActions(const QList<QAction *> &actions)
{
    QActionGroup* group = new QActionGroup(this);
    for(auto a: actions)
    {
        a->setCheckable(true);
        group->addAction(a);
        menu->addAction(a);
    }
}

运行程序按如下选择右键菜单

好了，关于QListView的介绍就到这里啦，利用它可以实现简单的文件系统查看器，如果您觉得有用，就给小豆君点个赞吧！

最后也希望大家多多支持小豆君的创作，关注小豆君的公众号“小豆君Qt分享”，最新文章都会在公众号第一时间发布，或者你有不懂的问题，关注公众号后，可加好友或进Qt群获得答案。

Qt模型视图框架——列表视图