Разработка интерфейса приложения на QML

Цена договорная
10 сентября 2021, 10:22 • 3 отклика • 27 просмотров
Мы - IT-команда, пилящая крутые внутренние продукты компании с огромным потенциалом, и нам, как это обычно бывает, дико не хватает рук на проектах. Сейчас мы ищем человека для создания приложения на Android и iOS.

Логика и интерфейс уже имеющегося настольного приложения написана на C++ и QtWidgets, интерфейс мобильного приложения хотим сверстать на QML, оставив логику на C++, чтобы использовать мощь QML в реализации интерфейсов (skeleton-анимации, lotty и пр.).

Требуется:

  1. Для каждого экрана создать соответствующий подкласс QWidget, который будет загружать UI экрана из QML-файла.
  2. На все события, возникающие в интерфейсе должна быть функция-слот в соответствующем C++-файле с понятным названием, например, SignInButtonClicked().
  3. Стили для элементов интерфейса должны быть вынесены в отдельные файлы, цвета должны так же задаваться отдельно, чтобы при реализации в будущем темной темы можно было бы поменять только цвета. (В дизайне используется всего несколько цветов, которые должны быть обобщены)
  4. Вся возможная логика по отображению данных должна быть реализована в виде отдельных QML-функций, например, если с сервера пришла ошибка о неправильном пароле пользователя, QML-файл должен уметь ее отобразить,
  5. Модель данных должна быть реализована в C++-коде, (см. RegionsModel в проекте)
  6. Логика переходов по экранам должна быть реализована в C++-коде. Например, переход к экрану плеера в случае успешного входа в приложение по логину и паролю. Можно вынести в главное окно приложения, брать его instance и "просить" его положить в стек виджет другого экрана.
Для примера, рассмотрим экран входа в приложение:

- Функции в QML:

  1. Получить список возможных локаций и сохранить у себя для отображения по нажатию верхней кнопки
  2. Получить текущую локацию и отобразить как надпись верхней кнопки
  3. Отобразить произвольное сообщение об ошибке в поле логина (например, "Введите логин")
  4. Отобразить произвольное сообщение об ошибке в поле пароля
  5. Начать анимацию кнопки "Войти"
  6. Завершить анимацию кнопки "Войти"
- Сигналы из QML

  1. Послать сигнал о том, что нажата кнопка "Войти" с параметрами логин и пароль (две строки)
  2. Послать сигнал о том, что нажата кнопка "Регистрация"
  3. Послать сигнал о том, что выбрана другая локация.
- Пример логики переходов:

  1. В C++-функции обработки нажатия кнопки "Регистрация" берем экземпляр навигатора (что-то вроде синглтона главного окна) и вызываем функцию добавления в стэк нового виджета, который инстанцируем сами.
  2. По нажатию кнопки "Назад" на экране Регистрации вызываем функцию навигатора "Удалить текущий экран из стека"

ВСЕ МОМЕНТЫ ТАК ИЛИ ИНАЧЕ ОБСУЖДАЕМЫ, МОЖЕТ БЫТЬ В КАКИХ-ТО МЕСТАХ БУДЕТ ПРЕДЛОЖЕН ЛУЧШИЙ ПОДХОД

На выходе нужно получить проект под Qt 5.12.5, в котором нужно будет лишь дописать логику из C++ по получению/обработке данных с сервера и воспроизведению контента.

Для понимания того, как модель QML должна стыковаться с данными с сервера, необходимые структуры данных будут предоставлены с нашей стороны (namespace Core/DataTypes).

Интерфейс мобильного приложения разработан в Figme. Для примера прикладываем скриншот экрана. Доступ к проекту в Figme будет предоставлен выбранному разработчику.

При взаимодействии с потенциальными исполнителями показываем пример проекта, чтобы посмотреть, чего именно мы ждем от реализации, оценить codestyle.
Файлы