Предисловие

Добрый день!

В этой статье я расскажу о первых шагах по написанию приложения на Qt.
Я давно запланировала один пет-проект. По мере его создания я планирую выкладывать статьи по шагам и подробным описанием, как я реализовывала разные вещи и с какими сложностями столкнулась.

У меня есть больше 5 лет опыта разработки приложений на qt, но это мой первый собственный проект. Буду рада вашим комментариям и советам. Также буду рада, если эти статьи кому-нибудь пригодятся для разработки своих проектов.

Выбор версий и создание проекта

Первым делом выбираю версию qt и с++.
На момент написания этой статьи самая свежие версии: Qt - 6.10 и C++23, на них и буду разрабатывать проект.

Так как у меня небольшой некоммерческий проект, qt устанавливаю просто с официального сайта https://my.qt.io/download. Если будет необходимость, позже сделаю свою сборку из гита, но пока это будет лишь лишним усложнением.

Возможность запускать под ios и android буду добавлять на более поздних этапах. Это будет описано в статьях с соответствующим названием. Поэтому на данный момент достаточно qtCreator, библиотек qt, git и cmake.

Создаю пустой проект с qml.

Qt Quick Application — действительно быстро.

Выбираю папку, записываю название и получаю базовый cmake проект с интерфейсом на qml.
Запускаю, проверяю что работает.

Создание ресурсов и организация порядка в репозитории

Базовое расположение файлов мне неудобно, поэтому я все сборки помещаю в out, все c++ файлы в src и все qml файлы с qml.

Для изменения расположения build нужно в qtCreator открыть раздел Project, там нажать "Browse.." и выбрать папку.

Для того, чтобы поменять положения qml и src, достаточно их перенести и прописать новые пути в CMakeLists.txt в qt_add_executable для cpp и qt_add_qml_module для qml.

Stack View и страницы

Мобильное приложение, в отличие от десктопного, не имеет окон: мы ограничены одним окном приложения. В окне контент меняется путём переключения страниц.
Базовый способ переключать страницы — это использовать StackView https://doc.qt.io/qt-6/qml-qtquick-controls-stackview.html.

Для этого подключаю import QtQuick.Controls и добавляю в main StackView.

Далее создаю AuthPage.qml и WelcomePage на основе Page. Не забываем про import QtQuick.Controls. И сразу добавляю функции для их добавления в стек.

StackView
 {
     id: stackView
     anchors.fill: parent
 }
Component.onCompleted: {
    openWelcomePage()
}

function openWelcomePage(){
    var component = Qt.createComponent("qrc:/qt/qml/Pages/WelcomePage.qml")
    var page = stackView.push(component)
    page.continueClicked.connect(function(){
        stackView.pop()
         openAppPage()
    })
}

function openAppPage(){
    var component = Qt.createComponent("qrc:/qt/qml/Pages/AuthPage.qml")
    stackView.push(component)
}

Также сразу создаю Colors.qml и Sizes.qml. Их надо объявить в mail.qml, чтобы можно было использовать в любом месте.
! Важно создавать базовые компоненты и отдельные классы с цветами и размерами, чтобы позже можно было легко менять стили или даже добавить поддержку нескольких стилей.

Структура qml

С самого начала я решаю выделить 3 qml модуля. Это необязательно для небольших проектов, но помогает не забывать о принципах проектирования, не соблазняться возможностью QML нагенерировать перекрёстные ссылки и после не утонуть в зависимостях.

По принципу YAGNI(You Aren’t Gonna Need It) Я создаю лишь то, что мне нужно для моей ближайшей задачи. Сделать AuthPage и WelcomePage. Позже количество модулей может увеличиться.

Модуль стилей будет содержать сиглтоны с readonly property, позже, когда буду делать динамическую смену тем, их можно будет определять не константами, а функциями, например, со switch в зависимости от темы.

Модуль стилизованных компонентов будет содержать компоненты, что я использую на страницах, такие как кнопки, свитчеры, текстовые поля

Модуль страниц будет содержать страницы.

Главный модуль пока что содержит только main, в котором стек и навигация.

В честь знакомства с qt6.10 Модули я создала, используя qt_add_qml_module.

Для этого нужно:

1. Каждый модуль объявить через свой qt_add_qml_module. Пример:

   qt_add_qml_module(Components
       URI Components
       VERSION 1.0
       QML_FILES
           NLButton.qml
           NLText.qml
           NLTextField.qml
   )

2. Прописать зависимости qt_add_qml_module(Components

   qt_add_qml_module(Components
       URI Components
       DEPENDENCIES
           Styles

3. Также прописать зависимости в target_link_libraries под qt_add_qml_module

   target_link_libraries(Components
       PRIVATE
           Styles
   )

4. Если объявляем несколько qt_add_qml_module в одном cmake файле, то нужно явно указать OUTPUT_DIRECTORY, например, в "${CMAKE_CURRENT_BINARY_DIR}/qml/Components"

5. Если в модуле будут синглтоны, то добавляем к файлам соответствующее проперти

   set_source_files_properties(
       Colors.qml
       Typography.qml
       PROPERTIES
           QT_QML_SINGLETON_TYPE TRUE
   )
   
   qt_add_qml_module(Styles
       URI Styles
       VERSION 1.0
       QML_FILES
           Colors.qml
           Typography.qml
   )

   Также в самих файлах в начале прописываем pragma Singleton

6. Чтобы работала подсветка указываем путь до модулей в QML_IMPORT_PATH

   set_target_properties(${APP_TARGET_NAME} PROPERTIES
       QML_IMPORT_PATH "${CMAKE_CURRENT_BINARY_DIR}/qml"
   )

7. Для работы рантайма не забываем добавить импорт в main.cpp

   engine.addImportPath(QStringLiteral("%1/qml").arg(QCoreApplication::applicationDirPath()));

8. Пишем в файле qml import Components 1.0. и всё работает.

Первые шаги в создание своего UI

Если пытаться делать интерфейс, полагаясь на интуицию, будет потрачено куча времени, а результат всё равно будет так себе. Я не дизайнер, но для создания своего приложения хоть какой-то дизайн сделать придётся.

Для этого использую фигму figma.com. Там есть база для первых страниц и удобно менять и подбирать дизайн на свой вкус. Создаю там первые 2 страницы.

Также после дня изучения узнала вопроса по цветам, создаю свою палитру.
Мне понравилось описание палитры на сайте https://m3.material.io/styles/color/roles его и взяла себе.

Для поиска цветов использовала сайт https://uicolors.app/. Там можно задать primary цвет и получить примерный вид приложения и + оттенки цвета.

Далее дело техники, используя стили, делаю компоненты, затем их располагаю на страницах.

UI первых страниц готов!

В следующей статье:

Следующей шагом планирую создать основу для сервера и реализовать простую авторизацию, при помощи которой, по паролю и логину буду получать токен.
Сервер будет сохранять пользователей и отдавать токены.