Rangées de pages et piles de pages

Ajoutez un flux à votre application : ajouter, supprimer et remplacer des pages de différentes manières.

La rangée de pages

L'objet PageRow est un conteneur disposant les éléments horizontalement dans une rangée. Si tous les éléments fils ne tiennent pas dans la PageRow , celle-ci se comportera comme une surface « Flickable » et deviendra une vue en colonnes pouvant défiler horizontalement.

Un objet PageRow peut afficher une seule page ou plusieurs sous forme de colonnes, selon la largeur de la fenêtre. Sur un téléphone, une seule colonne sera visible, tandis que sur une tablette ou un ordinateur de bureau, plusieurs colonnes devraient être visibles à la fois.

Les colonnes peuvent soit avoir soit la même taille fixe, soit se dimensionner elles-mêmes grâce à la propriété « implicitWidth », soit se développer automatiquement pour occuper toute la largeur disponible. Par défaut, la dernière colonne se développera pour occuper tout l'espace disponible.

Copie d'écran de PageRow

Vous pouvez accéder aux méthodes d'affichage des colonnes à partir de la propriété « pageStack » de votre élément Kirigami.ApplicationWindow ou de n'importe où ailleurs en utilisant « applicationWindow().pageStack ».

La page initiale est ajoutée avec la propriété « pageStack.initialPage ». Par exemple, dans une application simple demandant à l'utilisateur de s'authentifier, la page initiale sera une page de connexion.

Kirigami.ApplicationWindow {
    pageStack.initialPage: LoginPage {}
}

Une fois que l'utilisateur s'est connecté à l'application, vous devez remplacer la page de connexion par la page d'accueil de l'application. Pour ce faire, vous devez utiliser « pageStack.replace » en supprimant la page de connexion et en la remplaçant par une page d'accueil.

// LoginPage.qml
Kirigami.Page {
    // formulaire de connexion

    Button {
        onClicked: {
            const user = Backend.authentificate(usernameField.text, passwordField.text);
            if (user) {
                applicationWindow().pageStack.replace("qrc:/HomePage.qml", {
                    user: user, // donner les informations concernant l'utilisateur enregistré à la
                                // page d'accueil
                });
            } else {
                // Afficher un message d'erreur
            }
        }
    }
}

Imaginons maintenant que vous ayez une page de configuration avec laquelle vous voulez que l'utilisateur accède à partir de sa page d'accueil. Vous voudriez que l'utilisateur retourne à la page d'accueil. Ainsi, vous ne pouvez pas utiliser « replace ». A la place, vous utiliserez « push » pour déposer une nouvelle page dans la pile.

// ConfigurationPage.qml
Kirigami.Page {
    required property string var1
}
// HomePage.qml
applicationWindow().pageStack.push("qrc:/MyPage.qml", {
    'var1': 'Hello',
});

Vous pouvez aussi :

  • dépiler une page (ce qui supprime la dernière page de la pile) ou
  • Utilisez insertPage pour insérer une page à une position spécifique dans la pile.
  • utiliser movePage pour déplacer des pages spécifiques au sein de la pile, ou bien
  • effacer toutes les pages à partir de la pile.

Vous pouvez également modifier l'objet « currentIndex » pour changer la page actuellement active, de manière programmée ou utiliser flickBack pour simuler le déplacement d'une page en arrière dans la pile.

Couches

Pour l'instant, nous n'avons vu que la navigation horizontale fonctionnant dans une pile en deux dimensions. Vous pouvez également utiliser des calques dans votre application pour pousser la page plein écran dans votre application.

Dans ce cas, une seule page est visible en même temps sur le mobile et sur le bureau.

Les couches sont accessibles depuis « pageStack.layers » et utilisent la même API que « pageStack ».