Cajones
Los cajones son paneles que se deslizan por los lados de la ventana de la aplicación. Pueden contener elementos interactivos, como acciones de Kirigami, botones y texto, entre otros.
Los cajones pueden ser de distintos tipos, formas y formatos. En esta página vamos a repasar cada tipo y proporcionaremos un resumen de sus características.
Cajón global
El cajón global es una funcionalidad estándar de las aplicaciones móviles de KDE, que a veces también se puede encontrar en sus reencarnaciones del escritorio. Contiene el menú principal de una aplicación: aquí se incluyen todas las funciones que no son específicas de la página actual, aunque siguen siendo importantes para la navegación general o la interacción dentro de la aplicación.
Usamos componentes Kirigami.GlobalDrawer
para crear este tipo de cajones. Para ello, los asignamos a la propiedad globalDrawer
de la Kirigami.ApplicationWindow
que constituye la base de nuestra aplicación Kirigami.
Kirigami.ApplicationWindow {
globalDrawer: Kirigami.GlobalDrawer {
actions: [
Kirigami.Action {
text: "Kirigami Action 1"
},
Kirigami.Action {
text: "Kirigami Action 2"
},
Kirigami.Action {
text: i18n("Quit")
icon.name: "gtk-quit"
shortcut: StandardKey.Quit
onTriggered: Qt.quit()
}
]
}
...
}

Cabecera
Las cabeceras se pueden usar para situar componentes adhesivos en la parte superior de nuestro cajón global. Los componentes de cabecera permanecerán en su sitio incluso cuando el cajón global contiene acciones anidadas de Kirigami que sustituyen la capa actual del cajón global.
Puede definir el componente de cabecera de su elección en la propiedad header
del cajón global.
globalDrawer: Kirigami.GlobalDrawer {
header: Kirigami.AbstractApplicationHeader {
contentItem: Kirigami.SearchField {
id: searchField
Layout.fillWidth: true
}
}
actions: [
Kirigami.Action {
text: "Kirigami Action 1"
},
Kirigami.Action {
text: "Kirigami Action 2"
},
Kirigami.Action {
text: i18n("Quit")
icon.name: "application-exit"
shortcut: StandardKey.Quit
onTriggered: Qt.quit()
}
]
}
Nuestro cajón global muestra ahora el componente de barra de búsqueda que hemos definido como cabecera.
Adaptación para el escritorio
Aunque los cajones globales de estilo panel pueden ser útiles en entornos móviles, es posible que sean demasiado grandes en el escritorio.
Afortunadamente, los cajones globales de Kirigami proporcionan la propiedad isMenu
. Si le asignamos el valor true
, nuestro cajón global se convertirá en un menú más tradicional solo en el escritorio.
Nota
En este modo de menú, las cabeceras y los banners no son visibles.globalDrawer: Kirigami.GlobalDrawer {
isMenu: true
actions: [
Kirigami.Action {
text: "Kirigami Action 1"
},
Kirigami.Action {
text: "Kirigami Action 2"
},
Kirigami.Action {
text: i18n("Quit")
icon.name: "application-exit"
shortcut: StandardKey.Quit
onTriggered: Qt.quit()
}
]
}

Banners
Los banners le permiten mostrar un título y un icono en la parte superior de un cajón global (incluso sobre la cabecera).
Los títulos, definidos con la propiedad title
, se pueden usar para embellecer un cajón global y hacer que parezca menos disperso. Más importante aún, puede recordar a los usuarios que este es un cajón global y para toda la aplicación en lugar de un cajón local.
También existe una propiedad titleIcon
que se puede emparejar con el título para hacer que la estética del cajón global sea todavía más agradable. Este icono se situará a la izquierda del título.
globalDrawer: Kirigami.GlobalDrawer {
title: "My Global Drawer"
titleIcon: "kde"
actions: [
Kirigami.Action {
text: "Kirigami Action 1"
},
Kirigami.Action {
text: "Kirigami Action 2"
},
Kirigami.Action {
text: i18n("Quit")
icon.name: "application-exit"
shortcut: StandardKey.Quit
onTriggered: Qt.quit()
}
]
}

Nota
La propiedadtitleIcon
usa nombres de iconos del sistema de la especificación de FreeDesktop. Estos iconos y nombres de iconos se pueden ver con la aplicación CuttleFish de KDE o visitando la especificación de nombres de iconos de FreeDesktop.No obstante, de forma predeterminada, los banners solo son visibles en los entornos móviles. Puede cambiar este comportamiento asignando el valor true
a la propiedad bannerVisible
del componente del cajón global.
Cajones modales y en línea
Kirigami ofrece dos tipos adicionales de cajones: modales y en línea. Los dos son bastante similares: ambos se extienden por la totalidad de la anchura o de la altura de la aplicación y se pueden situar en los bordes de la ventana de la aplicación. No obstante, reaccionan de forma diferente a la interacción del usuario.
- Los cajones modales oscurecen el resto de la aplicación y, como las hojas superpuestas, se descartan al pulsar sobre un área oscurecida.
- Los cajones en línea permiten que el usuario pueda interactuar con el resto de la aplicación sin ser descartados, y no oscurecen otras áreas.
Estos dos cajones son tan similares porque son, de hecho, el mismo componente de Kirigami: Kirigami.OverlayDrawer
. Las propiedades importantes de este componente a tener en cuenta son:
modal
controla si el cajón será modal o en línea según un valor booleanoedge
controla en qué borde de la ventana de la aplicación aparecerá el cajón; las opciones para esta propiedad sonQt.TopEdge
,Qt.RightEdge
,Qt.BottomEdge
yQt.LeftEdge
contentItem
contiene el componente que formará el contenido del cajón
import QtQuick.Controls 2.15 as QQC2
Kirigami.Page {
Kirigami.OverlayDrawer {
id: bottomDrawer
edge: Qt.BottomEdge
// Defina `modal` a falso para hacer que este cajón esté en línea.
modal: true
contentItem: RowLayout {
Layout.fillWidth: true
QQC2.Label {
Layout.fillWidth: true
text: "Say hello to my little drawer!"
}
Controls.Button {
text: "Close"
onClicked: bottomDrawer.close()
}
}
}
Controls.Button {
text: "Open bottomDrawer"
onClicked: bottomDrawer.open()
}
}
<figure class="text-center"><img src="modal_drawer.png"
alt="Cajón modal en el borde inferior de la pantalla."/><figcaption>
<p>Cajón modal en el borde inferior de la pantalla.</p>
</figcaption>

Cajón en línea en el borde inferior de la pantalla.
Un caso de uso para cajones inferiores superpuestos: NeoChat
NeoChat usa cajones superpuestos en la parte inferior para proporcionar al usuario varias acciones que puede realizar sobre el mensaje que haya pulsado durante cierto tiempo. Esto es un ejemplo simplificado de cómo se muestra:
Kirigami.Page {
ListView {
model: App.MessageModel
delegate: MessageDelegate {
onPressAndHold: bottomDrawer.open()
}
}
Kirigami.OverlayDrawer {
id: bottomDrawer
height: popupContent.implicitHeight
edge: Qt.BottomEdge
padding: 0
leftPadding: 0
rightPadding: 0
bottomPadding: 0
topPadding: 0
parent: applicationWindow().overlay
ColumnLayout {
id: popupContent
width: parent.width
spacing: 0
// Información del mensaje
...
// Acciones del mensaje
Kirigami.BasicListItem {
text: "Reply"
onClicked: {
bottomDrawer.close();
}
}
...
}
}
}