×
Namespaces

Variants
Actions
(Difference between revisions)

如何 通过QGalleryQueryModel 制作一个简单的图片浏览器

From Nokia Developer Wiki
Jump to: navigation, search
liuting (Talk | contribs)
(Liuting - - 介绍)
liuting (Talk | contribs)
(Liuting - - 代码实现)
Line 32: Line 32:
  
 
== 代码实现 ==
 
== 代码实现 ==
 +
#ThumbnailModel.h
 +
<code>
 +
class ThumbnailModel : public QGalleryQueryModel
 +
{
 +
    Q_OBJECT
 +
public:
 +
    static const QSize thumbnailSize;
 +
 +
    ThumbnailModel(QAbstractGallery *gallery, QObject *parent = 0);
 +
    ~ThumbnailModel();
 +
 +
    QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const;
 +
 +
protected:
 +
    virtual QUrl imageUrl(const QModelIndex &index) const;
 +
 +
private slots:
 +
    void thumbnailLoaded();
 +
 +
private:
 +
    mutable ThumbnailCache cache;
 +
 +
};
 +
</code>
 +
首先我们必须从 QGalleryQueryModel 派生一个类,并且重写data()方法
 +
#ThumbnailModel.cpp
 +
<code>
 +
QVariant ThumbnailModel::data(const QModelIndex &index, int role) const
 +
{
 +
    qDebug()<<"enter data";
 +
    return role == Qt::DecorationRole && index.isValid()
 +
            ? cache.thumbnail(imageUrl(index))
 +
            : QGalleryQueryModel::data(index, role);
 +
}
 +
</code>
 +
<code>
 +
void ThumbnailModel::thumbnailLoaded()
 +
{
 +
    emit dataChanged(index(0, 0), index(rowCount() - 1, columnCount() -1));
 +
}
 +
</code>
 +
 +
在data 函数中我们返回已经缩放好的图片, 当图片缩放完毕,我们需要发送一个信号通知VIEW, MODEL中的数据有所更新,以便VIEW 重新更新。
 +
 
== 代码下载==
 
== 代码下载==
 
== 相关链接 ==
 
== 相关链接 ==
  
 
''Add categories below. Remove Category:Draft when the page is complete or near complete''
 
''Add categories below. Remove Category:Draft when the page is complete or near complete''

Revision as of 12:58, 28 March 2012

Delete instructional text in italic

This article explains how to ... Replace the abstract text with a short paragraph (or sentence) describing what the topic covers.

Enter article metadata as described below. Note that this template can be placed anywhere in the article. Do not remove parameters that you do not use

Article Metadata
Compatibility
Platform(s):
Symbian
Article
Created: ()
Last edited: liuting (28 Mar 2012)

Contents

介绍

QML 提供了一个 plugin DocumentGalleryMode ,通过使用这个plugin,我们可以很简单的实现一个图片浏览器,但是随着图片的增加,我们会发现加载速度十分缓慢,用户体验很差,这是由于QML 内部实现采取高质量的平滑缩放耗时很长,所以我们不的不重新实现自己的model ,并在线程中通过QImageReader 实现大量图片的快速缩放。接下来我们通过代码片段来看下具体的实现过程

代码实现

  1. ThumbnailModel.h
class ThumbnailModel : public QGalleryQueryModel
{
Q_OBJECT
public:
static const QSize thumbnailSize;
 
ThumbnailModel(QAbstractGallery *gallery, QObject *parent = 0);
~ThumbnailModel();
 
QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const;
 
protected:
virtual QUrl imageUrl(const QModelIndex &index) const;
 
private slots:
void thumbnailLoaded();
 
private:
mutable ThumbnailCache cache;
 
};

首先我们必须从 QGalleryQueryModel 派生一个类,并且重写data()方法

  1. ThumbnailModel.cpp
QVariant ThumbnailModel::data(const QModelIndex &index, int role) const
{
qDebug()<<"enter data";
return role == Qt::DecorationRole && index.isValid()
 ? cache.thumbnail(imageUrl(index))
 : QGalleryQueryModel::data(index, role);
}
void ThumbnailModel::thumbnailLoaded()
{
emit dataChanged(index(0, 0), index(rowCount() - 1, columnCount() -1));
}

在data 函数中我们返回已经缩放好的图片, 当图片缩放完毕,我们需要发送一个信号通知VIEW, MODEL中的数据有所更新,以便VIEW 重新更新。

代码下载

相关链接

Add categories below. Remove Category:Draft when the page is complete or near complete

142 page views in the last 30 days.