Ställa in och komma igång

Bli redo att skapa vårt första program med Kirigami

Installera nödvändiga paket

Innan vi börjar, måste vi installera en del saker. Vi behöver en C++ kompilator, Qt utvecklingspaket, och Kirigami.

På Ubuntu, Debian och Neon kan vi installera dem med APT:

sudo apt install build-essential extra-cmake-modules cmake qtbase5-dev qtdeclarative5-dev libqt5svg5-dev qtquickcontrols2-5-dev qml-module-org-kde-kirigami2 kirigami2-dev libkf5i18n-dev gettext libkf5coreaddons-dev qml-module-qtquick-layouts

På Arch-baserade distributioner (som Manjaro) kan vi använda Pacman:

sudo pacman -Syu base-devel extra-cmake-modules cmake kirigami2 kde-sdk-meta gettext

Med Fedora, använder vi DNF:

sudo dnf groupinstall "Development Tools" "Development Libraries"
sudo dnf install extra-cmake-modules cmake qt5-qtbase-devel qt5-qtdeclarative-devel qt5-qtquickcontrols2-devel kf5-kirigami2 kf5-kirigami2-devel kf5-ki18n-devel kf5-kcoreaddons-devel gettext

Ytterligare information för andra distributioner finns här.

Projektstruktur

Även om det finns verktyg som enkelt kan skapa våra filer, kommer vi att skapa dem manuellt. Det låter oss förstå delarna som utgör vårt nya program bättre.

Först skapar vi vår projektkatalog. Vi kallar den 'helloworld'.

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

Under katalogen skapar vi katalogen src och CMakeLists.txt. Det anses i allmänhet vara god praxis att placera alla våra huvudsakliga källkodsfiler i katalogen src. Vår src innehåller i sin tur en katalog som heter contents, som innehåller en katalog som heter ui. Det är här vi skapar våra QML-filer.

Det är en KDE-konvention, men alla KDE-projekt använder inte den här strukturen. Det står dig fritt att göra saker och ting annorlunda, men du måste ta hänsyn till det när du skapar filerna CMakeLists.txt och 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

// Includes relevant modules used by the QML
import QtQuick 2.6
import QtQuick.Controls 2.0 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.13 as Kirigami

// Base element, provides basic features needed for all kirigami applications
Kirigami.ApplicationWindow {
    // ID provides unique identifier to reference this element
    id: root

    // Window title
    // i18nc is useful for adding context for translators, also lets strings be changed for different languages
    title: i18nc("@title:window", "Hello World")

    // Initial page to be loaded on app load
    pageStack.initialPage: Kirigami.Page {

        Controls.Label {
            // Center label horizontally and vertically within parent element
            anchors.centerIn: parent
            text: i18n("Hello World!")
        }
    }
}

Här är stället där vi hanterar vårt förgrundsprogram.

Om du kan lite Javascript ser mycket av QML bekant ut (även om det har sina egenheter). Qt:s dokumentation har en omfattande mängd material om språket om du känner för att prova något på egen hand. Genom alla de här handledningarna kommer vi att fokusera mycket av vår uppmärksamhet på vår QML-kod, där vi kan använda Kirigami för att få ut så mycket som möjligt av den.

Låt oss för tillfället fokusera på main.qml. Först importerar vi ett antal viktiga moduler:

  • QtQuick, standardbiblioteket som används i QML-program.
  • QtQuick Controls, som tillhandahåller ett antal standardkontroller som vi kan använda för att göra vårt program interaktivt.
  • QtQuick Layouts, som tillhandahåller verktyg för att placera komponenter inom programmets fönster.
  • Kirigami, som tillhandahåller ett antal komponenter lämpade för att skapa program som fungerar över apparater av olika form och storlek.

Sedan kommer vi till vårt baselement, Kirigami.ApplicationWindow som tillhandahåller några grundfunktioner nödvändiga för alla Kirigami-program. Det är fönstret som kommer att innehålla alla våra sidor, huvuddelen av vårt användargränssnitt.

Vi ställer sedan in egenskapen id i Kirigami.ApplicationWindow till 'root'. Identifierare är användbara eftersom de låter oss referera till en komponent unikt, även om vi har flera av samma typ.

