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ó.

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

	...

}
El nostre calaix global nou

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

Calaix global amb una capçalera de barra de cerca

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.

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 com a menú a l’escriptori

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).

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"

	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 títol i icona en el bàner

No obstant això, 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.

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, 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:

  • modal controla si el calaix serà modal o inclòs depenent d’un valor booleà.
  • edge controla en quina vora de la finestra de l’aplicació apareixerà el calaix. Les opcions per a aquesta propietat són Qt.TopEdge, Qt.RightEdge, Qt.BottomEdge i Qt.LeftEdge.
  • contentItem conté el component que formarà el contingut del vostre calaix.
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

			Kirigami.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="Calaix modal a la vora inferior de la pantalla."/><figcaption>
        <p>Calaix modal a la vora inferior de la pantalla.</p>
    </figcaption>
Calaix inclòs 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();
               }
           }
           ...
       }
    }
}