Explaining Pages

Our app

In the previous tutorial, we managed to set up, build, and compile our first Kirigami application. With the basics in place, we can begin our journey towards creating a fully-featured application.

These tutorials will focus on creating an application that lets the user see how many days are left until an event of their choice. That doesn’t mean you shouldn’t deviate and try to create your own thing! Just make sure you pay close attention to how things work first, so that you can adjust when things are different in your own code. We also recommend you check out the Kirigami Gallery, which provides a number of useful UI examples and provides easy access to all the code.

In this section we’ll be focusing on pages, one of the key structural elements of any Kirigami application.

Pages

Kirigami apps are typically organized in Pages . Those are the different ‘Screens’ of an app. You will want to have a page dedicated to specific aspects of your app’s interaction, and you can create different QML files each containing the code for separate pages.

Pages are organized in a pagestack where they can be pushed and popped. On a phone only the topmost page is shown, whereas on a larger screen (desktop or tablet) multiple pages can be shown next to each other.

Let’s go back to the main.qml file we created in our previous tutorial:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// Includes relevant modules used by the QML
import QtQuick 2.6
import QtQuick.Controls 2.0 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.13 as Kirigami

// Base element, provides basic features needed for all kirigami applications
Kirigami.ApplicationWindow {
    // ID provides unique identifier to reference this element
    id: root

    // Window title
    // i18nc is useful for adding context for translators, also lets strings be changed for different languages
    title: i18nc("@title:window", "Hello World")

    // Initial page to be loaded on app load
    pageStack.initialPage: Kirigami.Page {

        Controls.Label {
            // Center label horizontally and vertically within parent element
            anchors.centerIn: parent
            text: i18n("Hello World!")
        }
    }
}

We make our application start to our Kirigami.Page. All we have included in it is a label containing ‘Hello World’, but we’re going to spruce things up a little.

The idea behind our app is that we’re going to be able to display a bunch of countdowns to the user. The problem with a normal Kirigami.Page is that it has a fixed vertical size, but don’t worry: Kirigami also supports scrollable pages. Kirigami.ScrollablePage is going to replace our Kirigami.Page now.

Kirigami.ScrollablePage {
    title: i18nc("@title", "Kountdown")
    ...
}

Kirigami pages also feature neat titles placed within the toolbar, quickly indicating to the user which page they are on. All we need to do to set a page title using the title property of Kirigami.ScrollablePage. In this case, we used one of the i18nc() functions we explored in our previous tutorial to this end.

pageStack.initialPage: Qt.resolvedUrl("StartPage.qml")