Feuilles de recouvrement

Les feuilles de superposition peuvent servir à de multiples usages, autant pour afficher que pour saisir des données.

Les feuilles de recouvrement fournissent un composant simple que vous pouvez utiliser pour compléter le contenu étant affiché dans une page d’application. Elles sont conçues pour afficher du contenu long et vertical et peut s’adapter à un contenu plus long que la fenêtre d’application elle-même.

Ils peuvent être supprimés en cliquant ou en tapotant à l’extérieur de leur zone ou en cliquant sur l’icône « x » dans l’en-tête des feuilles.

Apprendre à connaître la feuille

Pour utiliser une feuille de superposition, nous devons la créer dans la page de Kirigami dans laquelle nous voulons qu’elle apparaisse.

import QtQuick 2.0
import QtQuick.Controls 2.0 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.5 as Kirigami

Kirigami.Page {
    id: page
    Layout.fillWidth: true

    Kirigami.OverlaySheet {
        id: mySheet
        Controls.Label {
            Layout.fillWidth: true
            wrapMode: Text.WordWrap
            text: "Weeeeee, overlay sheet!"
        }
    }
}

Les feuilles de recouvrement sont dotées de méthodes que nous pouvons utiliser pour les ouvrir avec « mySheet.open() » ou les fermer avec « mySheet.close() » selon nos besoins. Par défaut, les feuilles de recouvrement sont masquées. Par conséquent, nous devrons au moins utiliser la méthode « open() ».

Controls.Button {
    text: "Open mySheet"
    onClicked: mySheet.open()
}

Lorsqu’elle est ouverte, cette feuille de recouvrement apparaîtra centrée verticalement et horizontalement dans sa page mère. Horizontalement, elle sera limitée par son parent, même si la largeur de son contenu dépasse celle de son parent. Si la longueur verticale de la feuille est supérieure à celle de ses « parents », alors, la feuille sera affichée à partir de sa position supérieure et il faudra la faire défiler.

Feuille globale

Si vous souhaitez afficher la feuille en tant que feuille globale, c’est-à-dire une feuille s’étendant sur toute la largeur de l’application, indépendamment de la page dont elle est la fille - nous devons rétablir sa parenté avec notre feuille de recouvrement de notre fenêtre d’application. Nous pouvons le faire avec la propriété « parent ».

Kirigami.OverlaySheet {
    id: mySheet

    parent: applicationWindow().overlay

    Controls.Label {
        Layout.fillWidth: true
        wrapMode: Text.WordWrap
        text: "Weeeeee, overlay sheet!"
    }
}
Feuille non globale de recouvrement

Feuille non globale de recouvrement

Feuille globale de recouvrement

Feuille globale de recouvrement

Dimensionnement fixe

Une feuille est gourmande et prendra le maximum de la largeur disponible dans une page si nécessaire. On peut éviter cela en spécifiant « implicitWidth » ou « Layout.preferredWidth » pour ses éléments fils, ce qui limitera la largeur de la feuille.

Kirigami.OverlaySheet {
    id: mySheet
    Controls.Label {
        Layout.preferredWidth: Kirigami.Units.gridUnit * 25
        wrapMode: Text.WordWrap
        text: "Weeeeee, overlay sheet! I'm so excited!! WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE!!!!!"
    }
}
Feuille de recouvrement à largeur variable

Feuille de recouvrement à largeur variable

Feuille de recouvrement à largeur fixe

Feuille de recouvrement à largeur fixe

En-têtes et pieds de page

Les feuilles de superposition sont fournies par défaut avec un en-tête contenant uniquement un bouton pour la fermeture de notre feuille de superposition. Nous pouvons ajouter un titre de Kirigami dans notre en-tête pour permettre aux utilisateurs de comprendre facilement à quoi sert la feuille. Pour ce faire, il suffit de définir la propriété « header » pour qu’elle contienne notre composant de titre de Kirigami.

Kirigami.OverlaySheet {
    id: mySheet

    header: Kirigami.Heading {
        text: "My Overlay Sheet"
    }

    Controls.Label {
        Layout.fillWidth: true
        wrapMode: Text.WordWrap
        text: "Weeeeee, overlay sheet!"
    }
}

Nous pouvons également fournir à notre feuille de recouvrement un pied de page. Les pieds de page des feuilles de recouvrement sont assez flexibles. Mais, le plus souvent, ils sont utilisés pour fournir aux feuilles de recouvrement, une sorte d’entrée interactive rapide similaire à celle fournie par les boîtes de dialogues modales(par exemple, des boutons pour « Appliquer », « Ok », « Annuler », « Fermer », etc.).

Les pieds de page sont définis de la même manière que les en-têtes :

Kirigami.OverlaySheet {
    id: mySheet

    header: Kirigami.Heading {
        text: "My Overlay Sheet"
    }

    footer: Controls.DialogButtonBox {
        standardButtons: DialogButtonBox.Close
        onRejected: mySheet.close()
    }

    Controls.Label {
        Layout.fillWidth: true
        wrapMode: Text.WordWrap
        text: "Weeeeee, overlay sheet!"
    }
}

Utilisation de vues déléguées / modèles

Puisque les feuilles de recouvrement sont conçues pour afficher du contenu verticalement, elles peut être particulièrement utiles lorsque utilisées avec des composants comme les objets « Listview ». Lors de l’affichage de contenu plus long que la largeur de la fenêtre elle-même, la feuille de recouvrement devient directement capable de faire du défilement :

Kirigami.OverlaySheet {
    id: mySheet

    ListView {
        model: 100
        implicitWidth: Kirigami.Units.gridUnit * 30
        delegate: Kirigami.BasicListItem {
            label: "Item in sheet " + modelData
        }
    }
}