Сторінки «Про програму» FormCard

Дізнайтеся про те, як створювати сторінки «Про програму» для опису вашої програми.

Додатки Kirigami — це додатковий набір візуальних компонентів, які добре працюють на мобільних пристроях і комп'ютерах і гарантовано є багатоплатформовими. З лаштунками вони використовують Kirigami для створення своїх компонентів.

Деякі з цих компонентів надають змогу показати вашу роботу та роботу інших учасників у вашому проєкті, а також згадати бібліотеки, які використовуються у вашій програмі: Про KDE і AboutPage.

Про KDE

Кожна нова кнопка, яку ми створили на попередньому кроці, має відкривати нову сторінку. Ви можете додати нові сторінки, створивши їх як компоненти , а потім використавши pageStack.layers.push() для кожної кнопки, щоб завантажити цю сторінку до нашого 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")
                }
            }
        }
    }
}

Ось і справді! Усе, що потрібно, це створити екземпляр FormCard.AboutKDE. Ви маєте побачити щось подібне після натискання кнопки AboutKDE:

Сторінка «Про програму»

Сторінка AboutPage програми трохи складніша, але користуватися нею все одно дуже просто. Ми додамо новий файл QML, який міститиме інформацію, необхідну для нашої сторінки з інформацією. Спочатку в нашому файлі 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>

А наш contents/ui/MyAboutPage.qml має містити таке:

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

FormCard.AboutPage {
    aboutData: About
}

Тут ми використовуємо відомості, які встановлено за допомогою KAboutData у нашому main.cpp. Ось коротке нагадування того, що містить main.cpp:

qmlRegisterSingletonType(
    "org.kde.about",        // <========== використовують в імпортуванні
    1, 0, "About",          // <========== Об'єкт C++ експортовано як тип QML
    [](QQmlEngine *engine, QJSEngine *) -> QJSValue {
        return engine->toScriptValue(KAboutData::applicationData());
    }
);

Об'єкт About, який ми експортували на бік QML за допомогою qmlRegisterSingletonType() , містить дані з KAboutData::applicationData() , і це те, що ми передаємо до властивості aboutData.

Нарешті, ми додаємо нашу нову MyAboutPage до нашого 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")
                }
            }
        }
    }
}

Сторінка «Про програму» нашої програми має виглядати так:

Використання JSON замість KAboutData

Якщо вам цікаво, чому сторінку About зберігали окремо, а не вбудовано в main.qml, це тому, що вона дозволяє встановити спеціальну модель для властивості aboutData.

Замість того, щоб надавати вашій сторінці «Про програму» інформації з KAboutData , можна передати об'єкт JSON безпосередньо. Вам все одно потрібно буде використовувати QApplication::setWindowIcon() у вашому main.cpp, щоб було показано піктограму вашої програми.

Внесіть десь такі зміни до вашого MyAboutPage.json:

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

}

Головний об'єкт JSON містить ключі displayName, productName, homepage тощо. Кожному з ключів authors, credits, translators і licenses можна передати масив об'єктів. Об'єкти, передані до authors, credits і translators, мають однакові ключі, тому їх можна показувати у окремих розділах для кожного, тоді як licenses включає ключі name, text і spdx для кожної доданої ліцензії, оскільки часто той самий проєкт ліцензовано з використанням різних ліцензій.

Ці ключі є необов'язковими, але очікуваною є розумна мінімальна кількість ключів, щоб ваша програма не мала порожніх полів: displayName, version, description, homepage, copyrightStatement і authors. Проте вам рекомендується заповнити якомога більше ключів.

Previous
Вступ до додатків Kirigami
Next
Делегати форми на наших сторінках параметрів