Overlay-vellen

Een Kirigami.OverlaySheet is 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.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!"
        }
    }
}

Overlay-vellen komen met methoden die we kunnen kunnen gebruiken om te openen open() of sluiten 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 vanaf zijn bovenkant en zal te verschuiven zijn.

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

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

Koppen en voeten

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

Kirigami.OverlaySheet {
    id: mySheet

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

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

We kunnen ook ons overlay-vel voorzien van een footer . Voettekst 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!"
    }
}

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