Explications sur les pages

Notre application

Dans le tutoriel précédent, nous avons réussi à configurer, construire et compiler notre première application sous Kirigami. Avec les bases en place, nous pouvons commencer notre voyage vers la création d'une application fonctionnement complète.

Ces tutoriels se concentreront sur la création d'une application permettant à l'utilisateur de voir combien de jours il reste avant un évènement de son choix. Cela ne veut pas dire que vous que vous ne devez pas vous écarter et d'essayer de créer votre propre chose ! Veuillez-vous simplement prêter une attention particulière à la façon dont les choses fonctionnent d'abord, afin que vous puissiez vous adapter lorsque les choses sont différentes dans votre propre code. Nous vous recommandons également de consulter la galerie de Kirigami](https://apps.kde.org/en/kirigami2.gallery), fournissant un certain nombre d'exemples utiles d'interface utilisateur et vous permettant d'accéder facilement à tout le code.

Dans cette section, nous nous concentrerons sur les pages, l'un des éléments structurels clés de toute application avec Kirigami.

Pages

Les applications Kirigami sont généralement organisées en Pages . Ces pages sont les différents « écrans » d'une application. Vous voudrez avoir une page dédiée à des aspects spécifiques de l'interaction de votre application et vous pouvez créer différents fichiers QML contenant chacun le code de pages distinctes.

Les pages sont organisées dans une pile de pages où elles peuvent être empilées et retirées. Sur un téléphone, seule la page la plus haute est affichée, alors que sur un écran plus grand (ordinateur de bureau ou tablette), plusieurs pages peuvent être affichées les unes à côté des autres.

 ! Une seule page sur le téléphone

 ! Deux pages, l'une à côté de l'autre sur le bureau

Revenons au fichier « main.qml » que nous avons créé dans notre précédent tutoriel :

 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!")
        }
    }
}

Nous faisons démarrer notre application sur notre « Kirigami.Page ». Tout ce que nous avons inclus dans cette page est une étiquette contenant « Hello World » mais nous allons améliorer un peu les choses.

L'idée derrière notre application est que nous allons être en mesure d'afficher un tas de comptes à rebours à l'utilisateur. Le problème avec une page « Kirigami.Page » normale est qu'elle possède une taille verticale fixe, mais ne vous inquiétez pas : en effet, Kirigami prend aussi en charge les pages avec barres de défilement. La page « Kirigami.ScrollablePage » va maintenant remplacer notre page « Kirigami.Page ».

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

Les pages de Kirigami comportent également des titres soignés placés dans la barre d'outils, indiquant rapidement à l'utilisateur sur quelle page il se trouve. Tout ce dont nous avons à faire est de définir un titre de page en utilisant la propriété « title » de l'objet « Kirigami.ScrollablePage ». Dans ce cas, nous avons utilisé l'une des fonctions « i18nc() » que nous avons explorées dans notre précédent tutoriel pour cet usage.

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