Zásuvky

Toto sú doplnky poskytované extra-cmake-modules na uľahčenie používania deklaratívnej registrácie Qt (náhrada za súbory zdrojov Qt).

Tieto knižnice by mali zodpovedať komponentom, ktoré sme zahrnuli v našom predchádzajúcom súbore CMakeLists.txt, inak tieto komponenty nebudú zahrnuté a naša aplikácia sa neskompiluje.

Zásuvky

Dokumentácia pre všetky tri príkazy sa nachádza v API extra-cmake-modules pre ECMQmlModule.

V tutoriáli o rozdelení kódu do samostatných súborov bol predstavený nový súbor CMake umožňujúci samostatné moduly QML:

Požiadavkou na to, aby CMake čítal tento súbor, je pridanie volania add_subdirectory() v src/CMakeLists.txt smerujúceho naň.

import QtQuick
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    width: 600
    height: 600
    pageStack.initialPage: Kirigami.Page { /* Page code here... */ }

    globalDrawer: Kirigami.GlobalDrawer {
        title: "Global Drawer"
        titleIcon: "applications-graphics"
        actions: [
            Kirigami.Action {
                text: "Kirigami Action 1"
                icon.name: "user-home-symbolic"
                onTriggered: showPassiveNotification("Action 1 clicked")
            },
            Kirigami.Action {
                text: "Kirigami Action 2"
                icon.name: "settings-configure-symbolic"
                onTriggered: showPassiveNotification("Action 2 clicked")
            },
            Kirigami.Action {
                text: i18n("Quit")
                icon.name: "application-exit-symbolic"
                shortcut: StandardKey.Quit
                onTriggered: Qt.quit()
            }
        ]
    }
}

Hlavička

Volanie add_library() generuje nový cieľ s názvom kirigami-hello-components. Tento cieľ bude mať vlastnú sadu zdrojových kódových súborov, súborov QML, prepojí vlastné knižnice atď., ale po skompilovaní musí byť prepojený so spustiteľným súborom vytvoreným v src/CMakeLists.txt. To sa robí pridaním názvu cieľa do zoznamu knižníc, ktoré budú prepojené so spustiteľným súborom v target_link_libraries().

Volanie ecm_add_qml_module() zmení knižnicu tak, aby mohla prijímať súbory QML ako predtým, ale tentoraz musíme použiť GENERATE_PLUGIN_SOURCE. Keď sa spustiteľný súbor používa ako podporný cieľ (ako pri kirigami-hello), nepotrebuje generovať kód pluginu, pretože je zabudovaný do spustiteľného súboru; pri samostatných moduloch QML ako kirigami-hello-components je kód pluginu nevyhnutný.

