Pàgines FormCard «Quant al»

Aprendre a crear pàgines «Quant al» per a acreditar la vostra aplicació.

Els complements del Kirigami són un conjunt addicional de components visuals que funcionen bé en el mòbil i l'escriptori i es garanteix que són multiplataforma. Utilitzen el Kirigami per sota per a crear els seus components.

Alguns d'aquests components us permeten acreditar el vostre treball i el treball d'altres col·laboradors en el projecte, així com esmentar els marcs de treball que s'utilitzen a l'aplicació: AboutKDE i AboutPage.

Quant al KDE

Cada botó nou que hem creat en el pas anterior hauria d'obrir una pàgina nova. Podeu afegir pàgines noves instanciant-les com a Components i després utilitzant pageStack.layers.push() per a cada botó per a carregar aquesta pàgina en el 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

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

Això és realment! Tot el que cal és instanciar FormCard.AboutKDE. Hauríeu de veure una cosa així després de fer clic al botó AboutKDE:

Pàgina «Quant al»

L'AboutPage de l'aplicació és una mica més complexa, però encara és molt senzilla d'utilitzar. Afegirem un fitxer nou en QML que contindrà la informació necessària per a la nostra pàgina «Quant al». Primer al nostre fitxer 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>

I el contents/ui/MyAboutPage.qml hauria de tenir el següent:

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

FormCard.AboutPage {
    aboutData: About
}

Aquí utilitzem la informació que hem establert utilitzant KAboutData en el nostre main.cpp. Aquí hi ha un breu recordatori de què hi ha a main.cpp:

qmlRegisterSingletonType(
    "org.kde.about",        // <========== utilitzat en la importació
    1, 0, "About",          // <========== Objecte C++ exportat com a un tipus de QML
    [](QQmlEngine *engine, QJSEngine *) -> QJSValue {
        return engine->toScriptValue(KAboutData::applicationData());
    }
);

L'objecte About que exportem a la part del QML utilitzant qmlRegisterSingletonType() conté les dades de KAboutData::applicationData() , i això és el que passem a la propietat aboutData.

Finalment, afegim la MyAboutPage nova al 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")
                }
            }
        }
    }
}

La pàgina «Quant al» de la nostra aplicació s'hauria de veure així:

Ús del JSON en lloc del KAboutData

Si us pregunteu per què la pàgina «Quant al» es va mantenir separada en lloc d'incrustada a main.qml, això és perquè permet establir un model personalitzat per a la propietat aboutData.

En lloc de permetre que la pàgina «Quant al» rebi informació de KAboutData , és possible passar directament un objecte JSON. Encara haureu d'utilitzar QApplication::setWindowIcon() en el vostre main.cpp perquè es mostri la icona de l'aplicació.

Canvieu el MyAboutPage.json a alguna cosa així:

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

}

L'objecte JSON principal conté les claus displayName, productName, homepage i així successivament. Les claus authors, credits, translators i licenses se'ls hi poden passar una matriu d'objectes. Els objectes passats a authors, credits i translators comparteixen les mateixes claus perquè es puguin mostrar cadascuna en la seva pròpia secció, mentre que licenses inclou les claus name, text i spdx per a cada llicència afegida, ja que no és estrany que el mateix projecte inclogui diverses llicències.

Aquestes claus són opcionals, però s'espera que una quantitat mínima raonable de claus faci que la vostra aplicació no tingui camps buits: displayName, version, description, homepage, copyrightStatement i authors. No obstant això, se us anima a omplir tantes claus com sigui possible.

Previous
Introducció als complements del Kirigami
Next
Delegats de formularis a les pàgines de configuració