如何将图像显示为缩略图

Question

我有一个QTreeView来显示硬盘驱动器和目录。 我也有一个QListView来显示图像文件，如下所示：

但我想将图像显示为缩略图，如下所示：

我的代码：

mainWidget::mainWidget(QWidget *parent) : QWidget(parent), ui(new Ui::mainWidget){
    ui->setupUi(this);
    dirsModel = new QFileSystemModel;
    filesModel = new QFileSystemModel;
    dirsModel->setRootPath("");
    ui->treeView->setModel(dirsModel);
    ui->listView->setModel(filesModel);
    dirsModel->setFilter(QDir::AllDirs | QDir::NoDotAndDotDot);
    filesModel->setFilter(QDir::Files);
    ui->treeView->hideColumn(1);
    ui->treeView->hideColumn(2);
    ui->treeView->hideColumn(3);
    ui->treeView->header()->hide();
}

void mainWidget::on_treeView_clicked(const QModelIndex &index){
    ui->listView->setRootIndex(filesModel->setRootPath(dirsModel->filePath(index)));
}

不幸的是，我不知道将图像视图从图标更改为缩略图的方法是什么。

Answer 1

您应该使用特殊的ViewMode ：

 ui->listView->setViewMode(QListView::IconMode);

但是它只会显示图标（而不是整个图像），因此我认为您应该创建QStandardItemModel （因为QFileSystemModel不太适合），并使用Qt::DecorationRole将pixmap设置为该模型，但是将图像缩放到较小的尺寸。 如您所知，如果目录中有很多映像，则此过程可能很长。

如您所见，您应该每次（每次on_treeView_clicked ）获取目录中的新图像列表，可以使用以下方法进行操作：

QStringList QDir::entryList(const QStringList & nameFilters, Filters filters = NoFilter, SortFlags sort = NoSort) const

带有特殊的过滤器。 当您具有文件列表时，可以在循环中创建像素图，对其进行缩放并设置为模型。

默认情况下QListView::IconMode提供自由移动。 如果要避免这种情况，则应使用：

ui->listView->setMovement(QListView::Static);

Answer 2

我想根据您的需求，找到更好的方法，但这是基于我的python项目的示例：

您可以做的是QFileIconProvider的子类：

ICON_SIZE = QSize(64,64)
accepted_types = (".jpg",".tiff",".png",".exr",".psd")

# this depends on the plugins you have installed,
# PSD and EXR requires external ones).

class IconProvider(QFileIconProvider):

    def __init__(self) -> None:
        super().__init__()

    def icon(self, type: 'QFileIconProvider.IconType'):

        fn = type.filePath()

        if fn.endswith(accepted_types):
            a = QPixmap(ICON_SIZE)
            a.load(fn)
            return QIcon(a)
        else:
            return super().icon(type)

然后在模型上使用：

self.fileSystemModel.setIconProvider(IconProvider)

TreeView上的示例：