Fulls superposats

Els fulls superposats poden servir per a una varietat d’usos, tant per a servir com per a introduir dades.

Els fulls superposats proporcionen un component senzill 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 el 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.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!"
        }
    }
}
Full superposat senzill

Els fulls superposats venen amb mètodes que podem utilitzar per a obrir (mySheet.open()) o tancar (mySheet.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 que sigui filla-, haurem de tornar a fer referència al 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!"
    }
}
Full superposat no global

Full superposat no global

Full superposat global

Full superposat global

Mida fixa

Un full és cobdiciós 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 fill, 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!!!!!"
    }
}
Full superposat d’amplada no fixa

Full superposat d’amplada no fixa

Full superposat d’amplada fixa

Full superposat d’amplada fixa

Capçaleres i peus

Els fulls superposats venen de manera predeterminada amb una capçalera que només conté un botó per a tancar el nostre full superposat. Podem afegir una capçalera de Kirigami com a títol en la nostra capçalera 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!"
    }
}
Capçalera del full

També podem proporcionar el nostre full superposat amb un peu de pàgina. Els peus de pàgina en els fulls superposats són molt 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!"
    }
}
Peu de pàgina del full

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 ListView. 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
        }
    }
}
Full amb una vista de llista