Calaixos (drawers)

Els calaixos són subfinestres que llisquen pels costats de la finestra de l'aplicació. Es poden completar amb elements interactius com les Kirigami Actions: botons, text i més.

Els calaixos venen en diferents tipus, formes i formularis. En aquesta pàgina repassarem cada tipus i proporcionarem un resum de les seves característiques.

Calaix global

El calaix global és una característica estàndard en les aplicacions de mòbil del KDE i, de vegades, també es pot trobar en les seves encarnacions per a l'escriptori. Conté el menú principal d'una aplicació: aquí s'inclouen totes les funcions que no són específiques de la pàgina actual, però que encara són importants per a la navegació general o la interacció dins de l'aplicació.

Es pot activar tocant el menú d'hamburguesa o lliscant des de la vora esquerra al centre de la pantalla en el mode d'esquerra a dreta o des de la vora dreta en el mode de dreta a esquerra.

Els components d'un Kirigami.GlobalDrawer són els que utilitzem per a crear aquests calaixos. S'estableixen a la propietat globalDrawer de la Kirigami.ApplicationWindow que forma la base de la nostra aplicació escrita amb el Kirigami.

import QtQuick
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    width: 600
    height: 600
    pageStack.initialPage: Kirigami.Page { /* Page code here... */ }

    globalDrawer: Kirigami.GlobalDrawer {
        title: "Global Drawer"
        titleIcon: "applications-graphics"
        actions: [
            Kirigami.Action {
                text: "Kirigami Action 1"
                icon.name: "user-home-symbolic"
                onTriggered: showPassiveNotification("Action 1 clicked")
            },
            Kirigami.Action {
                text: "Kirigami Action 2"
                icon.name: "settings-configure-symbolic"
                onTriggered: showPassiveNotification("Action 2 clicked")
            },
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "application-exit-symbolic"
                shortcut: StandardKey.Quit
                onTriggered: Qt.quit()
            }
        ]
    }
}

Capçalera

Les capçaleres es poden utilitzar per a col·locar components adhesius a la part superior del vostre calaix global. Els components de la capçalera romandran en el seu lloc, fins i tot si el vostre calaix global conté accions de Kirigami imbricades que substitueixen la capa actual en el calaix global.

El component de capçalera que trieu es pot configurar amb la propietat header del calaix global, i substituirà el títol del calaix global. Això és útil per a afegir un Kirigami.SearchField, per exemple:

import QtQuick
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    width: 600
    height: 600
    pageStack.initialPage: Kirigami.Page { /* Page code here... */ }

    globalDrawer: Kirigami.GlobalDrawer {
        title: "Global Drawer with searchfield (not visible)"

        header: Kirigami.SearchField {
                id: searchField
        }

        actions: [
            Kirigami.Action {
                text: "Kirigami Action 1"
                icon.name: "user-home-symbolic"
                onTriggered: showPassiveNotification("Action 1 clicked")
            },
            Kirigami.Action {
                text: "Kirigami Action 2"
                icon.name: "settings-configure-symbolic"
                onTriggered: showPassiveNotification("Action 2 clicked")
            },
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "application-exit-symbolic"
                shortcut: StandardKey.Quit
                onTriggered: Qt.quit()
            }
        ]
    }
}

Adaptar-la per a l'escriptori

Si bé els calaixos globals d'estil subfinestra poden ser útils en entorns mòbils, és possible que siguin massa grans a l'escriptori, especialment quan les aplicacions tenen poques accions.

Afortunadament, els calaixos globals de Kirigami proporcionen una propietat isMenu. Quan es configura com a true, els nostres calaixos globals esdevindran menús més tradicionals només a l'escriptori.

globalDrawer: Kirigami.GlobalDrawer {
    isMenu: true

    actions: [
        // Aquí les accions del Kirigami...
    ]
}

Calaixos contextuals

Mentre un Kirigami.GlobalDrawer mostra les accions globals disponibles a tota la vostra aplicació, un Kirigami.ContextDrawer s'ha d'utilitzar per a mostrar accions que només són rellevants en determinats contextos. Normalment s'utilitza en pàgines separades.

