Predali

Predali (angl. drawer) zagotavljajo aplikacijam hiter dostop do kontrolnikov in strani vaše aplikacije.

Predali so plošče, ki zdrsnejo iz strani okna aplikacije. Napolnjene so lahko z interaktivnimi elementi, kot so Kirigami Actions, gumbi, besedilo in drugo.

Predali prihajajo v različnih vrstah, oblikah in formatih. Na tej strani bomo šli čez vsako vrsto in zagotovili pregled njihovih značilnosti.

Globalni predal

Globalni predal je standardna funkcija v KDE-jevih mobilnih aplikacijah in ga je včasih mogoče najti tudi v njihovih inkarnacijah na namizju. Vsebuje glavni meni aplikacije: vključene so vse funkcije, ki niso specifične za trenutno stran, vendar so še vedno pomembne za splošno krmarjenje ali interakcijo znotraj aplikacije.

Aktivirajte ga lahko tako, da tapnete v hamburger meniju ali s potegom z levega roba do sredine zaslona v načinu od leve na desno ali od desnega roba v načinu z desne v levo.

Komponente Kirigami.GlobalDrawer so tisto, kar uporabljamo za ustvarjanje takšnih predalov. Ti so določeni v predalu globalDrawer kar je lastnost okna ' Kirigami.ApplicationWindow , ki tvorijo osnove naše aplikacije Kirigami.

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()
            }
        ]
    }
    ...
}

Posnetek zaslona globalnega predala v namiznem načinu, ki je videti kot stranska vrstica

Glava

Glave headers se lahko uporabljajo za nameščanje lepljivih komponent na vrh vašega globalnega predala. Komponente glave ostanejo na mestu, tudi če vaš globalni predal vsebuje ugnezdena dejanja Kirigami, ki nadomeščajo trenutni sloj na globalnem predalu.

Vašo izbrano komponento glave lahko nastavite z lastnostjo 'header' globalnega predala.

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()
        }
    ]
}

Naš globalni predal zdaj prikazuje komponento vrstice za iskanje, ki smo jo nastavili kot glavo

Prilagajanje namizju

Medtem ko so globalni predali v slogu plošče lahko uporabni v mobilnih okoljih, so morda preveliki na namizju.

K sreči Kirigami globalni predali zagotavljajo lastnost isMenu . Ko je nastavljena na 'true', se naši globalni predali spremenijo v bolj tradicionalne menije samo na namizju.

Opomba

V tem načinu menija glave in pasice niso vidni.

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()
        }
    ]
}

Pasice

Pasice omogočajo prikaz naslova in ikone na vrhu globalnega predala (tudi nad glavo).

Privzeto so pasice vidne le v mobilnih okoljih. To lahko spremenite tako, da nastavite lastnost komponente globalnega predala bannerVisible na 'true'.

Naslovi, nastavljeni z lastnostjo ' title se lahko uporabljajo za polepšanje vašega globalnega predala in da manj razpršen videz. Še pomembneje je, da lahko vaše uporabnike opomni, da je to globalni predal in predal celotne aplikacije in ne le lokalni predal.

Obstaja tudi lastnost titleIcon , ki jo lahko združite z naslovom, da bo globalni predal še bolj estetsko prijeten. Ta ikona bo postavljena na levi strani naslova.

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()
        }
    ]
}

Globalni predal z naslovom in ikono v pasici

Opomba

Lastnost titleIcon pobere imena za sistemske ikone po specifikaciji FreeDesktop. Te ikone in imena ikon si lahko ogledate s KDE-jevo aplikacijo CuttleFish, ki pride z orodjem plasma-sdk, ali z obiskom specifikacije FreeDesktop's icon naming specification.

Kontekstni predali

Medtem ko globalni predal Kirigami.GlobalDrawer prikazuje globalne dejavnosti čez celotno vašo aplikacijo, naj bi bil kontekstni predal Kirigami.ContextDrawer uporabljen za prikaz dejavnosti, ki so relevantne samo v določenih kontekstih. To je ponavadi uporabljeno v ločenih straneh pages.

