Lådor

Lådor tillhandahåller snabbåtkomst till kontroller och sidor i ditt program.

Lådor är paneler som glider ut från programfönstrets sidor. De kan befolkas med interaktiva element som Kirigami åtgärder, knappar, text, med mera.

Lådor har olika typer, skepnader och former. På den här sidan går vi igenom alla typer och ger en översikt över deras karaktärer.

Global låda

Den globala lådan är en standardfunktion i KDE:s mobilprogram och kan ibland också finnas i deras skrivbordsinkarnationer. Den innehåller programmets huvudmeny: här ingår alla funktioner som inte är specifika för den nuvarande sidan men ändå signifikanta för allmän navigering eller interaktion med programmet.

Den kan aktiveras genom att röra vid hamburgermenyn eller genom att svepa från vänster kant till mitten av skärmen i vänster till höger-läge eller från höger kant i höger till vänster-läge.

Kirigami.GlobalDrawer komponenter är vad vi använder för att skapa sådana lådor. De ställs in till egenskapen globalDrawer från Kirigami.ApplicationWindow som utgör basen för vårt Kirigami-program.

Kirigami.ApplicationWindow {

    globalDrawer: Kirigami.GlobalDrawer {
        actions: [
            Kirigami.Action {
                text: "Kirigami Action 1"
            },
            Kirigami.Action {
                text: "Kirigami Action 2"
            },
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "gtk-quit"
                shortcut: StandardKey.Quit
                onTriggered: Qt.quit()
            }
        ]
    }
    ...
}

Skärmbild av en global låda i skrivbordsläge som ser ut som en sidorad

Sidhuvud

Sidhuvud kan användas för att placera orörliga komponenter längst upp i din globala låda. Sidhuvudkomponenter förblir på plats även om din globala låda innehåller nästlade Kirigami-åtgärder som ersätter det nuvarande lagret i den globala lådan.

Din valda sidhuvudkomponent kan anges med den globala lådans egenskap header.

globalDrawer: Kirigami.GlobalDrawer {

    header: Kirigami.AbstractApplicationHeader {

        contentItem: Kirigami.SearchField {
            id: searchField
            Layout.fillWidth: true
        }
    }

    actions: [
        Kirigami.Action {
            text: "Kirigami Action 1"
        },
        Kirigami.Action {
            text: "Kirigami Action 2"
        },
        Kirigami.Action {
            text: i18n("Quit")
            icon.name: "application-exit"
            shortcut: StandardKey.Quit
            onTriggered: Qt.quit()
        }
    ]
}

Vår globala låda visar nu sökradskomponenten som vi angav som sidhuvudet

Anpassa till skrivbordet

Medan globala lådor med panelstil kan vara användbara i mobilomgivningar, kan de vara för stora för skrivbordsdatorer.

Som tur är tillhandahåller Kirigami globala lådor egenskapen isMenu . När den är inställd till true, förvandlas vår globala låda till mer traditionella menyer på skrivbordsdatorer.

Anmärkning

I menyläget är inte sidhuvuden och baner synliga.

globalDrawer: Kirigami.GlobalDrawer {
    isMenu: true

    actions: [
        Kirigami.Action {
            text: "Kirigami Action 1"
        },
        Kirigami.Action {
            text: "Kirigami Action 2"
        },
        Kirigami.Action {
            text: i18n("Quit")
            icon.name: "application-exit"
            shortcut: StandardKey.Quit
            onTriggered: Qt.quit()
        }
    ]
}

Baner

Baner låter dig visa en titel och en ikon längst upp i din globala låda (till och med ovanför sidhuvudet).

Baner är normalt bara synliga i mobilomgivningar. Du kan ändra det genom att ställa in komponentens egenskap bannerVisible till true i den globala lådan.

Titlar, som ställs in med egenskapen title , kan användas för att snygga till den globala lådan och få den att se mindre gles ut. Av större vikt är att den kan påminna användaren att det här är en global och programomfattande låda istället för en lokal låda.

Egenskapen titleIcon finns också, som kan paras ihop med titeln för att göra den globala lådan ännu mer estetiskt tilltalande. Ikonen placeras till vänster om titeln.

globalDrawer: Kirigami.GlobalDrawer {
    title: "My Global Drawer"
    titleIcon: "kde"
    bannerVisible: true
    actions: [
        Kirigami.Action {
            text: "Kirigami Action 1"
        },
        Kirigami.Action {
            text: "Kirigami Action 2"
        },
        Kirigami.Action {
            text: i18n("Quit")
            icon.name: "application-exit"
            shortcut: StandardKey.Quit
            onTriggered: Qt.quit()
        }
    ]
}

Anmärkning

Egenskapen titleIcon använder namn på systemomfattande ikoner enligt FreeDesktop-specifikationen. Ikonerna och ikonnamnen kan visas med KDE:s program CuttleFish som levereras med plasma-sdk, eller genom att besöka FreeDesktops specifikation för namngivning av ikoner.

Sammanhangslådor

Medan en Kirigami.GlobalDrawer visar globala åtgärder tillgängliga överallt i programmet, ska en Kirigami.ContextDrawer användas för att visa åtgärder som bara är relevanta i vissa sammanhang. Det används oftast på separata sidor.

