Lådor
Lådor är paneler som glider ut från programfönstrets sidor. De kan befolkas med interaktiva element som Kirigami åtgärder, knappar, text, med mera.
Lådor har olika typer, skepnader och former. På den här sidan går vi igenom alla typer och ger en översikt över deras karaktärer.
Global låda
Den globala lådan är en standardfunktion i KDE:s mobilprogram och kan ibland också finnas i deras skrivbordsinkarnationer. Den innehåller programmets huvudmeny: här ingår alla funktioner som inte är specifika för den nuvarande sidan men ändå signifikanta för allmän navigering eller interaktion med programmet.
Den kan aktiveras genom att röra vid hamburgermenyn eller genom att svepa från vänster kant till mitten av skärmen i vänster till höger-läge eller från höger kant i höger till vänster-läge.
Kirigami.GlobalDrawer komponenter är vad vi använder för att skapa sådana lådor. De ställs in till egenskapen globalDrawer från Kirigami.ApplicationWindow som utgör basen för vårt Kirigami-program.
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()
}
]
}
...
}

Sidhuvud
Sidhuvud kan användas för att placera orörliga komponenter längst upp i din globala låda. Sidhuvudkomponenter förblir på plats även om din globala låda innehåller nästlade Kirigami-åtgärder som ersätter det nuvarande lagret i den globala lådan.
Din valda sidhuvudkomponent kan anges med den globala lådans egenskap header
.
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()
}
]
}

Vår globala låda visar nu sökradskomponenten som vi angav som sidhuvudet
Anpassa till skrivbordet
Medan globala lådor med panelstil kan vara användbara i mobilomgivningar, kan de vara för stora för skrivbordsdatorer.
Som tur är tillhandahåller Kirigami globala lådor egenskapen
isMenu
. När den är inställd till true
, förvandlas vår globala låda till mer traditionella menyer på skrivbordsdatorer.
Anmärkning
I menyläget är inte sidhuvuden och baner synliga.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()
}
]
}

Global låda i menyläge, utan sidhuvud eller baner
Baner
Baner låter dig visa en titel och en ikon längst upp i din globala låda (till och med ovanför sidhuvudet).
Baner är normalt bara synliga i mobilomgivningar. Du kan ändra det genom att ställa in komponentens egenskap
bannerVisible
till true
i den globala lådan.
Titlar, som ställs in med egenskapen title , kan användas för att snygga till den globala lådan och få den att se mindre gles ut. Av större vikt är att den kan påminna användaren att det här är en global och programomfattande låda istället för en lokal låda.
Egenskapen titleIcon finns också, som kan paras ihop med titeln för att göra den globala lådan ännu mer estetiskt tilltalande. Ikonen placeras till vänster om titeln.
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()
}
]
}

Global låda med titel och ikon i baner
Anmärkning
Egenskapen titleIcon använder namn på systemomfattande ikoner enligt FreeDesktop-specifikationen. Ikonerna och ikonnamnen kan visas med KDE:s program CuttleFish som levereras med plasma-sdk, eller genom att besöka FreeDesktops specifikation för namngivning av ikoner.Sammanhangslådor
Medan en Kirigami.GlobalDrawer visar globala åtgärder tillgängliga överallt i programmet, ska en Kirigami.ContextDrawer användas för att visa åtgärder som bara är relevanta i vissa sammanhang. Det används oftast på separata sidor.
En sammanhangslåda dyker bara upp om några contextualActions har skapats som en del av Page.actions group . Den beter sig också annorlunda beroende på om den används på en mobilplattform eller en skrivbordsdator.
På en skrivbordsdator, när ett fönster har tillräckligt med utrymme, visas sammanhangsberoende åtgärder som en del av gruppen actions
på det övre verktygsraden. När utrymmet är begränsat, till exempel på en mobil eller i ett smalt fönster, döljs sammanhangsberoende åtgärder bakom en hamburgermeny på höger sida. Det skiljer sig från andra åtgärder i gruppen actions
, nämligen actions.main
, actions.left
och actions.right
; de göms inte i fönster med begränsat utrymme, utan dras istället ihop till sina respektive ikoner.
|
|

Sammanhangslåda med sammanhangsberoende åtgärder dolda

Sammanhangslåda som visar alla sammanhangsberoende åtgärder
På en mobil består lådan alltid av åtgärder gömda bakom en hamburgermeny. Den kan aktiveras genom att trycka på hamburgermenyn eller genom att svepa från höger kant till mitten av skärmen i vänster till höger-läge eller från vänster kant i höger till vänster-läge. Om du är på en skrivbordsdator och vill prova mobilgränssnittet kan du köra programmet med miljövariabeln QT_QUICK_CONTROLS_MOBILE=1
.

Samma exempel som ovan, men på en mobil

Sammanhangslåda öppen på mobil
Modala lådor och lådor på plats
Kirigami erbjuder två ytterligare sorters lådor, modala lådor och lådor på plats. De är mycket lika varandra: båda fyller hela programmets bredd eller höjd och kan placeras vid programfönstrets kanter. Dock reagerar de olika på användarinteraktion.
- Modala lådor gör resten av programmet mörkare och, liksom överlagringsblad , avfärdas vid klick på ett mörkare område.
- Lådor på plats låter användaren fortsätta interagera med resten av programmet utan att de avfärdas, och gör inte andra områden mörkare.
De två lådorna är så lika eftersom de i själva verket kan implementeras med samma komponent i Kirigami: Kirigami.OverlayDrawer . Här är några viktiga egenskaper i komponenten att hålla i minnet:
- Popup.modal styr om lådan är modal eller på plats beroende på ett Booleskt värde
- Drawer.edge bestämmer vilken kant av programfönstret som lådan dyker upp. Alternativ för egenskapen är
Qt.TopEdge
,Qt.RightEdge
,Qt.BottomEdge
ochQt.LeftEdge
- Popup.contentItem innehåller komponenterna som utgör lådans innehåll
import QtQuick.Controls 2.15 as Controls
Kirigami.Page {
Kirigami.OverlayDrawer {
id: bottomDrawer
edge: Qt.BottomEdge
// Ställ in modal till false för att göra lådan på plats.
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()
}
}

Modal låda vid skärmens underkant

Låda på plats vid skärmens underkant
Ett användarfall för överlagrade nedre lådor: NeoChat
NeoChat använder överlagrade nedre lådor för att ge användaren ett antal åtgärder de kan utföra med ett meddelande de har tryckt på länge. Här är ett förenklat exempel på hur det ser ut:
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
// Meddelandeinformation
...
// Meddelandeåtgärder
Kirigami.BasicListItem {
text: "Reply"
onClicked: {
bottomDrawer.close();
}
}
...
}
}
}