Només es mostrarà un calaix contextual si s'ha creat qualsevol contextualActions com a part del grup Page.actions. També es comporta de manera diferent depenent de si s'utilitza en una plataforma mòbil o en un escriptori.

En un escriptori, quan una finestra té prou espai, les accions contextuals es mostren com a part del grup actions a la barra d'eines superior. Quan l'espai és limitat, com en un dispositiu mòbil o en una finestra estreta, les accions contextuals s'oculten darrere d'un menú d'hamburguesa al costat dret. Això és diferent d'altres accions en el grup actions, concretament actions.main, actions.left i actions.right; aquestes no s'ocultaran en les finestres restringides per espais, i en el seu lloc es col·lapsaran en les seves respectives icones.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    height: 600
    width: 1200
    minimumWidth: 500

    globalDrawer: Kirigami.GlobalDrawer {}
    contextDrawer: Kirigami.ContextDrawer {}

    pageStack.initialPage: [ emptyPage, contextDrawerPage ]

    Kirigami.Page {
        title: "Empty page"
        id: emptyPage
    }

    Kirigami.Page {
        id: contextDrawerPage
        title: "Context Drawer page"

        actions: [
            Kirigami.Action {
                icon.name: "media-record"
            },
            Kirigami.Action {
                icon.name: "arrow-left"
            },
            Kirigami.Action {
                icon.name: "arrow-right"
            },
            Kirigami.Action {
                text: "Contextual Action 1"
                icon.name: "media-playback-start"
            },
            Kirigami.Action {
                text: "Contextual Action 2"
                icon.name: "media-playback-stop"
            }
        ]
    }
}

Al mòbil, el calaix sempre consisteix en accions ocultes darrere d'un menú d'hamburguesa. Es pot activar tocant el menú d'hamburguesa o lliscant des de la vora dreta al centre de la pantalla en el mode d'esquerra a dreta o des de la vora esquerra en el mode de dreta a esquerra.

Calaixos modals i inclosos

El Kirigami ofereix dos tipus addicionals de calaixos: calaixos modals i calaixos inclosos. Són força similars entre si: ambdós abasten la totalitat de l'amplada o alçada de l'aplicació, i es poden col·locar a les vores de la finestra de l'aplicació. No obstant això, reaccionen de manera diferent de la interacció de l'usuari.

• Els calaixos modals estan ocults de manera predeterminada i enfosqueixen la resta de l'aplicació, i es descarten quan se selecciona sobre una àrea enfosquida.
• Els calaixos inclosos es mostren de manera predeterminada i permeten a l'usuari interactuar amb la resta de l'aplicació sense ser descartats i no enfosqueixen les altres àrees.

Aquesta mena de calaix és obert i flexible, però generalment, és possible que vulgueu utilitzar aquest tipus de calaix quan vulgueu que aparegui una llista petita d'opcions en una pulsació llarga o un clic dret.

Aquests dos calaixos són molt similars perquè, de fet, són el mateix component de Kirigami: Kirigami.OverlayDrawer. Propietats importants d'aquest component a tenir en compte:

• Popup.modal controla si el calaix serà modal o inclòs depenent d'un valor booleà.
• Drawer.edge controla en quina vora de la finestra de l'aplicació apareixerà el calaix. Les opcions per a aquesta propietat són part de l'Edge enum, això és, Qt.TopEdge, Qt.RightEdge, Qt.BottomEdge i Qt.LeftEdge.
• Popup.contentItem conté el component que formarà el contingut del calaix.

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    width: 400
    height: 600
    pageStack.initialPage: Kirigami.Page {
        title: "OverlayDrawer at the bottom"
        actions: [
            Kirigami.Action {
                text: "Open bottomDrawer"
                onTriggered: bottomDrawer.open()
            }
        ]
        Kirigami.OverlayDrawer {
            id: bottomDrawer
            edge: Qt.BottomEdge
            // Establiu «modal» a «false» per a fer que aquest calaix estigui inclòs!
            modal: true

            contentItem: RowLayout {
                Controls.Label {
                    Layout.fillWidth: true
                    text: "Say hello to my little drawer!"
                }
                Controls.Button {
                    text: "Close"
                    onClicked: bottomDrawer.close()
                }
            }
        }
    }
}