Calaixos (drawers)

Els calaixos proporcionen aplicacions amb accés ràpid als controls i les pàgines de la vostra aplicació.

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.

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()
            }
        ]
    }
    ...
}

Captura de pantalla d'un nostre calaix global en mode d'escriptori que sembla una barra lateral

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.

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()
        }
    ]
}

El nostre calaix global ara mostra el component de la barra de cerca que hem establert com a capçalera

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.

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.

Nota

En aquest mode de menú, les capçaleres i els bàners no seran 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()
        }
    ]
}

Calaix global en el mode de menú, sense capçalera ni bàner

Bàners

Els bàners permeten mostrar un títol i una icona a la part superior del vostre calaix global (fins i tot al damunt de la capçalera).

De manera predeterminada, els bàners només seran visibles en els entorns mòbils. Podeu canviar això establint la propietat bannerVisible del component de calaix global a true.

Els títols, establerts amb la propietat title , es poden utilitzar per a embellir el vostre calaix global i fer que sembli menys dispers. Més important encara, pot recordar als usuaris que aquest és un calaix global i per a tota l'aplicació en lloc d'un calaix local.

També hi ha una propietat titleIcon , la qual pot combinar-se amb el títol per a fer que el calaix global sigui encara més agradable estèticament. Aquesta icona es col·locarà a l'esquerra del títol.

globalDrawer: Kirigami.GlobalDrawer {
    title: "My Global Drawer"
    titleIcon: "kde"
    bannerVisible: 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()
        }
    ]
}

Calaix global amb el títol i la icona al bàner

Nota

La propietat titleIcon pren els noms per a les icones de tot el sistema segons l'especificació de FreeDesktop. Aquestes icones i noms d'icones es poden veure amb l'aplicació ´CuttleFish del KDE que es distribueix amb el plasma-sdk, o visitant l'especificació per a l'anomenat de les icones de FreeDesktop.

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
44
import org.kde.kirigami 2.20 as Kirigami

Kirigami.ApplicationWindow {
    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 {
            main: Kirigami.Action {
                icon.name: "media-record"
            }
            left: Kirigami.Action {
                icon.name: "arrow-left"
            }
            right: Kirigami.Action {
                icon.name: "arrow-right"
            }
            contextualActions: [
                Kirigami.Action {
                    text: "Contextual Action 1"
                    icon.name: "media-playback-start"
                },
                Kirigami.Action {
                    text: "Contextual Action 2"
                    icon.name: "media-playback-stop"
                }
            ]
        }
    }
}

Calaix contextual amb accions contextuals ocultes

Calaix contextual que mostra totes les accions contextuals

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 passant de la vora dreta al centre de la pantalla en el mode d'esquerra a dreta o de la vora esquerra en el mode de dreta a esquerra. Si esteu en un escriptori i voleu provar la interfície mòbil, podeu executar la vostra aplicació amb la variable d'entorn QT_QUICK_CONTROLS_MOBILE=1.

El mateix exemple anterior, executant-se en mode mòbil

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 enfosqueixen la resta de l'aplicació i, igual que els fulls superposats «overlay sheets» , es descarten quan se selecciona sobre una àrea enfosquida.
Els calaixos inclosos permeten a l'usuari interactuar amb la resta de l'aplicació sense ser descartats i no enfosqueixen les altres àrees.

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.Controls 2.15 as Controls

Kirigami.Page {

    Kirigami.OverlayDrawer {
        id: bottomDrawer
        edge: Qt.BottomEdge
        // Establiu «modal» a «false» per a fer que aquest calaix estigui inclòs!
        modal: true

        contentItem: RowLayout {
            Layout.fillWidth: true

            Controls.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()
    }
}

Calaix modal a la vora inferior de la pantalla

Calaix inclòs a la vora inferior de la pantalla

Un cas d'ús per a calaixos inferiors superposats: NeoChat

El NeoChat utilitza calaixos superposats inferiors per a proporcionar a l'usuari una sèrie d'accions que poden realitzar sobre un missatge que han premut durant molt de temps. Aquí hi ha un exemple simplificat de com es veuen:

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ó del missatge
           ...
           
           // Accions del missatge
           Kirigami.BasicListItem {
               text: "Reply"
               onClicked: {
                   bottomDrawer.close();
               }
           }
           ...
       }
    }
}

Targetes (Card)

Chips