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.
sudo apt install build-essential cmake extra-cmake-modules qtbase5-dev qtdeclarative5-dev qtquickcontrols2-5-dev kirigami2-dev libkf5i18n-dev gettext libkf5coreaddons-dev | |
sudo pacman -S base-devel extra-cmake-modules cmake qt5-base qt5-declarative qt5-quickcontrols2 kirigami2 ki18n kcoreaddons breeze | |
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 | |
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.
Tips
Du kan snabbt skapa filstrukturen med:
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
Alternativt kan standardmallen i Kirigami användas, som tillhandahålls av KDevelop, KDE:s huvudsakliga integrerade utvecklingsmiljö för kodning i C++ och QML. KAppTemplate är också tillgänglig om en snabb mall för att börja koda i din favoritmiljö eller texteditor är allt som behövs.
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
|
|
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.
Anmärkning
Att placera QtQuick-kontroller och Kirigami-import i separata namnrymder med nyckelordetas
är bästa praxis för att säkerställa att inga komponenter med samma namn kan orsaka konflikt. Du kan se olika namn för QtQuick Controls i verkligheten, såsom "QQC" eller "QQC2". Vi använder "Controls" i handledningen för tydlighetens skull.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.
Anmärkning
i18n()-funktioner gör programmet lättare att översätta, eftersom de returnerar en version av den tillhandahållna strängen på användarens språk (under förutsättning att vårt program har översatts till det språket). Även om en engelskspråkig användare ser vår fönstertitel som 'Hello World', skulle en spansk användare kunna se "Hola Mundo".
i18nc() bygger på funktionen i18n()
genom att tillåta utvecklare att ge visst sammanhang till översättarna som arbetar med programmet. Det är därför vi har inkluderat strängen "@title" innan "Hello World". Se Ki18n Programmer's guide för mer information.
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.
|
|
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.
|
|
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.txt
i 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.
|
|
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.
|
|
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.
Anmärkning
Observera att biblioteken ska motsvara komponenterna som vi inkluderade i vår tidigareCMakeLists.txt
fil, annars inkluderas inte komponenterna och vårt program går inte att kompilera.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.
Anmärkning
Nästa gång du vill skapa filerna och katalogerna som behövs, kan du använda KAppTemplate eller KDevelop för att automatiskt generera ett lämpligt projekt att starta med. De är tillgängliga från alla större distributioners arkiv. Programmen genererar också filer som innehåller AppStream metadata och en .desktop
-fil som innehåller information om hur programmet ska visas i en Linux programstart.
Tack vare magin i CMakeLists, kan du också använda integrerade utvecklingsmiljöer såsom KDevelop eller QtCreator för att utveckla programmet i en bekväm miljö med minimal ansträngning.