En sammanhangslåda dyker bara upp om några contextualActions har skapats som en del av Page.actions group . Den beter sig också annorlunda beroende på om den används på en mobilplattform eller en skrivbordsdator.

På en skrivbordsdator, när ett fönster har tillräckligt med utrymme, visas sammanhangsberoende åtgärder som en del av gruppen actions på det övre verktygsraden. När utrymmet är begränsat, till exempel på en mobil eller i ett smalt fönster, döljs sammanhangsberoende åtgärder bakom en hamburgermeny på höger sida. Det skiljer sig från andra åtgärder i gruppen actions, nämligen actions.main, actions.left och actions.right; de göms inte i fönster med begränsat utrymme, utan dras istället ihop till sina respektive ikoner.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import org.kde.kirigami 2.20 as Kirigami

Kirigami.ApplicationWindow {
    height: 600
    width: 1200
    minimumWidth: 500

    globalDrawer: Kirigami.GlobalDrawer {}
    contextDrawer: Kirigami.ContextDrawer {}

    pageStack.initialPage: [ emptyPage, contextDrawerPage ]

    Kirigami.Page {
        title: "Empty page"
        id: emptyPage
    }

    Kirigami.Page {
        id: contextDrawerPage
        title: "Context Drawer page"

        actions {
            main: Kirigami.Action {
                icon.name: "media-record"
            }
            left: Kirigami.Action {
                icon.name: "arrow-left"
            }
            right: Kirigami.Action {
                icon.name: "arrow-right"
            }
            contextualActions: [
                Kirigami.Action {
                    text: "Contextual Action 1"
                    icon.name: "media-playback-start"
                },
                Kirigami.Action {
                    text: "Contextual Action 2"
                    icon.name: "media-playback-stop"
                }
            ]
        }
    }
}

Sammanhangslåda med sammanhangsberoende åtgärder dolda

Sammanhangslåda som visar alla sammanhangsberoende åtgärder

På en mobil består lådan alltid av åtgärder gömda bakom en hamburgermeny. Den kan aktiveras genom att trycka på hamburgermenyn eller genom att svepa från höger kant till mitten av skärmen i vänster till höger-läge eller från vänster kant i höger till vänster-läge. Om du är på en skrivbordsdator och vill prova mobilgränssnittet kan du köra programmet med miljövariabeln QT_QUICK_CONTROLS_MOBILE=1.

Modala lådor och lådor på plats

Kirigami erbjuder två ytterligare sorters lådor, modala lådor och lådor på plats. De är mycket lika varandra: båda fyller hela programmets bredd eller höjd och kan placeras vid programfönstrets kanter. Dock reagerar de olika på användarinteraktion.

Modala lådor gör resten av programmet mörkare och, liksom överlagringsblad , avfärdas vid klick på ett mörkare område.
Lådor på plats låter användaren fortsätta interagera med resten av programmet utan att de avfärdas, och gör inte andra områden mörkare.

De två lådorna är så lika eftersom de i själva verket kan implementeras med samma komponent i Kirigami: Kirigami.OverlayDrawer . Här är några viktiga egenskaper i komponenten att hålla i minnet:

Popup.modal styr om lådan är modal eller på plats beroende på ett Booleskt värde
Drawer.edge bestämmer vilken kant av programfönstret som lådan dyker upp. Alternativ för egenskapen är Qt.TopEdge, Qt.RightEdge, Qt.BottomEdge och Qt.LeftEdge
Popup.contentItem innehåller komponenterna som utgör lådans innehåll

import QtQuick.Controls 2.15 as Controls

Kirigami.Page {

    Kirigami.OverlayDrawer {
        id: bottomDrawer
        edge: Qt.BottomEdge
        // Ställ in modal till false för att göra lådan på plats.
        modal: true

        contentItem: RowLayout {
            Layout.fillWidth: true

            Controls.Label {
                Layout.fillWidth: true
                text: "Say hello to my little drawer!"
            }
            Controls.Button {
                text: "Close"
                onClicked: bottomDrawer.close()
            }
        }
    }

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

Ett användarfall för överlagrade nedre lådor: NeoChat

NeoChat använder överlagrade nedre lådor för att ge användaren ett antal åtgärder de kan utföra med ett meddelande de har tryckt på länge. Här är ett förenklat exempel på hur det ser ut:

Kirigami.Page {

    ListView {
        model: App.MessageModel
        delegate: MessageDelegate {
            onPressAndHold: bottomDrawer.open()
        }
    }

   Kirigami.OverlayDrawer {
       id: bottomDrawer
       height: popupContent.implicitHeight
       edge: Qt.BottomEdge
       padding: 0
       leftPadding: 0
       rightPadding: 0
       bottomPadding: 0
       topPadding: 0

       parent: applicationWindow().overlay

       ColumnLayout {
           id: popupContent
           width: parent.width
           spacing: 0
           
           // Meddelandeinformation
           ...
           
           // Meddelandeåtgärder
           Kirigami.BasicListItem {
               text: "Reply"
               onClicked: {
                   bottomDrawer.close();
               }
           }
           ...
       }
    }
}

Kort

Överlagringsblad