Introductie tot Kirigami add-ons

Wordt vertrouwd met Kirigami add-on-componenten

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.

Hier zult u uw nieuwe Kirigami add-on-project opzetten en geïntroduceerd worden tot een paar nuttige componenten.

Deze componenten maken gebruik van de lokalisatie faciliteiten, dus voordat we beginnen met deze te gebruiken, is het nodig een opzet voor een klein project te maken die gebruik maakt van KLocalizedContext .

Uw project opzetten

De initiële projectstructuur zal er zo uitzien:

addonsexample/
├── CMakeLists.txt
├── main.cpp
├── resources.qrc
└── contents/
    └── ui/
        └── main.qml

We beginnen door een erge standaard CMakeLists.txt te gebruiken:

cmake_minimum_required(VERSION 3.20)

project(FormCardTutorial)

find_package(ECM REQUIRED NO_MODULE)
set(CMAKE_MODULE_PATH ${ECM_MODULE_PATH})

include(KDEInstallDirs)
include(KDECompilerSettings)
include(KDECMakeSettings)

find_package(Qt${QT_MAJOR_VERSION} REQUIRED COMPONENTS
    Widgets        # For QApplication
    Quick          # For QML
    QuickControls2 # For QQuickStyle
)
find_package(KF${QT_MAJOR_VERSION} REQUIRED COMPONENTS
    CoreAddons # For KAboutData
    I18n       # For KLocalizedContext
)

add_executable(addonsexample)

target_sources(addonsexample PRIVATE main.cpp resources.qrc)

target_link_libraries(addonsexample PRIVATE
    Qt::Widgets
    Qt::Quick
    Qt::QuickControls2
    KF${QT_MAJOR_VERSION}::CoreAddons
    KF${QT_MAJOR_VERSION}::I18n
)

install(TARGETS addonsexample DESTINATION ${KDE_INSTALL_BINDIR})

Een standaard resources.qrc:

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

Het interessante deel zal de main.cpp zijn:

#include <QtQml>
#include <QApplication>
#include <QQmlApplicationEngine>
#include <QIcon>
#include <QQuickStyle>
#include <KAboutData>
#include <KLocalizedContext>
#include <KLocalizedString>

int main(int argCount, char* argVector[])
{
    QApplication app(argCount, argVector);
    KLocalizedString::setApplicationDomain("org.kde.addonsexample");

    KAboutData aboutData(
        QStringLiteral("addonsexample"),
        i18n("Addons Example"),
        QStringLiteral("1.0"),
        i18n("This program shows how to use Kirigami Addons"),
        KAboutLicense::GPL_V3,
        QStringLiteral("(C) 2023"),
        i18n("Optional text shown in the About"),
        QStringLiteral("https://kde.org"));

    aboutData.addAuthor(i18nc("@info:credit", "John Doe"),
                        i18nc("@info:credit", "Maintainer"));

    KAboutData::setApplicationData(aboutData);

    if (qEnvironmentVariableIsEmpty("QT_QUICK_CONTROLS_STYLE")) {
        QQuickStyle::setStyle(QStringLiteral("org.kde.desktop"));
    }
    QApplication::setWindowIcon(QIcon::fromTheme(QStringLiteral("kde")));

    qmlRegisterSingletonType(
        "org.kde.about",
        1, 0, "About",
        [](QQmlEngine *engine, QJSEngine *) -> QJSValue {
            return engine->toScriptValue(KAboutData::applicationData());
        }
    );

    QQmlApplicationEngine engine;
    engine.rootContext()->setContextObject(new KLocalizedContext(&engine));
    engine.load(QStringLiteral("qrc:/main.qml"));
    app.exec();
}

Als u onze KXmlGui-handleiding hebt gelezen of de laatste Kirigami handleiding over de Kirigami pagina Info over, zal veel hiervan bekend zijn voor u.