import QtQuick
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    width: 600
    height: 600
    pageStack.initialPage: Kirigami.Page { /* Page code here... */ }

    globalDrawer: Kirigami.GlobalDrawer {
        title: "Global Drawer with searchfield (not visible)"

        header: Kirigami.SearchField {
                id: searchField
        }

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

Prispôsobenie pre počítač

Ďalšia vec, ktorá je nevyhnutná pre samostatné moduly QML, je finalizácia cieľa. To hlavne znamená, že CMake generuje dva súbory, qmldir a qmltypes, ktoré popisujú moduly QML, ktoré máme, a exportujú ich symboly na použitie v knižnici. Sú dôležité pri inštalácii vašej aplikácie, aby spustený spustiteľný súbor dokázal nájsť, kde sú súbory QML pre každý modul, preto sú automaticky pridané k cieľu.

Potom môžete jednoducho nainštalovať cieľ ako predtým.

globalDrawer: Kirigami.GlobalDrawer {
    isMenu: true

    actions: [
        // Akcie Kirigami tu...
    ]
}

Zásuvky

Nabudúce, keď budete potrebovať pridať ďalšie súbory QML, nezabudnite ich zahrnúť do tohto súboru. Súbory C++, ktoré používajú kľúčové slovo QML_ELEMENT, ktoré uvidíme oveľa neskôr v tutoriáli, sa tu tiež dajú pridať pomocou target_sources(). Svoj kód môžete logicky oddeliť vytvorením ďalších modulov QML s rôznymi importmi podľa potreby.

Toto nastavenie bude užitočné pri vývoji väčšiny aplikácií Kirigami.

Na pracovnej ploche, keď má okno dostatok priestoru, kontextové akcie sa zobrazujú ako súčasť skupiny actions v hornom paneli nástrojov. Keď je priestor obmedzený, napríklad na mobilnom zariadení alebo v úzkom okne, kontextové akcie sú skryté za hamburgerovým menu na pravej strane. Toto je odlišné od ostatných akcií v skupine actions, konkrétne actions.main, actions.left a actions.right; tieto sa v priestorovo obmedzených oknách neskrývajú a namiesto toho sa zmenšia na svoje príslušné ikony.

 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

import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    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: [
            Kirigami.Action {
                icon.name: "media-record"
            },
            Kirigami.Action {
                icon.name: "arrow-left"
            },
            Kirigami.Action {
                icon.name: "arrow-right"
            },
            Kirigami.Action {
                text: "Contextual Action 1"
                icon.name: "media-playback-start"
            },
            Kirigami.Action {
                text: "Contextual Action 2"
                icon.name: "media-playback-stop"
            }
        ]
    }
}

Kirigami.Action pozostáva z klikateľnej akcie, ktorej vzhľad závisí od toho, kam je pridaná. Typicky ide o tlačidlo s ikonou a textom.

Modálne a inline zásuvky

Tieto môžeme použiť na poskytnutie našim aplikáciám ľahko dostupných akcií, ktoré sú nevyhnutné pre ich funkčnosť.

• Akcie Kirigami dedia z QtQuick.Controls.Action a možno im priradiť klávesové skratky.
• Rovnako ako akcie QtQuick Controls ich možno priradiť k položkám menu a tlačidlám panela nástrojov, ale aj k mnohým ďalším komponentom Kirigami.

Vlastnosť icon.name prijíma názvy celosystémových ikon podľa špecifikácie FreeDesktop. Tieto ikony a názvy ikon si môžete pozrieť pomocou aplikácie CuttleFish od KDE, ktorá je súčasťou plasma-sdk, alebo návštevou špecifikácie pomenovania ikon FreeDesktop.

Jednou z funkcií ponúkaných akciami Kirigami nad rámec akcií QtQuick je možnosť vnárať akcie.

• Ďalšou funkciou akcií Kirigami je poskytovanie rôznych nápovied položkám používajúcim akcie o tom, ako majú akciu zobrazovať. Tie sú primárne spracované vlastnosťami displayHint a displayComponent.
• Tieto vlastnosti budú položkou rešpektované, ak je to možné. Napríklad nasledujúca akcia bude zobrazená ako TextField s položkou, ktorá sa bude snažiť zostať viditeľná čo najdlhšie.
• Ako bolo spomenuté v úvodnom tutoriáli pre akcie, akcie Kirigami sú kontextové, čo znamená, že sa zobrazujú na rôznych miestach v závislosti od toho, kam ich umiestnite. Okrem toho majú tiež rôzne reprezentácie pre počítač a mobilné zariadenie.

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    title: "Drawers App"
    width: 400
    height: 600
    pageStack.initialPage: Kirigami.Page {
        title: "OverlayDrawer at the bottom"
        actions: [
            Kirigami.Action {
                text: "Open bottomDrawer"
                onTriggered: bottomDrawer.open()
            }
        ]
        Kirigami.OverlayDrawer {
            id: bottomDrawer
            edge: Qt.BottomEdge
            // Nastavte modal na false, aby bola táto zásuvka inline!
            modal: true

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