Hojas superpuestas

Las hojas superpuestas proporcionan un sencillo componente que se puede usar para complementar el contenido que se muestra en la página de una aplicación. Están diseñadas para mostrar contenido vertical largo y pueden albergar un contenido más largo que la propia ventana de la aplicación.

Se pueden descartar haciendo clic o tocando fuera de su área, o pulsando el icono ‘x’ que hay en la cabecera de la hoja.

Más información sobre la hoja

Para poder usar una hoja superpuesta, debemos crearla dentro de la página de Kirigami en la que queremos que aparezca.

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

Las hojas superpuestas contienen métodos que se pueden usar para abrirlas (mySheet.open()) o cerrarlas (mySheet.close()) como mejor nos parezca. De forma predeterminada, las hojas superpuestas están ocultas, por lo que al menos necesitaremos usar el método open().

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

Cuando está abierta, la hoja superpuesta aparecerá centrada vertical y horizontalmente dentro de la página que la contiene, que además la limita en horizontal incluso si su contenido es más amplio. Si la longitud vertical de la hoja excede a la de la página que la contiene, la hoja se mostrará desde su posición superior y se podrá desplazar su contenido.

Hoja global

Si desea mostrar la hoja como una hoja global (una que abarca todo el ancho de la aplicación, independientemente de la página de la que sea hija), tendremos que cambiar el padre de nuestra hoja superpuesta a la propiedad de superposición de la ventana de nuestra aplicación. Podemos hacer esto con la propiedad parent.

Kirigami.OverlaySheet {
    id: mySheet

    parent: applicationWindow().overlay

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

Tamaño fijo

Una hoja es codiciosa y tomará la cantidad máxima de anchura disponible en una página si es necesario. Podemos evitar esto indicando una implicitWidth o una Layout.preferredWidth para su elemento hijo, que limitará cuánto puede crecer la hoja a lo ancho.

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

Encabezados y pies de página

Las hojas superpuestas contienen una cabecera de forma predeterminada que solo contiene un botón para cerrarlas. Podemos añadir una cabecera de Kirigami como título a dicha cabecera para que el usuario entienda mejor para qué sirve la hoja. Esto se puede hacer definiendo la propiedad header para que contenga nuestro componente de cabecera 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!"
    }
}

También podemos proporcionar un pie a nuestra hoja superpuesta. Los pies de las hojas superpuestas son bastante flexibles, aunque la mayoría de las veces se usan para proporcionar a las hojas superpuestas algún tipo de entrada interactiva rápida, similar a la proporcionada por los diálogos modales (por ejemplo, los botones ‘Aplicar’, ‘Aceptar’, ‘Cancelar’, ‘Cerrar’, etc.).

Los pies de página se definen de la misma manera que los encabezados:

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

Uso de vistas delegado/modelo

Dado que las hojas de superposición están diseñadas para mostrar contenido vertical, pueden resultar especialmente útiles cuando se usan junto a componentes del tipo ListViews. Cuando se muestra contenido más largo que la ventana de la aplicación, la hoja de superposición se vuelve desplazable:

Kirigami.OverlaySheet {
    id: mySheet

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