Налаштовування і перші кроки
Встановлення Kirigami
Перш ніж почати, нам потрібно встановити Kirigami у нашій машині. Існує три способи зробити це:
- [Встановлення Kirigami зі сховищ пакунків у вашому дистрибутиві Linux](< ref "#linux" >}})
- Збирання Kirigami за допомогою kdesrc-build
- Встановлення Kirigami за допомогою Craft
Встановлення Kirigami зі сховищ пакунків у вашому дистрибутиві Linux
Нам знадобиться компілятор C++, пакунки для розробки Qt та Kirigami. Відкрийте програму-термінал і віддайте одну з вказаних нижче команд, залежно від дистрибутива Linux, яким ви користуєтеся:
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 |
Подальші відомості для інших дистрибутивів наведено тут.
Якщо ви хочете зібрати Kirigami з Qt6, у поточній версії це не можна зробити з використанням лише пакунків дистрибутива у Linux. Вам доведеться скористатися kdesrc-build.
Збирання Kirigami за допомогою kdesrc-build
У KDE передбачено нетиповий інструмент для спрощення збирання усіх бібліотек і програм: kdesrc-build. Ним можна скористатися для збирання Kirigami у Linux і FreeBSD.
Для цього підручника вам слід виконати настанови з налаштовування kdesrc-build, але з використанням каталогу ~/kde5
, потім скопіювати зразок файла KF5 до вашого домашнього каталогу:
cp ~/kde5/src/kdesrc-build/kdesrc-buildrc-kf5-sample ~/.config/kdesrc-buildrc
Після цього ви можете просто віддати таку команду у терміналі:
kdesrc-build kirigami kcoreaddons ki18n breeze plasma-integration qqc2-desktop-style
source ~/kde5/build/kirigami/prefix.sh
А потім ви зможете збирати ваші проєкти Kirigami у тій самій оболонці термінала, якою ви скористалися для отримання файла префікса. Якщо ви закриєте термінал, ви можете просто ще раз отримати цей файл, щоб зібрати вашу програму.
Встановлення Kirigami за допомогою Craft
У KDE передбачено нетиповий інструмент для полегшення встановлення більшості бібліотек і програм: Craft. Ним можна скористатися для встановлення Kirigami у Linux, FreeBSD, Windows, Android та macOS.
Вам слід виконати настанови зі встановлення для Craft. Наприкінці налаштовування вам слід запустити файл налаштовування середовища (craftenv.ps1
або craftenv.sh
), який надасть у ваше розпорядження оболонку термінала, у якій ви збиратимете вашу програму Kirigami.
Після цього ви можете просто віддати таку команду у терміналі:
craft kirigami kcoreaddons ki18n breeze kiconthemes qqc2-desktop-style
Теми у Windows
Натисніть тут, щоб дізнатися більше
При збирання програми після встановлення залежностей за допомогою Craft просте встановлення KIconThemes і Breeze забезпечує для програми можливість використання піктограм Breeze на платформах, подібних до Windows, окреме компонування не потрібне. З іншого боку, qqc2-desktop-style відповідає за приємний вигляд стилю, який ми примусово встановлюємо на відповідних платформах.
Якщо ви закриєте термінал, ви можете просто ще раз запустити файл налаштовування середовища, щоб зібрати вашу програму.
Структура проєкту
Хоча існують інструменти, за допомогою яких можна просто налаштувати наші файли, ми створимо їх вручну. Це надасть нам змогу краще зрозуміти частини, з яких буде створено нашу нову програму.
Спочатку ми створимо теку нашого проєкту. Назвемо цю теку «helloworld».
helloworld/
├── CMakeLists.txt
└── src/
├── CMakeLists.txt
├── main.cpp
├── resources.qrc
└── contents/
└── ui/
└── main.qml
У цій теці ми створимо теку src/
і файл CMakeLists.txt
. Зазвичай, вважається за правило розташовувати усі файли основного коду у теці src/
. У нашій теці src/
міститиметься тека contents
, яка міститиме теку із назвою ui
. Там ми створимо наші файли QML.
Підказка
Ви можете швидко створити цю файлову систему ось так:
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
Крім того, можливо, вам варто скористатися стандартним шаблоном Kirigami, який надає KDevelop, основне комплексне середовище розробки KDE для програмування мовами C++ і QML. Також можна скористатися KAppTemplate, якщо вам потрібне лише швидке отримання початкового шаблона для програмування у вашому комплексному середовищі розробки або текстовому редакторі.
Це загальні угоди KDE, але ця структура використовується не в усіх проєктах KDE. Ви можете скомпонувати ваші частини програми інакше, але це слід взяти до уваги при створенні ваших файлів CMakeLists.txt
і resources.qrc
.
main.qml
|
|
Тут ми працюватимемо із оболонкою нашої програми.
Якщо ви трохи знаєте Javascript, більша частина QML видасться вам знайомою (хоча тут є свої особливості). У документації до Qt є багато матеріалу щодо цієї мови, якщо вам захочеться спробувати щось самостійно. Вивчаючи курс підручника, ми зосередимося на нашому коді QML, де ми використовуватимемо Kirigami, щоб отримати максимальні переваги від цього.
Тепер зосередимо увагу на main.qml
. Спочатку ми імпортуємо декілька важливих модулів:
- QtQuick, стандартну бібліотеку, яку використовують програми QML.
- QtQuick Controls, які забезпечують роботу декількох стандартних засобів керування, якими ми можемо скористатися для того, щоб зробити наші програми інтерактивними.
- QtQuick Layouts, які містять інструменти для розташовування компонентів у вікні програм.
- Kirigami , яка містить декілька компонентів, які пристосовано для створення програм, що можуть працювати на різних пристроях і екранах з різними формами та розмірами.
Нотатка
Розташування імпортування елементів керування QtQuick і Kirigami в окремих просторах назв за допомогою ключового словаas
є найкращим способом, який забезпечує усування можливих конфліктів між компонентами з однаковими назвами. У різних програмах ви можете бачити різні назви для елементів керування QtQuick, зокрема «QQC» або «QQC2». У цьому підручнику ми використовуватимемо термін «Controls».Далі, ми перейдемо до нашого базового елемента, Kirigami.ApplicationWindow , який надає певні базові можливості, потрібні для усіх програм Kirigami. Це вікно, які міститиме усі наші сторінки, основні розділи нашого інтерфейсу користувача.
Далі, ми встановимо для властивості id
вікна значення 'root'. Ідентифікатори є корисними, оскільки за їх допомогою ми отримуємо унікальну прив'язку до компонента, навіть коли у нас є декілька компонентів одного типу.
Ми також встановимо для властивості вікна title
значення «Hello World». Ми зауважимо, що рядок «Hello World» огорнуто у функцію із назвою i18nc()
. У цій функції ми деталізуємо контекст рядка, а також вказуємо сам рядок.
Нотатка
Функції i18n() роблять вашу програму придатною до перекладу, оскільки вони повертають версію переданого їм рядка мовою користувача (якщо вашу програму перекладено відповідною мовою). Користувач із англійською мовою інтерфейсу бачитиме заголовок вікна «Hello World», а користувач із іспанською мовою інтерфейсу — «Hola Mundo».
i18nc()
побудовано на основі функції i18n()
. Ця функція уможливлює для розробників надання перекладачам, які працюватимуть над перекладом програми, певного контексту. Тут ми прояснюємо, що компонент інтерфейсу користувача є заголовком вікна програми, тому ми включили рядок «@title:window» перед «Hello World». Див. підручник програміста щодо ki18n, щоб дізнатися більше.
Далі, ми визначаємо першу сторінку нашого стосу сторінок. Більшість програм Kirigami упорядковано як стос сторінок — кожну сторінку призначено для виконання окремого завдання. У нашому прикладі ми створимо простий стос, який складатиметься із однієї сторінки.
pageStack
є початково порожнім стосом сторінок, роботу якого забезпечує
Kirigami.ApplicationWindow
, і за допомогою pageStack.initialPage: Kirigami.Page{...}
ми задаємо для першої сторінки, яку буде показано після завантаження програми, значення
Kirigami.Page
. Відповідна сторінка міститиме усі наші дані.
Нарешті, ми включаємо до нашої сторінки
Controls.Label
, яка надасть нам змогу розмістити на нашій сторінці текст. Ми використовуємо anchors.centerIn: parent
для центрування нашої мітки горизонтально і вертикально у нашому батьківському елементі. У цьому випадку батьківським для компонента нашої мітки буде компонент
Kirigami.Page
. Нарешті, ми маємо встановити для мітки текст: text: i18n("Hello World!")
.
main.cpp
main.cpp
обробляє «ділову логіку» нашої програми. Мова C++ є зручною для цього, оскільки вона є гнучкою і швидкою, хоча і потребує більше знань, ніж деякі інші мови програмування.
main.cpp
є також вхідним пунктом нашої програми. Тут налаштовуються і запускаються обидві частини нашого проєкту — модуль обробки і інтерфейс користувача.
|
|
До цього моменту у нас не було потреби заглиблюватися у подробиці дій, які виконує код нашого main.cpp
, але його роль значно зросте, якщо ми вирішимо додати складні функціональні можливості до нашої програми у майбутньому. Якщо ви вирішите продовжити, ви можете дізнатися більше щодо того, як працює цей main.cpp
, з цієї сторінки.
resources.qrc
Наш resources.qrc
є файл ресурсів Qt і містить список усіх файлів QML, а також усіх інших файлів (зокрема нетипових піктограм), які буде включено до виконуваного файла.
|
|
Зауважте рядок <file alias="main.qml">contents/ui/main.qml</file>
. Цей рядок вказує, які файли QML буде включено у процесі компіляції. У нашому випадку ми використовуємо лише main.qml
, але якщо б нам захотілося додати до нашого коду інші файли QML, нам довелося б включити їх до resources.qrc
додаванням подібних рядків.
Цей файл ресурсів надає нам змогу скористатися шляхом "qrc:" + "/main.qml" у нашому main.cpp
, замість потреби у визначенні повного шляху "contents/ui/main.qml".
CMakeLists.txt
Для використання вибраної системи збирання KDE, CMake, потрібні файли CMakeLists.txt
. Файл CMakeLists.txt у нашій теці верхнього рівня має вказати певні характеристики нашої програми. До цього файла також включено записи певних залежностей, які нам потрібні, щоб зібрати наш проєкт.
|
|
CMakeLists.txt визначає, як збирати ваші проєкти. Більшість даних тут призначено лише для збирання з нуля вашого проєкту. Порядкове глибинне пояснення дій, які описано у цьому файлі CMakeLists, наведено тут.
Найважливішим, про що слід пам'ятати, є те, що залежності від Qt і KDE Frameworks керуються за допомогою find_package(). У процесі розробки вашої програми вам слід вносити зміни до цих рядків і включати усі додаткові компоненти, які ви вирішите використовувати.
Останній рядок, add_subdirectory(src)
, вказує каталог helloworld/src/
для CMake, де зберігатиметься наш початковий код. Розгляньмо докладніше файл helloworld/src/CMakeLists.txt
у цьому каталозі.
|
|
Він набагато коротший! Ознайомимося з його вмістом:
- add_executable() створює виконуваний файл на основі вказаних початкових файлів.
- target_link_libraries() пов'язує ціль із бібліотеками, які використовуються у нашому коді для створення виконуваного файла.
Нотатка
Зауважте, що ці бібліотеки мають відповідати компонентам, які ми включили до нашого попереднього файла CMakeLists.txt — інакше ці компоненти не буде включено і нашу програму не можна буде зібрати.Тепер, коли ми подбали про CMake, погляньмо на файли, з якими ми маємо намір працювати переважний час під час розробки програми.
Збирання і запуск програми
Ми наблизилися до фінішу. Наприкінці процесу нам слід зібрати і запустити нашу програму. При цьому послідовність дій залежить від програмної платформи.
Якщо ви працюєте над вашим проєктом у Linux, вам слід вказати місце, куди буде встановлено програму. Для цього нам слід перейти до каталогу helloworld/
у нашій програмі-терміналі і віддати такі команди:
cmake -B build/ -DCMAKE_INSTALL_PREFIX="~/kde5/usr"
cmake --build build/
cmake --install build/
Програму буде встановлено до ~/kde5/usr/bin
.
Якщо ви збираєте ваш проєкт за допомогою Craft у Windows, вам, можливо, на першому кроці слід вказати породжувач CMake, залежно від того, користуєтеся ви для збирання ваших проєктів Visual Studio 2019 (msvc) чи MinGW (make).
Якщо Visual Studio:
cmake -B build/ -G "Visual Studio 16 2019"`
cmake --build build/
cmake --install build/
Якщо MinGW:
cmake -B build/ -G "MinGW Makefiles"
cmake --build build/
cmake --install build/
В обох випадках програму буде встановлено до C:\CraftRoot\bin
.
Далі, ви можете запустити програму helloworld такою командою:
helloworld # У Linux
helloworld.exe # У Windows
Ось і все! Тепер ви бачите перед собою вашу першу програму Kirigami вашими власними очима.
Нотатка
Наступного разу, коли створюватимете потрібні файли і теки, можете скористатися KAppTemplate або KDevelop для автоматичного створення відповідної початкової версії проєкту. Ці програми є у сховищах усіх основних дистрибутивів. Крім того, ці програми створюють файли, що містять метадані AppStream і файл .desktop
, який містить дані щодо того, як слід показувати пункт програми у засобах запуску програм Linux.
Завдяки магії CMakeLists, ви також можете скористатися комплексними середовищами розробки, зокрема KDevelop або QtCreator для подальшого написання програми у комфортному середовищі із мінімальними зусиллями.