Kontekstni predal se bo pokazal, samo če je bil ustvarjena kakšna kontekstna dejavnost contextualActions kot del skupne strani dejavnosti Page.actions group . Prav tako se obnaša različno v odvisnosti od tega, ali se uporablja na mobilni platformi ali na namizju.

Na namizju, ko ima okno dovolj prostora, se kontekstna dejanja prikažejo kot del skupine actions v zgornji orodni vrstici. Kadar je prostor omejen, na primer na mobilni napravi ali v ozkem oknu, se kontekstna dejanja skrivajo za hamburger menijem na desni strani. To se razlikuje od drugih dejanj v skupini actions, in sicer actions.main, actions.left in actions.right; Te se ne skrivajo v prostoru omejenih oken in se namesto tega strnijo v njihove ikone.

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

Kontekstni predal s skritimi kontekstnimi dejanji

Kontekstni predal, ki prikazuje vsa kontekstnima dejanja

Na mobilnem telefonu je predal vedno sestavljen iz dejanj, skritih za hamburger menijem. Aktivirajte ga lahko tako, da tapnete v hamburger meni ali s potegom z desnega roba do sredine zaslona v načinu od leve proti desni ali z levega roba v načinu z desne na levo. Če ste na namizju in želite preizkusiti mobilni vmesnik, lahko aplikacijo zaženete spremenljivko okolja QT_QUICK_CONTROLS_MOBILE=1.

Isti primer zgoraj pognan v mobilnem načinu

Kontekstni predal odprt v mobilnem načinu

Modalni in znotrajvrstični predali

Kirigami ponuja dve dodatni vrsti predalov, modalne predale in znotrajvrstične predale. Vrsti sta si precej podobni: obe segata v celoto širine ali višine aplikacije in se lahko postavita na robove okna aplikacije. Vendar pa se različno odzivata na interakcijo uporabnikov.

Modalni predali potemnijo preostanek aplikacije in tako kot preklopni listi overlay sheets odpuščeni ob kliku na potemnjeno območje.
Znotrajvrstični predali omogočajo uporabniku, da še vedno interakcijo z ostalo aplikacijo, ne da bi bil odpuščen, in ne potemnijo drugih področij.

Ta dva predala sta si tako podobna, ker sta dejansko izvedena z isto komponento Kirigami: ' Kirigami.OverlayDrawer . Tu je nekaj pomembnih podedovanih lastnosti te komponente, ki jih je treba imeti v mislih:

Popup.modal nadzoruje, ali bo predal modalen ali znotrajvrstični, odvisno od boolove vrednosti
Drawer.edge nadzoruje, na katerem robu okna aplikacije se bo predal prikazal; možnosti za to lastnost so 'Qt.TopEdge', 'Qt.RightEdge', 'Qt.BottomEdge' in 'Qt.LeftEdge'
Popup.contentItem vsebuje komponento, ki bo tvorila vsebino predala

import QtQuick.Controls 2.15 as Controls

Kirigami.Page {

    Kirigami.OverlayDrawer {
        id: bottomDrawer
        edge: Qt.BottomEdge
        // Nastavite modal na false, da ta predal postane znotrajvrstični!
        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()
    }
}

Znotrajvrstični predal na spodnjem robu zaslona

Primer uporabe prekrivnih spodnjih predalov: NeoChat

NeoChat uporablja prekrivne spodnje predale, da uporabniku zagotovi več dejanj, ki jih lahko izvede na sporočilu, ki ga je že dolgo pritiskal. Tukaj je poenostavljen primer, kako je to videti:

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
           
           // Podatki o sporočilu
           ...
           
           // Dejanja sporočil
           Kirigami.BasicListItem {
               text: "Reply"
               onClicked: {
                   bottomDrawer.close();
               }
           }
           ...
       }
    }
}

Kartice

Čipi