Установка компонентов

Перед началом необходимо установить компоненты Rosa в вашу систему

Для разработки необходимо установить Kubuntu 23.10. Скопируйте исходные файлы rosa-controls. Далее из корня запустите sudo ./install_controls.sh. Это установит компоненты в системные каталоги Qt. Для установки на aarch64 используйте RPM-пакет.

Структура проекта

helloworld/ 
├── CMakeLists.txt 
└── src/ 
    ├── CMakeLists.txt 
    ├── main.cpp 
    ├── resources.qrc 
    └── qml/ 
        └── main.qml

Подсказка

Вы можете быстро создать структуру так:

mkdir -p helloworld/src/qml 
touch helloworld/CMakeLists.txt 
touch helloworld/src/{CMakeLists.txt,main.cpp,resources.qrc} 
touch helloworld/src/qml/main.qml

Для конфигурации приложения воспользуемся cmake

Подробнее о cmake

CMakeLists.txt (helloworld/)

Для работы потребуется Qt5; можно воспользоваться системным Qt в Kubuntu 23.10. CMake версии 3.16 и выше.

KDE Frameworks 5 (KF5) — это коллекция библиотек и инструментов, предоставляемых KDE, которые облегчают разработку приложений, используя функциональность и компоненты, специфичные для KDE.

Подробнее о KDE Frameworks 5 (KF5)

ECM или Extra CMake Modules представляет собой набор дополнительных модулей для CMake, предоставляемых проектом KDE. Эти модули расширяют стандартный функционал CMake, предоставляя дополнительные макросы и модули для упрощения процесса настройки сборки, особенно для проектов, связанных с KDE и Qt.

Подробнее о ECM

cmake_minimum_required(VERSION 3.16) 
 
project(rosa-helloworld VERSION 0.1 LANGUAGES CXX) 
 
set(CMAKE_CXX_STANDARD 17) 
set(KF5_MIN_VERSION "5.89.0") 
set(QT_MIN_VERSION "5.15.0") 
 
set(CMAKE_CXX_STANDARD_REQUIRED ON) 
set(CMAKE_CXX_FLAGS_DEBUG "${CMAKE_CXX_FLAGS_DEBUG} -DQT_QML_DEBUG ") 
 
find_package(ECM ${KF5_MIN_VERSION} REQUIRED NO_MODULE) 
set(CMAKE_MODULE_PATH ${CMAKE_MODULE_PATH} ${ECM_MODULE_PATH} ${ECM_KDE_MODULE_DIR} ${CMAKE_SOURCE_DIR}/cmake/modules) 
 
find_package(Qt5 ${QT_MIN_VERSION} REQUIRED NO_MODULE COMPONENTS 
    Core 
    Gui 
    Quick 
    QuickControls2 
    Widgets 
    QuickCompiler 
) 
 
include(FeatureSummary) 
include(KDEInstallDirs) 
include(KDECMakeSettings) 
include(KDECompilerSettings NO_POLICY_SCOPE) 
include(ECMFindQmlModule) 
include(ECMConfiguredInstall) 
 
add_subdirectory(src) 
 
feature_summary(WHAT ALL INCLUDE_QUIET_PACKAGES FATAL_ON_MISSING_REQUIRED_PACKAGES)

CMakeLists.txt (src/)

Здесь создаем исполняемый файл hello-rosa

add_executable(hello-rosa 
    main.cpp 
    resources.qrc 
) 
 
target_link_libraries(hello-rosa 
    Qt::Qml 
    Qt::Gui 
    Qt::QuickControls2 
    Qt::Widgets) 
 
target_include_directories(hello-rosa PRIVATE ${CMAKE_BINARY_DIR}) 
 
install(TARGETS hello-rosa ${INSTALL_TARGETS_DEFAULT_ARGS})

main.cpp

Библиотека представляет собственный стиль QML — RosaStyle. Чтобы приложение использовало его, необходимо указать в main.cpp файле:
QQuickStyle::setStyle(QStringLiteral("RosaStyle"));

Другие способы установки QtQuickStyle

#include  
#include  
#include  
 
int main(int argc, char *argv[]) 
{ 
    QGuiApplication app(argc, argv); 
     
    QQuickStyle::setStyle(QStringLiteral("RosaStyle")); 
     
    QQmlApplicationEngine engine;
     
    const QUrl url(QStringLiteral("qrc:qml/Main.qml")); 
     
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated, 
    &app, [url](QObject *obj, const QUrl &objUrl) { 
    if (!obj && url == objUrl) 
        QCoreApplication::exit(-1); 
    }, Qt::QueuedConnection); 
     
    engine.load(url); 
     
    return app.exec(); 
}

main.qml

Для подключения компонентов нужно импортировать модуль import RosaControls 1.0. В нем находятся доработанные компоненты, часто применяемые в проектах (подробнее рассмотрим их в "галерее компонентов").

Узнать подробнее о Галерее компонентов

Для получения доступа к объектам темы рекомендуется придерживаться следующего объявления: import RosaTheme 1.0 as Rosa. Используя Rosa.Theme, вы можете получить доступ к вспомогательным функциям, шрифтам и цветовой схеме темы (подробнее будет рассмотрено далее).

import QtQuick 2.15 
import QtQuick.Controls 2.15 
 
import RosaTheme 1.0 as Rosa 
import RosaControls 1.0 
 
ApplicationWindow { 
    width: 640 
    height: 480 
    title: qsTr("Hello World") 
 
    Button { 
        anchors.centerIn: parent 
        text: qsTr("Hello Rosa") 
    } 
}

resources.qrc

<RCC> 
    <qresource prefix="/">         
        <file>qml/Main.qml</file>     
    </qresource> 
</RCC>

Сборка и запуск приложения

mkdir build 
cd build 
cmake -S .. -B . 
make ./bin/hello-rosa

В результате получим форму