FormCard om-sidor

Lär dig hur man skapar om-sidor för att ge information om programmet.

Kirigami Addons är en ytterligare uppsättning visuella komponenter som fungerar bra på mobiler och skrivbordsdatorer och är garanterade att fungera på flera plattformar. De använder Kirigami i bakgrunden för att skapa sina komponenter.

Visa av komponenterna gör att du kan ge information om ditt arbetet och andra bidragsgivare till projektet, samt nämna ramverken som används av programmet: AboutKDE och AboutPage.

Om KDE

Varje ny knapp som vi skapade i föregående steg ska öppna en ny sida. Du kan lägga till nya sidor genom att instansiera dem som Components och sedan använda pageStack.layers.push() för varje knapp för att ladda den sidan i vår 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
import QtQuick.Layouts

import org.kde.kirigami as Kirigami
import org.kde.kirigamiaddons.formcard 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")
                }
            }
        }
    }
}

Det är faktiskt det hela! Allt som krävs är att instansiera FormCard.AboutKDE. Du ska se något som liknar det här efter att ha klickat på knappen AboutKDE:

Om-sida

Programmets AboutPage är något mer komplex, men den är fortfarande väldigt enkel att använda. Vi lägger till en ny QML-fil som innehåller den information som behövs för vår Om-sida. Först i vår resources.qrc-fil:

<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>

Och vår contents/ui/MyAboutPage.qml ska ha följande:

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

FormCard.AboutPage {
    aboutData: About
}

Här använder vi informationen vi ställer in med KAboutData i vår main.cpp. Här är en kort påminnelse om vad som finns i main.cpp:

qmlRegisterSingletonType(
    "org.kde.about",        // <========== använt i import
    1, 0, "About",          // <========== C++ objekt exporterade som en QML-typ
    [](QQmlEngine *engine, QJSEngine *) -> QJSValue {
        return engine->toScriptValue(KAboutData::applicationData());
    }
);

Objektet About som vi exporterade till QML-sidan med qmlRegisterSingletonType() innehåller data från KAboutData::applicationData() , och det är vad vi skickar till egenskapen aboutData.

Till sist lägger vi till vår nya MyAboutPage i vår 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
import QtQuick.Layouts

import org.kde.kirigami as Kirigami
import org.kde.kirigamiaddons.formcard 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")
                }
            }
        }
    }
}

Om sidan i vårt program ska se ut så här:

Använda JSON istället för KAboutData

Om du undrade varför sidan Om hölls separat snarare än inbäddad i main.qml, så beror det på att den tillåter att ange en anpassad modell för egenskapen aboutData.

Istället för att låta Om-sidan hämta information från KAboutData , är det möjligt att skicka ett JSON-objekt direkt. Du behöver fortfarande använda QApplication::setWindowIcon() i main.cpp för att programikonen ska dyka upp.

Ändra MyAboutPage.json till något som liknar det här:

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

FormCard.AboutPage {
    title: i18nc("@action:button", "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" : ""
    }

}

JSON-huvudobjektet här innehåller nycklarna displayName, productName, homepage och så vidare. Nycklarna authors, credits, translators och licenses kan var och en skickas ett objektfält. Objekten som skickas till authors, credits and translators delar samma nycklar så att de kan visas var och en i sin egen sektion, medan licenses inkluderar nycklarna name, text och spdx för varje licens som läggs till, eftersom det inte är ovanligt att samma projekt inkluderar flera licenser.

Nycklarna är valfria, men en rimlig minsta antal nycklar förväntas göra att programmet inte har några tomma fält: displayName, version, description, homepage, copyrightStatement och authors. Du uppmanas dock att fylla i så många nycklar som möjligt.