Nastavitev in zagon

Pripravljamo se za ustvarjanje naše prve aplikacije Kirigami

Nameščanje potrebnih paketov

Preden začnemo, moramo namestiti nekaj zadev. Potrebujemo prevajalnik C++, razvojne pakete Qt in Kirigami.

Kubuntu KDE Neon	sudo apt install build-essential cmake extra-cmake-modules qtbase5-dev qtdeclarative5-dev qtquickcontrols2-5-dev kirigami2-dev libkf5i18n-dev gettext libkf5coreaddons-dev
Manjaro Arch	sudo pacman -S base-devel extra-cmake-modules cmake qt5-base qt5-declarative qt5-quickcontrols2 kirigami2 ki18n kcoreaddons breeze
OpenSUSE	sudo zypper install --type pattern devel_C_C++ sudo zypper install cmake extra-cmake-modules libQt5Core-devel libqt5-qtdeclarative-devel libQt5QuickControls2-devel kirigami2-devel ki18n-devel kcoreaddons-devel qqc2-breeze-style
Fedora	sudo dnf groupinstall "Development Tools" "Development Libraries" sudo dnf install cmake extra-cmake-modules qt5-qtbase-devel qt5-qtdeclarative-devel qt5-qtquickcontrols2-devel kf5-kirigami2-devel kf5-ki18n-devel kf5-kcoreaddons-devel qqc2-breeze-style

Dodatne informacije za druge distribucije najdete tukaj.

Struktura projekta

Medtem ko obstajajo orodja, s katerimi lahko enostavno nastavite naše datoteke, jih bomo ustvarili ročno. Tako bomo bolje razumeli dele, ki bodo iznašli našo novo aplikacijo.

Najprej ustvarimo našo mapo projekta. Našo bomo klicali 'helloworld'.

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

Znotraj te mape bomo ustvarili mapo 'src/' in 'CMakeLists.txt'. Na splošno velja za dobro prakso, da vse naše glavne datoteke s kodo postavimo v mapo 'src/'. Naša mapa 'src/' pa bo vsebovala mapo z vsebino z imenom 'contents/', ki sama vsebuje mapo z imenom 'ui/'. Tukaj bomo ustvarili naše QML datoteke.

Nasvet

Hitro lahko ustvarite to datotečno strukturo z:

mkdir -p helloworld/src/contents/ui
touch helloworld/CMakeLists.txt
touch helloworld/src/{CMakeLists.txt,main.cpp,resources.qrc}
touch helloworld/src/contents/ui/main.qml

Lahko pa uporabite standardno predlogo Kirigami, ki jo ponuja KDevelop, KDE-jevo glavno razvojno okolje za programiranje v C++ in QML. Predloga KAppTemplate je tudi na voljo, če potrebujete samo hitro predlogo za začetek programiranja v vašem priljubljenem razvojnem okolju ali urejevalniku besedil.

To je konvencija KDE, vendar vsi KDE projekti ne uporabljajo te strukture. Stvari lahko nastavite tudi drugače, vendar boste morali to upoštevati pri ustvarjanju datotek 'CMakeLists.txt' in 'resources.qrc'.

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
// Includes relevant modules used by the QML
import QtQuick 2.15
import QtQuick.Controls 2.15 as Controls
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.20 as Kirigami

// Provides basic features needed for all kirigami applications
Kirigami.ApplicationWindow {
    // Unique identifier to reference this object
    id: root

    // Window title
    // i18nc() makes a string translatable
    // and provides additional context for the translators
    title: i18nc("@title:window", "Hello World")

    // Set the first page that will be loaded when the app opens
    // This can also be set to an id of a Kirigami.Page
    pageStack.initialPage: Kirigami.Page {
        Controls.Label {
            // Center label horizontally and vertically within parent object
            anchors.centerIn: parent
            text: i18n("Hello World!")
        }
    }
}

Tukaj bomo delali na ospredju naše aplikacije.

Če malo poznate Javascript, potem se vam bo velik del QML zdel tudi znan (čeprav ima svoje posebnosti). Dokumentacija Qt ima na tem jeziku obsežno količino gradiva, če želite nekaj poskusiti sami. V teh vajah bomo osredotočeni veliko naše pozornosti na našo QML kodo, kjer lahko uporabite Kirigami, da bi dobili največ iz njega.

Za zdaj se osredotočimo na "main.qml". Najprej uvozimo import številne pomembne module:

QtQuick je standardna knjižnica, ki se uporablja v aplikacijah QML.
QtQuick Controls, ki zagotavlja številne standardne kontrole, s katerimi lahko naše aplikacije naredimo interaktivne.
QtQuick Layouts, ki ponuja orodja za postavitev komponent v okno aplikacij.
Kirigami , ki zagotavlja številne komponente primerne za ustvarjanje aplikacij, ki delujejo po napravah različnih oblik in velikosti.

