Fulls superposats

Un Kirigami.OverlaySheet és un component individual que podreu utilitzar per a complementar el contingut que es mostra a la pàgina d'una aplicació. Estan dissenyats per a mostrar contingut vertical extens i poden acomodar contingut més llarg millor que la finestra mateixa de l'aplicació.

Es poden descartar fent clic o tocant fora de la seva àrea, o fent clic sobre la icona «x» en les capçaleres dels fulls.

Aprendre sobre el full

Per a emprar un full superposat, hem de crear-lo dins de la pàgina de Kirigami en la que volem que aparegui.

import QtQuick 2.15
import QtQuick.Controls 2.15 as Controls
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.20 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!"
        }
    }
}

Els fulls superposats venen amb mètodes que podem utilitzar per a obrir open() o tancar close() com millor ens sembli. De manera predeterminada, els fulls superposats estaran ocults, de manera que almenys necessitarem utilitzar el mètode open().

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

Quan s'obre, aquest full superposat apareixerà centrat verticalment i horitzontalment dins de la seva pàgina pare. Horitzontalment estarà delimitat pel seu pare fins i tot si l'amplada del seu contingut excedeix la del seu pare. Si la longitud vertical del full excedeix la del full principal, el full es mostrarà des de la seva posició superior i es podrà desplaçar.

Full global

Si voleu mostrar el full com un full global (un que abasti tota l'amplada de l'aplicació, independentment de la pàgina de la qual sigui filla), haurem de tornar a afiliar el nostre full superposat a la propietat overlay de la finestra de la nostra aplicació. Podem fer això amb la propietat parent.

Kirigami.OverlaySheet {
    id: mySheet

    parent: applicationWindow().overlay

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

Mida fixa

Un full és voraç i, si cal, prendrà la quantitat màxima d'amplada disponible en una pàgina. Podem evitar-ho especificant una implicitWidth o una Layout.preferredWidth per als seus elements fills, la qual limitarà quant creixerà el full en amplada.

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

Capçaleres i peus

Els fulls superposats venen de manera predeterminada amb una header que només conté un botó per a tancar el nostre full superposat. Podem afegir una Kirigami.Heading com a títol en la nostra header perquè sigui més fàcil per als usuaris entendre per a què serveix el full. Això es fa establint la propietat header perquè contingui el nostre component de capçalera 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!"
    }
}

També podem proporcionar al nostre full superposat un footer . Els peus de pàgina en els fulls superposats són força flexibles, però la majoria de les vegades s'utilitzen per a proporcionar fulls superposats amb algun tipus d'entrada interactiva ràpida similar a la proporcionada pels diàlegs modals (p. ex., els botons per a «Apply», «Ok», «Cancel», «Close», etc.)

Els peus de pàgina s'estableixen de la mateixa manera que les capçaleres:

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

Usar les vistes «delegate / model»

Atès que els fulls superposats estan dissenyats per a mostrar contingut vertical, poden ser especialment útils quan s'utilitzen juntament amb components com les ListViews . Quan es mostra contingut més llarg que la finestra de l'aplicació, el full superposat es torna desplaçable:

Kirigami.OverlaySheet {
    id: mySheet

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