Uvod v Kirigami Addons

Spoznajte komponente Kirigami Addons

Kirigami Addons je dodaten nabor vizualnih komponent, ki dobro delujejo na mobilnih in namiznih napravah ter so zajamčeno medplatformski. Pod pokrovom uporablja Kirigami za ustvarjanje njegovih komponent.

Tukaj boste nastavili svoj novi projekt Kirigami Addons in vam bomo predstavili nekaj uporabnih komponent.

Te komponente uporabljajo lokalizacijske zmogljivosti KDE, zato bomo morali nastaviti majhen projekt preden jih začnemo uporabljati, ki bo izkoristil KLocalizedContext .

Nastavitev vašega projekta

Začetna struktura projekta bo videti takole:

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

Začnemo z zelo standardnim CMakeLists.txt:

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

Standard resources.qrc:

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

Zanimiv del bo main.cpp:

#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();
}

Če ste prebrali našo vadnico za KXmlGui ali zadnjo vadnico o Kirigami na strani o Kirigami, se bo marsikaj od tega zdelo že znano.

Ustvarimo svojo aplikacijo in uporabimo KAboutData's privzeti konstruktor za dodajanje metapodatkov naše aplikacije, dodamo sebe kot avtorja in nato uporabimo setApplicationData() , da dokončamo postopek. Za kasneje tudi minastavimo ikono aplikacije, ki prihaja iz sistemske teme.

Nato uporabimo lambda v qmlRegisterSingletonType za neposredno pošiljanje metapodatkov naše aplikacijena stran QML in razkrivamo njene lastnosti.

Nato ustvarimo primerek našega mehanizma QML in nastavimo njegov kontekst za uporabo KDE-jevega KLocalizedContext , ki se uporablja za integracijo prevedenih nizov, pri čemer posreduje pravkar ustvarjeni stroj kot parameter.

Preprosto naložimo našo datoteko QML iz datoteke virov in zdaj moramo samo še poskrbeti za našo začetno datoteko QML.

FormCard in FormButtonDelegate

Ideja za našo aplikacijo je oblikovati lastno galerijo Kirigami Addons, ki prikazuje več komponent po eno na stran. Glavna stran bo vsebovala preprost seznam gumbov v ColumnLayout, pri čemer vsak odpre ločeno stran.

Na začetku naj bi naš contents/ui/main.qml izgledal takole:

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

Uporabljamo naš priročen pageStack, da nastavimo začetno stran na Kirigami.ScrollablePage .

Čeprav bi lahko uporabili FormLayout skupaj s komponentami QtQuick Controls doseči naš cilj, tukaj se boste predstavili FormCard.

Glavni namen kartice FormCard je, da služi kot vsebnik za druge komponente, medtem ko sledi barvi, ki se razlikuje od ozadja, na podoben način kot Kirigami.Card , vendar za nastavitve okna. V svoji aplikaciji lahko imate več kartic FormCard različne razdelke. Pričakuje se tudi, da bo vaš FormCard neposredni podrejeni element ColumnLayout.

Uvažanje org.kde.kirigamiaddons.formcard naredi vse komponente FormCard razpoložljive vaši datoteki QML.

Na glavni strani bomo imeli samo en razdelek, zato dodamo enega FormCard:

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

Odlična stvar pri FormCardu je, da namesto vas naredi samodejno postavitev. Z drugimi besedami, samo vrstni red njegovih komponent je dovolj, da navede njihov položaj znotraj FormCard, brez lastnosti priložene postavitve so potrebni in od vas se pričakujene uporabljajte sider ali pozicionerji.

V našo FormCard lahko preprosto dodamo nekaj gumbov:

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

To je to! Gumbi še niso uporabni, vendar smo pripravljeniigrajte se z stranmi O strani!

Nato ga zgradimo in izvajamo takole:

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

Če si želite ogledati druge načine za izdelavo vaše aplikacije (na primer v sistemu Windows), glejte stran Začetek uporabe Kirigami.

Previous
Stran o programu
Next
FormCard o programu