Överlagringsblad

En Kirigami.OverlaySheet är en enkelt komponent som du kan använda för att komplettera innehåll som visas på en programsida. De är konstruerade för att visa långt, vertikalt innehåll, och kan hantera innehåll som är längre än själva programfönstret.

De kan avfärdas genom att klicka eller röra utanför deras område, eller genom att klicka ikonen 'x' i bladens huvuden.

Lära sig om bladet

För att använda ett överlagringsblad, ska vi skapa det inne i Kirigami-sidan vi vill det ska visas på.

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

Överlagringsblad har metoder vi kan använda för att öppna, open() , eller stänga, close() , dem som vi tycker. Normalt är överlagringsblad dolda, så vi behöver åtminstone använda metoden open().

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

När det öppnas visas överlagringsblad som visas centrerat vertikalt och horisontellt inom dess överliggande sida. Horisontellt är det omgivet av dess överliggande sida även om bredden på dess innehåll överstiger det överliggande objektet. Om bladets vertikala längd överstiger det överliggande objektet, visas bladet från dess topposition, och är rullningsbart.

Globalt blad

Om du vill visa bladet som ett globalt blad, ett som täcker programmets hela bredd, oberoende av sidan det finns under, måste vi ändra överliggande objekt för vårt överlagringsblad till vårt programfönsters överlagringsegenskap. Vi kan göra det med egenskapen parent.

Kirigami.OverlaySheet {
    id: mySheet

    parent: applicationWindow().overlay

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

Fast storlek

Ett blad är girigt och använder maximalt tillgänglig bredd på en sida om det behövs. Vi kan undvika det genom att ange implicitWidth eller Layout.preferredWidth för dess underliggande element, som begränsar hur mycket bladet växer på bredden.

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

Sidhuvud och sidfot

Överlagringsblad har normalt ett sidhuvud som bara innehåller en knapp för att stänga vårt överlagringsblad. Vi kan lägga till en Kirigami.Heading som en titel i vårt sidhuvud för att göra det enkelt för användare att förstå vad bladet är till för. Det görs genom att använda egenskapen header för att innehålla vår Kirigami huvudkomponent.

Kirigami.OverlaySheet {
    id: mySheet

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

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

Vi kan också tillhandahålla en sidfot för vårt överlagringsblad. En sidfot i överlagringsblad är rätt flexibel, men oftast används de för att ge vårt överlagringsblad någon sorts snabb interaktiv inmatning som liknar den som modala dialogrutor tillhandahåller (t.ex. knappar för "Verkställ", "Ok", "Avbryt", "Stäng", etc.).

En sidfot ställs in på i stort sett samma sätt som ett sidhuvud:

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

Använda vyer med delegat/modell

Eftersom överlagringsblad är konstruerade för att visa vertikalt innehåll, kan de vara särskilt användbara när de används ihop med komponenter såsom listvyer . När innehåll längre än själva programfönstret, blir överlagringsbladet rullningsbart:

Kirigami.OverlaySheet {
    id: mySheet

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