Opomba

Če postavite kontrole QtQuick in uvoze Kirigamija v ločene imenske prostore z uporabo ključne besede `as je najboljša praksa, ki zagotavlja, da nobene komponente z istim imenom ne morejo biti v sporu. Morda boste videli različna imena za QtQuick Controls na terenu, kot sta "QQC" ali "QQC2". Zaradi jasnosti bomo v tej vaji uporabljali "Controls".

Nato pridemo do našega osnovnega elementa 'Kirigami.ApplicationWindow' , ki zagotavlja nekaj osnovnih funkcij, ki so potrebne za vse Kirigami aplikacije. To je okno, ki bo vsebovalo vsako od naših strani, glavne odseke našega uporabniškega vmesnika.

Nato določimo lastnost okna določilnik 'id' na 'root'. Določilniki so uporabni, ker nam dovolijo edinstveno sklicevanje na komponento, tudi če jih imamo več iste vrste.

Naslov okna kot lastnost 'title' smo nastavili na "Hello World". Opazili boste, da smo zavili naš niz "Hello World" v funkcijo imenovano 'i18nc()', kjer podrobno opišemo kontekst niza kot tudi sami niz.

Opomba

Funkcije i18n() naredijo vašo aplikacijo lažje prevedljivo, saj vrnejo različico zagotovljenega niza v jeziku uporabnika (če je bila aplikacija lokalizirana za ta jezik). Medtem ko bi angleški uporabnik lahko naš naslov okna videl kot "Hello World", bi španski uporabnik videl "Hola Mundo".

i18nc() gradi na funkciji i18n() tako da dovoljuje razvijalcem nudenje prevajalcem kontekst za delo na aplikaciji. Tukaj razčiščujemo, da je komponenta uporabniškega vmesnika naslov okna aplikacije, zato smo v niz vključili "@title:window" pred "Hello World". Oglejte si Ki18n Programmer's guide za več podrobnosti.

Nato nastavimo prvo stran na našem skladu strani. Večina aplikacij Kirigami je organizirana kot sklad strani, vsaka stran vsebuje povezane komponente, ki so prilagojene določeni nalogi. Za zdaj se držimo preprostega pravila in se držimo ene same strani. Sklad pageStack je v začetku prazen sklad strani, ki ga je v Kirigami.ApplicationWindow in z začetno stranjo pageStack.initialPage: Kirigami.Page {...} nastavimo prvo stran, predstavljeno ob nalaganju aplikacije na ' Kirigami.Page , ki bo vsebovala vso našo vsebino.

Na koncu na naši strani vključimo v Controls.Label , ki nam dovoli, da besedilo postavimo na našo stran. Uporabljamo 'anchors.centerIn: parent' za centriranje naše oznake vodoravno in navpično znotraj našega nadrejenega elementa. V tem primeru je nadrejena komponenta oznake stran Kirigami.Page . Zadnja stvar, ki jo moramo storiti je, da nastavimo besedilo: text: i18n("Hello World!").

main.cpp

main.cpp obravnava poslovno logiko naše aplikacije. C++ je priročen, ker je fleksibilen in hiter, čeprav je bolj vključen kot drugi programski jeziki.

main.cpp je tudi vstopna točka v našo aplikacijo. Dva dela našega projekta, zaledje in uporabniški vmesnik, sta nastavljena in zagnana tukaj.

 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
#include <QApplication>
#include <QQmlApplicationEngine>
#include <QtQml>
#include <QUrl>
#include <KLocalizedContext>
#include <KLocalizedString>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QApplication app(argc, argv);
    KLocalizedString::setApplicationDomain("helloworld");
    QCoreApplication::setOrganizationName(QStringLiteral("KDE"));
    QCoreApplication::setOrganizationDomain(QStringLiteral("kde.org"));
    QCoreApplication::setApplicationName(QStringLiteral("Hello World"));

    QQmlApplicationEngine engine;

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

    if (engine.rootObjects().isEmpty()) {
        return -1;
    }

    return app.exec();
}

Za zdaj nam ni treba vedeti preveč podrobnosti o kaj počne naša koda main.cpp , vendar bo njena vloga bistveno pomembnejša, ko se bomo odločili, da bomo v prihodnje naši uporabi dodali bolj zapleteno funkcionalnost. Če želite napredovati, si lahko preberete več o tem, kako ta main.cpp deluje [na tej strani]](/docs/kirigami/advanced-maincpp).

resources.qrc

Naša datoteka 'resources.qrc' je Qt Resource file. Vsebuje seznam vseh QML datotek in drugih datotek (kot so ikone po meri), ki bodo vključene v binarno.

1
2
3
4
5
<RCC>
    <qresource prefix="/">
        <file alias="main.qml">contents/ui/main.qml</file>
    </qresource>
</RCC>

Oglejte si vrstico <file alias="main.qml">contents/ui/main.qml</file>. Podrobno določa, katere datoteke QML bodo vključene v postopek kompilacije. V našem primeru uporabljamo samo 'main.qml', vendar če bi k naši kodi dodali še več QML datotek, bi se morali prepričati, da jo vključimo v datoteko 'resources.qrc' tako, da dodamo še eno vrstico, kot je ta.

Ta datoteka vira nam omogoča uporabljati pot "qrc:" + "/main.qml" v naši main.cpp, namesto potrebe po navedbi celotne poti "contents/ui/main.qml".

CMakeLists.txt

Datoteke 'CMakeLists.txt' so potrebne za uporabo KDE-jevega sistema gradnje po izbiri, CMake. Datoteka CMakeLists.txt v naši zgornji ravni mape bo določila nekatere značilnosti naše aplikacije. Vključuje tudi nekatere odvisnosti, ki jih moramo izpolnjevati za prevod našega projekta.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
cmake_minimum_required(VERSION 3.16)
project(helloworld)

set(KF_MIN_VERSION "5.68.0")
set(QT_MIN_VERSION "5.12.0")

find_package(ECM ${KF_MIN_VERSION} REQUIRED NO_MODULE)

set(CMAKE_MODULE_PATH ${ECM_MODULE_PATH})

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

find_package(Qt5 ${QT_MIN_VERSION} REQUIRED NO_MODULE COMPONENTS Core Quick Test Gui QuickControls2 Widgets)
find_package(KF5 ${KF_MIN_VERSION} REQUIRED COMPONENTS Kirigami2 I18n CoreAddons)

set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)

add_subdirectory(src)

feature_summary(WHAT ALL INCLUDE_QUIET_PACKAGES FATAL_ON_MISSING_REQUIRED_PACKAGES)

Datoteka CMakeLists.txt določa, kako zgraditi vaše projekte. Večina vsebine tukaj je samo za postopek postopnega razvoja vašega projekta. Preberite poglobljeno razlago, kaj datoteka CMakeLists počne tukaj.

Najpomembnejše je imeti na umu, da se odvisnosti Qt in Ogrodja KDE upravljajo z find_package(). Te vrstice boste morali spremeniti in vključiti vse dodatne komponente, za katere se boste odločili, da jih boste uporabili med razvojem aplikacije.

Končna vrstica, 'add_subdirectory(src)', kaže CMake v imenik 'helloworld/src/', kjer se nahaja naša izvorna koda. Postavimo helloworld/src/CMakeLists.txt` tja.

