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

Hoja superpuesta no global

Hoja superpuesta global
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!!!!!"
}
}

Hoja superpuesta de anchura no fija

Hoja superpuesta de anchura fija
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
}
}
}
