Prekrivne plasti listov

Preklopne plasti listov zagotavljajo preprosto komponento, ki jo lahko uporabite za dopolnitev vsebine, ki je prikazana na strani aplikacije. Zasnovani so tako, da prikazujejo dolgo, navpično vsebino in lahko vsebino prilagajajo dlje kot samo okno aplikacije.

Zavrnejo jih lahko tako, da kliknete ali tapnete zunaj njihovega območja ali s klikom na ikono 'x na glavah listov'.

Spoznavanje o listu

Če bi želi uporabiti prekrivni list, ga moramo ustvariti znotraj strani Kirigami, kjer želimo, da se pojavi.

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

Prekrivni listi so imajo z metode, ki jih lahko uporabimo za odpiranje ('mySheet.open()') ali zapiranje ('mySheet.close()') kot se nam zdi primerno. Privzeto so prekrivne liste skrite, zato bomo na koncu morali uporabiti metodo 'open()'.

Controls.Button {
    text: "Open mySheet"
    onClicked: mySheet.open()
}

Ko bo odprt, bo ta prekriti list prikazan navpično in vodoravno znotraj nadrejene strani. Vodoravno jo bo omejil njen nadrejeni, tudi če širina vsebine presega širino njenega starša. Če navpična dolžina lista presega nadrejenega, bo list prikazan iz zgornjega položaja in se bo lahko pomikal.

Globalni list

Če želite prikazati list kot globalni list – tisti, ki sega po celotni širini aplikacije, ne glede na stran, katere otrok je – moramo prekrivni list znova posvojiti na svojstvo prekrivnega okna programa. To lahko storimo z 'matično' lastnino.

Kirigami.OverlaySheet {
    id: mySheet

    parent: applicationWindow().overlay

    Controls.Label {
        Layout.fillWidth: true
        wrapMode: Text.WordWrap
        text: "Weeeeee, overlay sheet!"
    }
}

Fiksna velikost

List je pohlepen in bo po potrebi vzel največjo razpoložljivo širino na strani. Temu se lahko izognemo tako, da določimo 'implicitWidth' ali 'Layout.preferredWidth' za svoje otroške elemente, kar bo omejilo, za koliko se bo list razširil.

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

Glave in noge

Prekrivni liste privzeto prihajajo z glavo, ki vsebuje samo gumb za zapiranje našega prekrivnega lista. Dodamo lahko Kirigami glavo in naslov, da uporabnikom olajšamo razumevanje, kaj je namen lista. To se naredi tako, da se lastnost 'header' nastavi tako, da vsebuje našo komponento glave Kirigami.

Kirigami.OverlaySheet {
    id: mySheet

    header: Kirigami.Heading {
        text: "My Overlay Sheet"
    }

    Controls.Label {
        Layout.fillWidth: true
        wrapMode: Text.WordWrap
        text: "Weeeeee, overlay sheet!"
    }
}

Naš prekrivni list ima lahko nogo. Noge v prekrivnih listih so precej prilagodljive, najpogosteje se uporabljajo za zagotavljanje nekakšnih hitrih interaktivnih vnosov podobnih tistim, ki jih zagotavljajo modalna pogovorna okna (npr. gumbi za 'Uveljavi', 'OK', 'Prekliči', 'Zapri' itd.)

Noge so nastavljene na podoben način kot glave:

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

Uporaba pogledov pooblaščencev / modelov

Ker so prekrivni listi zasnovani tako, da prikazujejo navpično vsebino, so lahko še posebej uporabni, če se uporabljajo v povezavi s komponentami, kot so pogledi seznama. Pri prikazu vsebine daljše od okna aplikacije je mogoče po prekrivnem listu drseti:

Kirigami.OverlaySheet {
    id: mySheet

    ListView {
        model: 100
        implicitWidth: Kirigami.Units.gridUnit * 30
        delegate: Kirigami.BasicListItem {
            label: "Item in sheet " + modelData
        }
    }
}