Vi ställer också in fönstrets egenskap title till 'Hello World'. Du märker att vi har omgivit vår "Hello World" sträng med en funktion som heter i18nc, där vi beskriver strängens sammanhang förutom själva strängen.

Därefter anger vi första sidan i vår sidstapel. Del flesta Kirigami-program är organiserade som en stapel av sidor, där varje sida innehåller relaterade komponenter anpassade för en viss uppgift. För närvarande låter vi det vara enkelt, och håller oss till en enda sida. Vi anger den första sidan med pageStack.initialPage: Kirigami.Page{...}, som presenteras när programmet laddas och visar hela innehållet.

Slutligen inkluderar vi en Controls.Label på vår sida, som låter oss placera text på den. Vi använder anchors.centerIn: parent för att centrera vår beteckning horisontellt och vertikalt inom vårt överliggande element. I det här fallet är det överliggande elementet för Controls.Label vår Kirigami.Page. Det sista vi behöver göra är att ange texten: text: i18n("Hello World!").

main.cpp

main.cpp hanterar 'uppgiftslogiken' i vårt program. C++ är praktiskt eftersom det är flexibelt och snabbt, även om det är mer omfattande än andra programspråk.

main.cpp är också programmets startpunkt. De två delarna av vårt projekt, bakgrund och användargränssnittet, skapas och startas båda här.

 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[])
{
    QGuiApplication::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();
}

För tillfället behöver vi inte gå in på detaljerna rörande vad vår kod i main.cpp gör i så stor utsträckning, men dess roll växer signifikant när vi bestämmer oss för att lägga till mer komplicerad funktionalitet i vårt program i framtiden. Om du vill komma framåt, kan du läsa mer om hur main.cpp fungerar på den här sidan.

resources.qrc

resources.qrc innehåller en lista över alla QML-filer samt andra filer (som egna ikoner) som kommer att inkluderas i binärfilen.

1
2
3
4
5

<RCC>
    <qresource prefix="/">
        <file alias="main.qml">contents/ui/main.qml</file>
    </qresource>
</RCC>

Observera raden <file alias="main.qml">contents/ui/main.qml</file>. Den anger vilka QML-filer som ska inkluderas i kompileringsprocessen. I vårt fall används bara main.qml, men om vi skulle lägga till fler QML-filer i vår kod, skulle vi behöva säkerställa att de inkluderas i resources.qrc genom att lägga till ytterligare rader som den här.

Du kan läsa mer om hur Qt:s resurssystem fungerar specifikt i Qt:s dokumentation.

CMakeLists.txt

Filerna kallade CMakeLists.txt behövs för att använda KDE:s utvalda byggsystem, CMake. Filen CMakeLists.txt file i vår toppnivåkatalog specificerar vissa av programmets egenskaper. Den inkluderar också några av de beroenden vi behöver för att kompilera det.

 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)

CMakeLists.txt definierar hur dina projekt byggs. Det mesta av innehållet här är bara för att projektet ska komma igång. Du kan läsa en radvis, djupgående, förklaring av vad CMakeLists filen gör här.

Det viktigaste att komma ihåg är att beroenden på Qt och KDE Ramverk hanteras med find_package. Du måste ändra raderna och inkludera alla ytterligare komponenter som du bestämmer dig för att använda under utvecklingen av programmet.

Den sista raden, add_subdirectory(src), pekar CMake på katalogen 'src', där vår källkod finns. Låt oss ta en djupdykning i filen CMakeLists.txt där.

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)

Den är mycket kortare. Låt oss gå igenom vad den gör:

  • add_executable skapar ett körbart program från de angivna källkodsfiler.
  • target_link_libraries länkar biblioteken som används i vår kod till vårt körbara program.

Nu när vi har tagit hand om CMake, låt oss titta på filerna vi ska spendera den största delen av tiden att arbeta med.

Kompilera och köra programmet

Vi har nästa nått mållinjen. Det sista vi måste göra är att bygga och kompilera vårt program. För att göra det, behöver vi lägga till katalogen 'helloworld' i terminalprogrammet vi tycker bäst om och köra följande kommando:

cmake -B build/ . && cmake --build build/

Och starta det med:

./build/bin/<project_name>

Se där! Nu dyker ditt allra första Kirigami-program upp framför dina ögon.

Skärmbild av det genererade Kirigami-programmet

Next
Förklaring av sidor