Mastering Qt 5

Displaying thumbnails in a GridView

The next step is to display these thumbnails. Create a new QML file named AlbumPage.qml:

import QtQuick 2.6 
import QtQuick.Layouts 1.3 
import QtQuick.Controls 2.0 
import "." 
 
PageTheme { 
 
    property string albumName 
    property int albumRowIndex 
 
    toolbarTitle: albumName 
 
    GridView { 
        id: thumbnailList 
        model: pictureModel 
        anchors.fill: parent 
        anchors.leftMargin: 10 
        anchors.rightMargin: 10 
        cellWidth : thumbnailSize 
        cellHeight: thumbnailSize 
 
        delegate: Rectangle { 
            width: thumbnailList.cellWidth - 10 
            height: thumbnailList.cellHeight - 10 
            color: "transparent" 
 
            Image { 
                id: thumbnail 
                anchors.fill: parent 
                fillMode: Image.PreserveAspectFit 
                cache: false 
                source: "image://pictures/" + index + "/thumbnail" 
            } 
        } 
    } 
} 

This new PageTheme