Överlagringsblad
En Kirigami.OverlaySheet är en enkelt komponent som du kan använda för att komplettera innehåll som visas på en programsida. De är konstruerade för att visa långt, vertikalt innehåll, och kan hantera innehåll som är längre än själva programfönstret.
De kan avfärdas genom att klicka eller röra utanför deras område, eller genom att klicka ikonen 'x' i bladens huvuden.
Lära sig om bladet
För att använda ett överlagringsblad, ska vi skapa det inne i Kirigami-sidan vi vill det ska visas på.
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!"
}
}
}

Överlagringsblad har metoder vi kan använda för att öppna,
open()
, eller stänga,
close()
, dem som vi tycker. Normalt är överlagringsblad dolda, så vi behöver åtminstone använda metoden open()
.
Controls.Button {
text: "Open mySheet"
onClicked: mySheet.open()
}
När det öppnas visas överlagringsblad som visas centrerat vertikalt och horisontellt inom dess överliggande sida. Horisontellt är det omgivet av dess överliggande sida även om bredden på dess innehåll överstiger det överliggande objektet. Om bladets vertikala längd överstiger det överliggande objektet, visas bladet från dess topposition, och är rullningsbart.
Globalt blad
Om du vill visa bladet som ett globalt blad, ett som täcker programmets hela bredd, oberoende av sidan det finns under, måste vi ändra överliggande objekt för vårt överlagringsblad till vårt programfönsters överlagringsegenskap. Vi kan göra det med egenskapen parent.
Kirigami.OverlaySheet {
id: mySheet
parent: applicationWindow().overlay
Controls.Label {
Layout.fillWidth: true
wrapMode: Text.WordWrap
text: "Weeeeee, overlay sheet!"
}
}

Icke-globala överlagringsblad

Globalt överlagringsblad
Fast storlek
Ett blad är girigt och använder maximalt tillgänglig bredd på en sida om det behövs. Vi kan undvika det genom att ange implicitWidth eller Layout.preferredWidth för dess underliggande element, som begränsar hur mycket bladet växer på bredden.
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!!!!!"
}
}

Icke-fast med överlagringsblad

Fast med överlagringsblad
Sidhuvud och sidfot
Överlagringsblad har normalt ett
sidhuvud
som bara innehåller en knapp för att stänga vårt överlagringsblad. Vi kan lägga till en
Kirigami.Heading
som en titel i vårt
sidhuvud
för att göra det enkelt för användare att förstå vad bladet är till för. Det görs genom att använda egenskapen header
för att innehålla vår Kirigami huvudkomponent.
Kirigami.OverlaySheet {
id: mySheet
header: Kirigami.Heading {
text: "My Overlay Sheet"
}
Controls.Label {
Layout.fillWidth: true
wrapMode: Text.WordWrap
text: "Weeeeee, overlay sheet!"
}
}

Vi kan också tillhandahålla en sidfot för vårt överlagringsblad. En sidfot i överlagringsblad är rätt flexibel, men oftast används de för att ge vårt överlagringsblad någon sorts snabb interaktiv inmatning som liknar den som modala dialogrutor tillhandahåller (t.ex. knappar för "Verkställ", "Ok", "Avbryt", "Stäng", etc.).
En sidfot ställs in på i stort sett samma sätt som ett sidhuvud:
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!"
}
}

Använda vyer med delegat/modell
Eftersom överlagringsblad är konstruerade för att visa vertikalt innehåll, kan de vara särskilt användbara när de används ihop med komponenter såsom listvyer . När innehåll längre än själva programfönstret, blir överlagringsbladet rullningsbart:
Kirigami.OverlaySheet {
id: mySheet
ListView {
model: 100
implicitWidth: Kirigami.Units.gridUnit * 30
delegate: Kirigami.BasicListItem {
label: "Item in sheet " + modelData
}
}
}
