Prekrivne plasti listov

Preklopne plasti listov Kirigami.OverlaySheet 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.

Lahko jih odpustite 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.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!"
        }
    }
}

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

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

Ko je 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 pomičen z drsnikom.

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 lastnostjo parent.

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 podrejene elemente, kar bo omejilo, za koliko se bo lahko 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 listi privzeto prihajajo z glavo header](docs:kirigami2;templates::OverlaySheet::header), ki vsebuje samo gumb za zapiranje našega prekrivnega lista. Dodamo lahko Kirigami glavo Kirigami.Heading in naslov v naši glavi header , 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.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 footer . 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 delegatov / pogledi 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 seznami pogledov ListViews . 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
        }
    }
}