FormCard over pagina's

Kirigami-aanvullingen is een additionele set van visuele componenten die goed werken op een mobiel en bureaublad en gegarandeerd cross-platform zijn. Het gebruikt Kirigami onder de motorkap om zijn componenten aan te maken.

Sommige van die componenten bieden u om dankbetuigingen voor uw werk en het werk van anderen die hebben bijgedragen aan uw project, evenals het noemen van de frameworks die in uw toepassing worden gebruikt: AboutKDE en AboutPage.

Over KDE

Elke nieuwe knop die we hebben gemaakt in de vorige stap zou een nieuwe pagina openen. U kunt nieuwe pagina's toevoegen door ze als Componenten aan te maken en daarna pageStack.layers.push() voor elke knop te gebruiken om die pagina in onze main.qml te gebruiken:

 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 QtQuick 2.15
import QtQuick.Layouts 1.15

import org.kde.kirigami 2.20 as Kirigami
import org.kde.kirigamiaddons.formcard 1.0 as FormCard

import org.kde.about 1.0

Kirigami.ApplicationWindow {
    id: root
    width: 600
    height: 700

    Component {
        id: aboutkde
        FormCard.AboutKDE {}    // <==========
    }

    pageStack.initialPage: Kirigami.ScrollablePage {
        ColumnLayout {
            FormCard.FormCard {
                FormCard.FormButtonDelegate {
                    id: aboutKDEButton
                    icon.name: "kde"
                    text: i18n("About KDE Page")
                    onClicked: root.pageStack.layers.push(aboutkde)     // <==========
                }

                FormCard.FormButtonDelegate {
                    id: aboutPageButton
                    icon.name: "applications-utilities"
                    text: i18n("About Addons Example")
                }

                FormCard.FormButtonDelegate {
                    id: settingsButton
                    icon.name: "settings-configure"
                    text: i18n("Single Settings Page")
                }
            }
        }
    }
}

Dat is het helemaal! Al wat er gedaan moet worden is een exemplaar maken van FormCard.AboutKDE. U zou iets moeten zien als dit na klikken op de knop AboutKDE:

Pagina Info over

De AboutPage van de toepassing is iets complexer, maar het is nog steeds erg eenvoudig te gebruiken. We zullen een nieuwe QML-bestand toevoegen die de informatie zal bevatten nodig voor onze pagina over. Eerst in ons bestand resources.qrc:

<RCC version="1.0">
<qresource prefix="/">
    <file alias="main.qml">contents/ui/main.qml</file>
    <file alias="MyAboutPage.qml">contents/ui/MyAboutPage.qml</file>
</qresource>
</RCC>

En onze contents/ui/MyAboutPage.qml zou het volgende moeten bevatten:

import org.kde.kirigamiaddons.formcard 1.0 as FormCard
import org.kde.about 1.0

FormCard.AboutPage {
    aboutData: About
}

Hier gebruiken we de informatie die we hebben ingesteld met KAboutData in onze main.cpp. Hier is een beknopte herinnering aan wat in main.cpp is:

qmlRegisterSingletonType(
    "org.kde.about",        // <========== gebruikt in het importeren
    1, 0, "About",          // <========== C++ object geëxporteerd als een QML-type
    [](QQmlEngine *engine, QJSEngine *) -> QJSValue {
        return engine->toScriptValue(KAboutData::applicationData());
    }
);

Het object About dat we exporteerden naar de QML-kant met qmlRegisterSingletonType() bevat de gegevens uit KAboutData::applicationData() en dat is wat we doorgeven aan de eigenschap aboutData.

Tenslotte voegen we onze nieuwe MyAboutPage toe aan onze main.qml:

 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
45
46
47
48
49

import QtQuick 2.15
import QtQuick.Layouts 1.15

import org.kde.kirigami 2.20 as Kirigami
import org.kde.kirigamiaddons.formcard 1.0 as FormCard

import org.kde.about 1.0

Kirigami.ApplicationWindow {
    id: root
    width: 600
    height: 700

    Component {
        id: aboutkde
        FormCard.AboutKDE {}
    }

    Component {
        id: aboutpage
        MyAboutPage {}      // <==========
    }

    pageStack.initialPage: Kirigami.ScrollablePage {
        ColumnLayout {
            FormCard.FormCard {
                FormCard.FormButtonDelegate {
                    id: aboutKDEButton
                    icon.name: "kde"
                    text: i18n("About KDE Page")
                    onClicked: root.pageStack.layers.push(aboutkde)
                }

                FormCard.FormButtonDelegate {
                    id: aboutPageButton
                    icon.name: "applications-utilities"
                    text: i18n("About Addons Example")
                    onClicked: root.pageStack.layers.push(aboutpage)    // <==========
                }

                FormCard.FormButtonDelegate {
                    id: settingsButton
                    icon.name: "settings-configure"
                    text: i18n("Single Settings Page")
                }
            }
        }
    }
}

De pagina Info over van uw toepassing zou er als volgt uit moeten zien:

JSON gebruiken in plaats van KAboutData

Als u zich afvraagt waarom de pagina About apart is gehouden in plaats van ingebed in main.qml, dan is dat omdat het biedt het instellen van een aangepast model voor de eigenschap aboutData.

In plaats van dat uw pagina about informatie krijgt uit KAboutData , is het mogelijk om een JSON-object direct door te geven. U zult nog steeds QApplication::setWindowIcon() in uw main.cpp moeten gebruiken om in uw toepassing het pictogram te laten tonen.

Wijzig uw MyAboutPage.json in zoiets als dit:

import org.kde.kirigamiaddons.formcard 1.0 as FormCard
import org.kde.about 1.0

FormCard.AboutPage {
    title: i18n("About")
    aboutData: {
        "displayName" : "Addons Example",
        "productName" : "",
        "componentName" : "addonsexample",
        "shortDescription" : "This program shows how to use AboutKDE and AboutPage",
        "homepage" : "https://kde.org",
        "bugAddress" : "",
        "version" : "1.0",
        "otherText" : "Optional text shown in the About",
        "authors" : [
            {
                "name" : "John Doe",
                "task" : "Maintainer",
                "emailAddress" : "",
                "webAddress" : "",
                "ocsUsername" : ""
            }
        ],
        "credits" : [],
        "translators" : [],
        "licenses" : [
            {
                "name" : "GPL v3",
                "text" : "Long license text goes here",
                "spdx" : "GPL-3.0"
            }
        ],
        "copyrightStatement" : "© 2023",
        "desktopFileName" : ""
    }

}

Het hoofd JSON-object hier bevat de sleutels displayName, productName, homepage enzovoort. De sleutels authors, credits, translators en licenses kunnen elk doorgeven worden als een array van objecten. De doorgeven objecten aan authors, credits en translators delen dezelfde sleutels zodat ze getoond kunnen worden elk in hun eigen sectie, terwijl licenses de sleutels name, text en spdx voor elke toegevoegde licentie bevat, omdat het niet ongewoon is voor hetzelfde project om meerdere licenties te bevatten.

Deze sleutels zijn optioneel, maar een redelijke minimale hoeveelheid sleutels wordt verwacht om te zorgen dat uw toepassing geen lege velden heeft: displayName, version, description, homepage, copyrightStatement en authors. U wordt echter aangemoedigd om zoveel sleutels als mogelijk in te vullen.