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!"
    }
}

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!!!!!"
    }
}

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
        }
    }
}