Overlay-vellen
Een Kirigami.OverlaySheet is een eenvoudige component die gebruikt kan worden om de getoonde inhoud van een pagina van de toepassing aan te vullen. Ze zijn ontworpen om lange, verticale inhoud te tonen en kunnen inhoud langer dan het toepassingsvenster zelf bevatten.
Ze kunnen afgewezen worden door te klikken of te tikken buiten hun gebied of door op het 'x'-pictogram te klikken op koppen van vellen.
Iets te weten te komen over het vel
Om een overlay-vel te gebruiken, moeten we het aanmaken binnen de Kirigami pagina waarin we het willen laten verschijnen.
import QtQuick 2.15
import QtQuick.Controls 2.15 as Controls
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.20 as Kirigami
Kirigami.Page {
id: page
Layout.fillWidth: true
Kirigami.OverlaySheet {
id: mySheet
Controls.Label {
Layout.fillWidth: true
wrapMode: Text.WordWrap
text: "Weeeeee, overlay sheet!"
}
}
}

Overlay-vellen komen met methoden die we kunnen kunnen gebruiken om te openen
open()
of sluiten
close()
zoals we dat nodig hebben. Standaard zijn overlay-vellen verborgen, dus zullen we ten minste de methode open()
nodig hebben.
Controls.Button {
text: "Open mySheet"
onClicked: mySheet.open()
}
Bij openen zal dit overlay-vel verticaal en horizontaal gecentreerd verschijnen in zijn ouderpagina. Horizontaal zal het begrenst zijn door zijn ouder zelfs als zijn breedte van de inhoud groter is dan zijn ouder. Als de verticale lengte van het vel groter is dan die van zijn ouder, zal het vel getoond worden vanaf zijn bovenkant en zal te verschuiven zijn.
Globaal vel
Als u het vel als een globaal vel wilt tonen—een die spant over de gehele breedte van de toepassing, ongeacht of de pagina een kind is—moeten we ons overlay-vel opnieuw een ouder geven naar de overlay-eigenschap van ons toepassingsvenster. We kunnen dat doen met de eigenschap parent.
Kirigami.OverlaySheet {
id: mySheet
parent: applicationWindow().overlay
Controls.Label {
Layout.fillWidth: true
wrapMode: Text.WordWrap
text: "Weeeeee, overlay sheet!"
}
}

Niet-globaal overlay-vel

Globaal overlay-vel
Gerepresenteerde grootte
Een vel is hebberig en zal, indien nodig, de maximale hoeveelheid van beschikbare breedte in een pagina nemen. We kunnen dit vermijden door een implicitWidth of een Layout.preferredWidth voor zijn kindelementen, die, hoeveel het vel zal groeien in de breedte, zal beperken.
Kirigami.OverlaySheet {
id: mySheet
Controls.Label {
Layout.preferredWidth: Kirigami.Units.gridUnit * 25
wrapMode: Text.WordWrap
text: "Weeeeee, overlay sheet! I'm so excited!! WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE!!!!!"
}
}

Overlay-vel met niet-vastgezette breedte

Overlay-vel met vaste breedte
Koppen en voeten
Overlay-vellen komen standaard met een
header
die alleen een knop voor sluiten van ons overlay-vel bevat. We kunnen een
Kirigami.Heading
als een titel in onze
header
toevoegen om het gemakkelijk voor gebruikers te maken om te begrijpen waar het vel voor is. Dit wordt gedaan door de header
de kopcomponent te laten bevatten.
Kirigami.OverlaySheet {
id: mySheet
header: Kirigami.Heading {
text: "My Overlay Sheet"
}
Controls.Label {
Layout.fillWidth: true
wrapMode: Text.WordWrap
text: "Weeeeee, overlay sheet!"
}
}

We kunnen ook ons overlay-vel voorzien van een footer . Voettekst in overlay-vellen zijn behoorlijk flexibel, maar meestal worden ze gebruikt om overlay-vellen te voorzien van een soort van snelle interactieve invoer gelijkend op wat geleverd wordt door modale dialogen (bijv. knoppen voor "Toepassen", "OK", "Annuleren", "Sluiten", etc.)
Voeten worden ingesteld op vrijwel dezelfde manier als koppen:
Kirigami.OverlaySheet {
id: mySheet
header: Kirigami.Heading {
text: "My Overlay Sheet"
}
footer: Controls.DialogButtonBox {
standardButtons: DialogButtonBox.Close
onRejected: mySheet.close()
}
Controls.Label {
Layout.fillWidth: true
wrapMode: Text.WordWrap
text: "Weeeeee, overlay sheet!"
}
}

Gedelegeerde / model weergave gebruiken
Omdat overlay-vellen ontworpen zijn om verticale inhoud te tonen, kunnen ze speciaal nuttig zijn bij gebruik samen met componenten zoals ListViews . Wanneer de inhoud langer is dan het toepassingsvenster zelf, wordt het overlay-vel schuifbaar:
Kirigami.OverlaySheet {
id: mySheet
ListView {
model: 100
implicitWidth: Kirigami.Units.gridUnit * 30
delegate: Kirigami.BasicListItem {
label: "Item in sheet " + modelData
}
}
}
