Explaining pages

A nossa aplicação

No tutorial anterior, conseguimos configurar, criar e compilar a nossa primeira aplicação em Kirigami. Com as bases instaladas, poderemos iniciar a nossa viagem para a criação de uma aplicação cheia de funcionalidades.

These tutorials will focus on creating an application that lets the user see how many days are left until an event of their choice.

We also recommend you check out the Kirigami Gallery, which provides a number of useful UI examples.

Nesta secção focar-nos-emos nas páginas, um dos elementos-chave estruturais de qualquer aplicação de Kirigami.

Páginas

Kirigami apps are typically organized in pages by using Kirigami.Page. Pages are the different "screens" of an app. You will want to have a page dedicated to specific aspects of your app's interaction, and to make things easier you can create different QML files for each page.

Pages are organized in a page stack where they can be pushed and popped. On a phone only the top-most page is shown, whereas on a larger screen (desktop or tablet), if desired, 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 26 27 28 29 

// Includes relevant modules used by the QML import QtQuick import QtQuick.Layouts import QtQuick.Controls as Controls import org.kde.kirigami as Kirigami  // Provides basic features needed for all kirigami applications Kirigami.ApplicationWindow {  // Unique identifier to reference this object  id: root   width: 400  height: 300   // Window title  // i18nc() makes a string translatable  // and provides additional context for the translators  title: i18nc("@title:window", "Hello World")   // Set the first page that will be loaded when the app opens  // This can also be set to an id of a Kirigami.Page  pageStack.initialPage: Kirigami.Page {  Controls.Label {  // Center label horizontally and vertically within parent object  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, so instead we can use a Kirigami.ScrollablePage, which already comes with its own built-in scrollbar.

 1  2  3  4  5  6  7  8  9 10 11 12 13 14 15 16 17 

import QtQuick import QtQuick.Layouts import QtQuick.Controls as Controls import org.kde.kirigami as Kirigami  Kirigami.ApplicationWindow {  id: root   width: 400  height: 300   title: i18nc("@title:window", "Day Kountdown")   pageStack.initialPage: 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 is 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")