Ställa in och komma igång

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.

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

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
    ├── main.cpp
    ├── resources.qrc
    └── contents/
        └── ui/
            └── main.qml

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/ katalog 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.

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

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

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 fönstrets egenskap id 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. pageStack är en sidstapel som initialt är tom som Kirigami.ApplicationWindow tillhandahåller, och med pageStack.initialPage: Kirigami.Page {...} ställer vi in den första sidan som presenteras när programmet laddas i en Kirigami.Page . Sidan står för allt vårt innehåll.

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

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

Vår resources.qrc är en Qt-resursfil. Den 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.

Resursfilen låter oss använda sökvägen "qrc:" + "/main.qml" i main.cpp, istället för att behöva ange hela sökvägen "contents/ui/main.qml".

CMakeLists.txt

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

 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 'helloworld/src/', där vår källkod finns. Låt oss fördjupa oss i filenhelloworld/src/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 kommandon:

cmake -B build/
cmake --build build/

Och starta det med:

./build/bin/helloworld

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