Nastavitev in zagon

Pripravljamo se za ustvarjanje naše prve aplikacije Kirigami

Nameščanje Kirigami

Preden začnemo, bomo morali namestiti Kirigami na naš računalnik. To lahko storite na tri načine:

Namestitev Kirigamija iz skladišč v vaši distribuciji Linuxa

Potrebujemo prevajalnik C++, razvojne pakete Qt in Kirigami. Odprite terminalsko aplikacijo in zaženite nekaj od naslednjega, odvisno od tega, katero distribucijo Linuxa uporabljate:

KubuntuKDE Neon
sudo apt install build-essential cmake extra-cmake-modules qtbase5-dev qtdeclarative5-dev qtquickcontrols2-5-dev kirigami2-dev libkf5i18n-dev gettext libkf5coreaddons-dev qml-module-org-kde-qqc2desktopstyle
ManjaroArch
sudo pacman -S base-devel extra-cmake-modules cmake qt5-base qt5-declarative qt5-quickcontrols2 kirigami2 ki18n kcoreaddons breeze qqc2-desktop-style
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-desktop-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-desktop-style

Further information for other distributions can be found here.

Če želite zgraditi Kirigami s Qt6, to trenutno ni mogoče samo z distribucijskimi paketi v Linuxu. Namesto tega se boste morali zateči k kdesrc-build.

Gradnja Kirigami s kdesrc-build

KDE ima orodje po meri za enostavno izgradnjo vseh svojih knjižnic in programov: kdesrc-build. Uporablja se lahko za izdelavo Kirigamija na Linuxu in FreeBSD.

For this tutorial, you will need to follow the setup instructions for kdesrc-build but using a ~/kde5 directory instead, then copy the sample KF5 file to your home:

cp ~/kde5/src/kdesrc-build/kdesrc-buildrc-kf5-sample ~/.config/kdesrc-buildrc

Po tem lahko preprosto zaženete naslednje na terminalu:

kdesrc-build kirigami kcoreaddons ki18n breeze plasma-integration qqc2-desktop-style
source ~/kde5/build/kirigami/prefix.sh

In potem lahko svoje projekte Kirigami prevedete v isto terminalsko lupino, ki ste jo uporabili za izvor datoteke s predpono. Če zaprete terminal, lahko preprosto znova pridobite datoteko, da prevedete svojo aplikacijo.

Namestitev Kirigami s programom Craft

KDE ima orodje po meri za preprosto namestitev večine svojih knjižnic in programov: Craft. Uporablja se lahko za namestitev Kirigamija v Linux, FreeBSD, Windows , Android in [macOS](https://community.kde. org/Guidelines_and_HOWTOs/Build_from_source/Mac).

Slediti boste morali navodilom za namestitev za Craft. Do konca namestitve bi morali zagnati datoteko za nastavitev okolja (craftenv.ps1 ali craftenv.sh), ki vam bo dala terminalsko lupino, kjer boste prevajali svojo aplikacijo Kirigami.

Po tem lahko preprosto zaženete naslednje na terminalu:

craft kirigami kcoreaddons ki18n breeze kiconthemes qqc2-desktop-style

Če zaprete terminal, lahko preprosto znova zaženete namestitveno datoteko okolja, da prevedete svojo aplikacijo.

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.

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.

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.

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
28
29
30
31
#include <QApplication>
#include <QQmlApplicationEngine>
#include <QtQml>
#include <QUrl>
#include <QQuickStyle>
#include <KLocalizedContext>
#include <KLocalizedString>

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

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

    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
24
25
26
27
28
cmake_minimum_required(VERSION 3.16)
project(helloworld)

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

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

find_package(Qt${QT_MAJOR_VERSION} REQUIRED NO_MODULE COMPONENTS
    Core
    Quick
    Test
    Gui
    QuickControls2
    Widgets
)

find_package(KF${QT_MAJOR_VERSION} REQUIRED COMPONENTS
    Kirigami2
    I18n
    CoreAddons
)

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
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
add_executable(helloworld)

target_sources(helloworld PRIVATE
    main.cpp
    resources.qrc
)

target_link_libraries(helloworld
    Qt${QT_MAJOR_VERSION}::Quick
    Qt${QT_MAJOR_VERSION}::Qml
    Qt${QT_MAJOR_VERSION}::Gui
    Qt${QT_MAJOR_VERSION}::QuickControls2
    Qt${QT_MAJOR_VERSION}::Widgets
    KF${QT_MAJOR_VERSION}::I18n
)

install(TARGETS helloworld ${KDE_INSTALL_TARGETS_DEFAULT_ARGS})

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

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 zgraditi in zagnati našo aplikacijo. To bo odvisno od platforme, na kateri ste.

Če izvajate svoj projekt v Linuxu, boste morali določiti mesto, kjer bo program nameščen. Če želite to narediti, moramo spremeniti imenike v našo mapo helloworld/ v naši izbrani terminalski aplikaciji in zagnati naslednje ukaze:

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

Program bo nameščen v ~/kde5/usr/bin.

Če prevajate svoj projekt z Craft v sistemu Windows, boste morda morali določiti CMake Generator za prvi korak, odvisno od tega, ali uporabljate Visual Studio 2019 (msvc ) ali MinGW (make) za prevajanje vaših projektov.

Če Visual Studio:

cmake -B build/ -G "Visual Studio 16 2019"`
cmake --build build/
cmake --install build/

Če MinGW:

cmake -B build/ -G "MinGW Makefiles"
cmake --build build/
cmake --install build/

V obeh primerih bo program nameščen na C:\CraftRoot\bin.

Nato lahko zaženete program helloworld z:

helloworld # Na Linuxu
helloworld.exe # Na Windows

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

Posnetek zaslona ustvarjene aplikacije Kirigami