1
2
add_executable(helloworld main.cpp resources.qrc)
target_link_libraries(helloworld Qt5::Quick Qt5::Qml Qt5::Gui Qt5::QuickControls2 Qt5::Widgets KF5::Kirigami2 KF5::I18n)

Ta je veliko krajša! Poglejva si, kaj počne:

add_executable() ustvari izvedbeno datoteko iz danih izvornih datotek.
target_link_libraries() povezuje knjižnice, uporabljene v naši kodi z našo izvršitveno datoteko.

Opomba

Upoštevajte, da bi se te knjižnice morale ujemati s komponentami, ki smo jih vključili v našo prejšnjo datoteko CMakeLists.txt - v nasprotnem primeru te komponente ne bodo vključene in naša aplikacija ne bo prevedena.

Zdaj, ko je za CMake poskrbljeno, poglejmo datoteke, s katerimi bomo večino časa preživeli pri delu.

Prevajanje in zagon aplikacije

Skoraj smo na ciljni črti. Zadnja stvar, ki jo moramo narediti je, da zgradimo in prevedemo našo aplikacijo. Da bi to storili, moramo vnesti našo mapo 'helloworld/' v našo terminalno aplikacijo po izbiri in zagnati naslednje ukaze:

cmake -B build/
cmake --build build/

In poženemo jo z:

./build/bin/helloworld

Voilà! Zdaj boste videli, da se vaša prva Kirigami aplikacija pojavi pred vašimi očmi.

Posnetek zaslona ustvarjene aplikacije Kirigami

Opomba

Ko želite naslednjič ustvariti potrebne datoteke in mape, lahko uporabite KAppTemplate ali KDevelop](https://apps.kde.org/kdevelop/) za samodejno ustvarjanje primernega projekta za začetek. Na voljo so v skladiščih vsake večje distribucije. Te aplikacije bodo ustvarile tudi datoteke, ki vsebujejo metapodatke AppStream in datoteko '.desktop', ki vsebuje informacije o tem, kako naj se aplikacija prikaže v zaganjalniku linux aplikacij.

Zahvaljujoč čarovniji CMakeLists lahko uporabite tudi razvojna okolja, kot sta KDevelop ali QtCreator, da razvijete to aplikacijo v udobnem okolju z minimalnim naporom.

Razlaga strani