Arkusze nakładkowe
Arkusze nakładkowe zapewniają proste składniki, których możesz użyć do uzupełnienia treści wyświetlanej na stronie aplikacji. Są stworzone do wyświetlania długiej, pionowej treści i mogą mieścić treść dłuższą niż samo okno aplikacji.
Można je odwołać naciskając lub stukając poza ich obszarem lub naciskając na ikonę 'x' na nagłówkach stron.
Nauka arkuszy
Aby użyć arkusza nakładkowego, powinniśmy stworzyć go wewnątrz strony Kirigami, na której chcemy, aby się pojawił.
import QtQuick 2.0
import QtQuick.Controls 2.0 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.5 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!"
}
}
}

Arkusze nakładkowe zawierają metody, których możemy użyć do ich otwierania (mySheet.open()
) lub zamykania (mySheet.close()
) w dowolnej chwili. Domyślnie, arkusze nakładkowe są ukryte, więc będziemy musieli użyć co najmniej metody open()
.
Controls.Button {
text: "Open mySheet"
onClicked: mySheet.open()
}
Po otwarciu, ten nałożony arkusz będzie wyśrodkowany w pionie i poziomie wewnątrz swojej strony nadrzędnej. W poziomie będzie ograniczony szerokością elementu nadrzędnego, nawet gdy szerokość jego treści ją przekracza. Jeśli długość arkusza w pionie przekracza tę elementu nadrzędnego, to zostanie on wyświetlony od góry i będzie go można przewijać.
Arkusz globalny
Jeśli chcesz wyświetlić arkusz jako globalnych arkusz — taki który rozciąga się na całą szerokość aplikacji, niezależnie od tego do jakiej strony należy — to musimy zmienić właściwość element nadrzędny naszego arkusza nakładkowego na okno aplikacji. Możemy to zrobić przy użyciu właściwości parent
.
Kirigami.OverlaySheet {
id: mySheet
parent: applicationWindow().overlay
Controls.Label {
Layout.fillWidth: true
wrapMode: Text.WordWrap
text: "Weeeeee, overlay sheet!"
}
}

Nieglobalny arkusz nakładkowy

Globalny arkusz nakładkowy
Stały rozmiar
Arkusz jest chciwy i wykorzysta całą dostępną szerokość strony, gdy będzie tego potrzebować. Możemy tego uniknąć, określając implicitWidth
lub Layout.preferredWidth
dla jego rzeczy podrzędnych, co ograniczy ilość o jaką arkusz będzie mógł rozciągnąć się na szerokość.
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!!!!!"
}
}

Arkusz nakładkowy z nieustaloną szerokością

Arkusz nakładkowy z ustaloną szerokością
Nagłówki i stopki
Arkusze nakładkowe domyślnie zawierają nagłówek, który zawiera tylko przycisk do zamykania arkusza. Możemy dodać nagłówek Kirigami jako tytuł w naszym nagłówku, aby ułatwić użytkownikom zrozumienie przeznaczenia arkuszy. Robi się to poprzez ustawienie właściwości header
tak, aby zawierała składnik nagłówka Kirigami.
Kirigami.OverlaySheet {
id: mySheet
header: Kirigami.Heading {
text: "My Overlay Sheet"
}
Controls.Label {
Layout.fillWidth: true
wrapMode: Text.WordWrap
text: "Weeeeee, overlay sheet!"
}
}

Możemy także nadać naszemu arkuszowi nakładkowemu stopkę. Stopki w arkuszach nakładkowych są całkiem elastyczne, lecz najczęściej są używane do danie arkuszowi nakładki szybkiego pola wprowadzania podobnego w wyglądzie do okien modalnych (np. przyciski dla 'Zastosuj', 'Ok', 'Anuluj', 'Zamknij', itp.)
Stopki są ustawiane w ten sam sposób co nagłówki:
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!"
}
}

Używanie widoków delegatów / modeli
Podczas gdy arkusze nakładkowe zostały stworzone do wyświetlania pionowej treści, to mogą być szczególnie użyteczne, gdy użyte w połączeniu ze składnikami takimi jak ListViews. Podczas wyświetlania treści dłuższej niż same okno aplikacji, na arkuszu nakładki pojawiają się paski przewijania:
Kirigami.OverlaySheet {
id: mySheet
ListView {
model: 100
implicitWidth: Kirigami.Units.gridUnit * 30
delegate: Kirigami.BasicListItem {
label: "Item in sheet " + modelData
}
}
}
