Displaying albums with ListView

Let's make our first page for this mobile application! Create a file in gallery.qrc called AlbumListPage.qml. Here is the page header implementation:

import QtQuick 2.0 
import QtQuick.Layouts 1.3 
 
import QtQuick.Controls 2.0 
 
Page { 
 
    header: ToolBar { 
        Label { 
            Layout.fillWidth: true 
            text: "Albums" 
            font.pointSize: 30 
        } 
    } 
... 
} 

A Page is a container control with a header and footer. In this application, we will only use the header item. We assign a ToolBar to the header property. The height of this toolbar will be handled by Qt and will be adjusted depending on the target platform. In this first simple implementation, we only put a Label displaying the text "Albums".

Add a ListView element to this page after the header initialization:

ListView { 
    id: albumList 
    model: albumModel 
    spacing: 5 
    anchors.fill: parent 
 
    delegate: Rectangle { 
        width: parent.width 
...