Overlay-vellen

Overlay-vellen kunnen een verschillend aantal gebruiksdoelen dienen zowel voor leveren als invoeren van gegevens.

Overlay-vellen leveren een eenvoudige component die gebruikt kan worden om de getoonde inhoud van een pagina van de toepassing aan te vullen. Ze zijn ontworpen om lange, verticale inhoud te tonen en kunnen inhoud langer dan het toepassingsvenster zelf bevatten.

Ze kunnen afgewezen worden door te klikken of te tikken buiten hun gebied of door op het ‘x’-pictogram te klikken op koppen van vellen.

Iets te weten te komen over het vel

Om een overlay-vel te gebruiken, moeten we het aanmaken binnen de Kirigami pagina waarin we het willen laten verschijnen.

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!"
        }
    }
}
Eenvoudig overlay-vel

Overlay-vellen komen met methoden die we kunnen kunnen gebruiken om te openen (mySheet.open()) of sluiten (mySheet.close()) zoals we dat nodig hebben. Standaard zijn overlay-vellen verborgen, dus zullen we ten minste de methode open() nodig hebben.

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

Bij openen zal dit overlay-vel verticaal en horizontaal gecentreerd verschijnen in zijn ouderpagina. Horizontaal zal het begrenst zijn door zijn ouder zelfs als zijn breedte van de inhoud groter is dan zijn ouder. Als de verticale lengte van het vel groter is dan die van zijn ouder, zal het vel getoond worden van zijn bovenkant en zal zijn te verschuiven.

Globaal vel

Als u het vel als een globaal vel wilt tonen — een die spant over de gehele breedte van de toepassing, ongeacht of de pagina een kind is — moeten we ons overlay-vel opnieuw een ouder geven naar de overlay-eigenschap van ons toepassingsvenster. We kunnen dat doen met de eigenschap parent.

Kirigami.OverlaySheet {
    id: mySheet

    parent: applicationWindow().overlay

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

Niet-globaal overlay-vel

Globaal overlay-vel

Globaal overlay-vel

Gerepresenteerde grootte

Een vel is hebberig en zal, indien nodig, de maximale hoeveelheid van beschikbare breedte in een pagina nemen. We kunnen dit vermijden door een implicitWidth of een Layout.preferredWidth voor zijn kindelementen, die, hoeveel het vel zal groeien in de breedte, zal beperken.

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!!!!!"
    }
}
Overlay-vel met niet-vastgezette breedte

Overlay-vel met niet-vastgezette breedte

Overlay-vel met vaste breedte

Overlay-vel met vaste breedte

Koppen en voeten

Overlay-vellen komen standaard met een kop die alleen een knop voor sluiten van ons overlay-vel bevat. We kunnen een Kirigami kop als een titel in onze kop toevoegen om het gemakkelijk voor gebruikers te maken om te begrijpen waar het vel voor is. Dit wordt gedaan door de eigenschap header te zetten om onze Kirigami kopcomponent te bevatten.

Kirigami.OverlaySheet {
    id: mySheet

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

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

We kunnen ook ons overlay-vel voorzien van een voeten. Voeten in overlay-vellen zijn behoorlijk flexibel, maar meestal worden ze gebruikt om overlay-vellen te voorzien van een soort van snelle interactieve invoer gelijkend op wat geleverd wordt door modale dialogen (bijv. knoppen voor ‘Toepassen’, ‘Ok’, ‘Annuleren’, ‘Sluiten’, etc.)

Voeten worden ingesteld op vrijwel dezelfde manier als koppen:

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!"
    }
}
Voet van vel

Gedelegeerde / model weergave gebruiken

Omdat overlay-vellen ontworpen zijn om verticale inhoud te tonen, kunnen ze speciaal nuttig zijn bij gebruik samen met componenten zoals ListViews. Wanneer de inhoud langer is dan het toepassingsvenster zelf, wordt het overlay-vel schuifbaar:

Kirigami.OverlaySheet {
    id: mySheet

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