We maken onze toepassing en gebruiken de standaard constructor KAboutData's om de metagegevens van onze toepassing toe te voegen, voegen onszelf toe als een auteur en gebruiken daarna setApplicationData() om het proces te beëindigen. Voor later zetten we ook een toepassingspictogram die uit het systeemthema komt.

Daarna gebruiken we een in qmlRegisterSingletonType om direct de metagegevens van onze toepassing naar de QML-kant te verzenden, waarmee eigenschappen worden getoond.

We maken dan een exemplaar van onze QML-engine en zetten zijn context om KLocalizedContext van KDE te gebruiken, gebruikt om vertaalde tekenreeksen te integreren, en de zojuist gemaakte engine als een parameter door te geven.

We laden eenvoudig ons QML-bestand uit het hulpbronbestand en nu we hoeven alleen nog zorg te dragen voor ons initiële QML-bestand.

FormCard en FormButtonDelegate

Het idee voor onze app is het ontwerpen van onze eigen Kirigami add-ons galerij, die meerdere componenten etaleert, één per pagina. De hoofdpagina zal een eenvoudige lijst met knoppen bevatten in een ColumnLayout, elk een aparte pagina openend.

Initieel zou onze contents/ui/main.qml er uit moeten zien als deze:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

import QtQuick 2.15
import QtQuick.Layouts 1.15

import org.kde.kirigami 2.15 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

    pageStack.initialPage: Kirigami.ScrollablePage {
        ColumnLayout {
            // Our code will go here
        }
    }
}

We gebruiken onze handige pageStack om de initiële pagina in te stellen in een Kirigami.ScrollablePage .

Terwijl we een FormLayout zouden kunnen gebruiken samen met QtQuick Controls componenten om ons doel te bereiken, hier zult u geïntroduceerd worden tot FormCard.

Het hoofddoel van een FormCard is om te dienen als een container voor andere componenten terwijl een kleur verschillend van de achtergrond wordt gevolgd, op een manier gelijk aan een Kirigami.Card , maar voor instellingenvensters. U kunt meerdere FormCards in uw toepassing hebben om verschillende secties aan te geven. Van uw FormCard wordt verwacht dat het een direct kind is van een ColumnLayout.

Importeren van org.kde.kirigamiaddons.formcard maakt alle FormCard-componenten beschikbaar aan ons QML-bestand.

We zullen slechts een enkele sectie hebben in onze hoofdpagina, dus voegen we een enkele FormCard toe:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

import QtQuick 2.15
import QtQuick.Layouts 1.15

import org.kde.kirigami 2.15 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

    pageStack.initialPage: Kirigami.ScrollablePage {
        ColumnLayout {
            FormCard.FormCard {
                // Our buttons will go here
            }
        }
    }
}

Het geweldige van een FormCard is dat het automatische indeling voor u doet. Met andere woorden, alleen de volgorde van zijn componenten is genoeg om hun positie in de FormCard aan te geven, geen aangehangen indelingseigenschappen zijn nodig en van u wordt verwacht geen ankers of positionering te gebruiken.

We kunnen eenvoudig een paar knoppen in onze FormCard toevoegen:

 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

import QtQuick 2.15
import QtQuick.Layouts 1.15

import org.kde.kirigami 2.15 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

    pageStack.initialPage: Kirigami.ScrollablePage {
        ColumnLayout {
            FormCard.FormCard {
                FormCard.FormButtonDelegate {
                    id: aboutKDEButton
                    icon.name: "kde"
                    text: i18n("About KDE Page")
                }
                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! De knoppen zijn nog niet te gebruiken, maar we zijn nu zover om te spelen met onze pagina's Informatie over!

We bouwen en voeren het uit zoals:

cmake -B build/ -DCMAKE_INSTALL_PREFIX=~/kde5/usr
cmake --build build/
cmake --install build/
aboutexample

Om andere manieren te zien om uw toepassing te bouwen (bijvoorbeeld, op Windows), zie de pagina Beginnen met Kirigami.

Previous
Pagina Info over
Next
FormCard over pagina's