Рекомендации по разработке на QML и Qt Quick

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

Пользовательские элементы управления UI

Плавный и современный интерфейс пользователя (UI) имеет ключевое значение для успеха любого приложения в современном мире, и именно здесь QML оказывается очень полезным для дизайнеров и разработчиков. Qt предоставляет базовые элементы управления UI, необходимые для создания плавного и современного UI. Рекомендуется ознакомиться с этим списком элементов управления UI перед созданием собственных пользовательских элементов управления.

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

Дополнительная информация

• Qt Quick Controls
• Qt Quick

Рекомендации по кодированию

См. Рекомендации по кодированию QML.

Объединение ресурсов приложения

Большинство приложений зависят от ресурсов, таких как изображения и значки, чтобы обеспечить богатый пользовательский опыт. Часто бывает сложно сделать эти ресурсы доступными для приложения независимо от целевой операционной системы. Большинство популярных ОС используют более строгие политики безопасности, которые ограничивают доступ к файловой системе, затрудняя загрузку этих ресурсов. В качестве альтернативы Qt предлагает собственную систему ресурсов, встроенную в исполняемый файл приложения, обеспечивая доступ к ресурсам приложения независимо от целевой ОС.

Например, рассмотрим следующую структуру каталогов проекта:

MyModule
├── images
│   ├── image1.png
│   └── image2.png
├── CMakeLists.txt
└── main.qml

Вы можете представить эту структуру как модуль CMake QML следующим образом:

qt_add_qml_module(my_module
   URI MyModule
   VERSION 1.0
   QML_FILES
       main.qml
   RESOURCES
       images/image1.png
       images/image2.png
   # ...
)

Все файлы QML, перечисленные в QML_FILES, будут автоматически компилироваться заблаговременно.

Дополнительная информация

• Система ресурсов Qt

Разделение интерфейса и логики

Одна из ключевых целей большинства разработчиков приложений — создание поддерживаемого приложения. Один из способов достижения этой цели — разделение пользовательского интерфейса (UI) и бизнес-логики. Ниже приведены несколько причин, по которым UI приложения следует писать на QML:

• Декларативные языки хорошо подходят для определения UI.
• Код QML проще писать, так как он менее многословный, чем C++, и не является строго типизированным. Это также делает его отличным языком для прототипирования, качество, которое имеет важное значение при сотрудничестве с дизайнерами, например.
• JavaScript легко используется в QML для реагирования на события.

Являясь строго типизированным языком, C++ лучше всего подходит для логики приложения. Обычно такой код выполняет задачи, такие как сложные вычисления или обработка данных, которые выполняются быстрее на C++ по сравнению с QML.

Qt предлагает различные подходы к интеграции кода QML и C++ в приложении. Типичный пример — отображение списка данных в пользовательском интерфейсе. Если набор данных статичный, простой и/или небольшой, модели, написанные на QML, могут быть достаточными.

Следующий фрагмент демонстрирует примеры моделей, написанных на QML:

model: [ "Item 1", "Item 2", "Item 3" ]

model: 10

Используйте C++ для динамических наборов данных, которые являются большими или часто изменяются.

Экспонирование данных из C++ в QML

Переработка QML намного проще, чем переработка C++, поэтому для беспроблемного обслуживания мы должны стремиться к тому, чтобы типы C++ были максимально независимы от QML. Этого можно добиться, «передавая» ссылки на типы C++ в QML.

Это можно сделать, используя обязательные свойства и устанавливая их с помощью QQmlApplicationEngine::setInitialProperties. Также можно создать один или несколько синглтонов, которые будут возвращать все данные, которые сторона C++ хочет предоставить QML.

С этим подходом C++ остается неизменным в случае, если QML необходимо переработать в будущем.

Для быстрого руководства по выбору правильного подхода к экспонированию типов C++ в QML см. Выбор правильного метода интеграции между C++ и QML.

Дополнительная информация

• Интеграция QML и C++
• Туториал по чат-приложению

Использование макетов Qt Quick

Qt предлагает макеты Qt Quick для визуального расположения элементов Qt Quick в макете. В отличие от альтернативных позиционеров элементов, макеты Qt Quick также могут изменять размер своих дочерних элементов при изменении размера окна. Хотя макеты Qt Quick часто являются предпочтительным выбором для большинства случаев использования, при их использовании необходимо учитывать следующие моменты:

Рекомендации

• Используйте anchors или свойства width и height для указания размера макета по отношению к родительскому элементу, не являющемуся макетом.
• Используйте свойство Layout для установки атрибутов размера и выравнивания непосредственных дочерних элементов макета.

Запрещается

• Не определяйте предпочтительные размеры для элементов, которые предоставляют implicitWidth и implicitHeight, если их неявные размеры не удовлетворяют.
• Не используйте anchors для элемента, являющегося непосредственным дочерним элементом макета. Вместо этого используйте Layout.preferredWidth и Layout.preferredHeight:

  RowLayout {
      id: layout
      anchors.fill: parent
      spacing: 6
      Rectangle {
          color: 'azure'
          Layout.fillWidth: true
          Layout.minimumWidth: 50
          Layout.preferredWidth: 100
          Layout.maximumWidth: 300
          Layout.minimumHeight: 150
          Text {
              anchors.centerIn: parent
              text: parent.width + 'x' + parent.height
          }
      }
      Rectangle {
          color: 'plum'
          Layout.fillWidth: true
          Layout.minimumWidth: 100
          Layout.preferredWidth: 200
          Layout.preferredHeight: 100
          Text {
              anchors.centerIn: parent
              text: parent.width + 'x' + parent.height
          }
      }
  }

Дополнительная информация

• Позиционеры элементов
• Обзор макетов Qt Quick

Безопасность типов

При объявлении свойств в QML легко и удобно использовать тип «var»:

property var name
property var size
property var optionsMenu

Однако этот подход имеет несколько недостатков:

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

Вместо этого всегда используйте фактический тип, когда это возможно:

property string name
property int size
property MyMenu optionsMenu

Производительность

Дополнительную информацию о производительности в QML и Qt Quick см. в разделе Учет производительности и рекомендации.

Предпочитайте декларативные связи императивным назначениям

В QML можно использовать императивный JavaScript-код для выполнения задач, таких как реагирование на события ввода, отправка данных по сети и т. д. Императивный код имеет важное значение в QML, но также важно знать, когда не следует его использовать.

Например, рассмотрите следующее императивное назначение:

Rectangle {
    Component.onCompleted: color = "red"
}

Это имеет следующие недостатки:

• Это медленно. Свойство color сначала будет вычислено со значением по умолчанию, а затем — со значением «red» позже.
• Это откладывает ошибки, которые можно было бы обнаружить на этапе компиляции, на время выполнения, замедляя процесс разработки.
• Это перезаписывает любую декларативную привязку, которая была установлена. В большинстве случаев это предполагается, но иногда это может быть непреднамеренным. Дополнительную информацию см. в разделе Отладка перезаписи привязок.
• Это мешает инструментам; например, Qt Quick Designer не поддерживает JavaScript.

Код можно переписать, чтобы он стал декларативной привязкой:

Rectangle {
    color: "red"
}

Инструменты и утилиты

Дополнительную информацию об полезных инструментах и утилитах, которые упрощают работу с QML и Qt Quick, см. в разделе Инструменты и утилиты Qt Quick.

Граф сцены

Дополнительную информацию о графике сцен Qt Quick см. в разделе Граф сцены Qt Quick.

Масштабируемые пользовательские интерфейсы

По мере улучшения разрешений дисплеев масштабируемый пользовательский интерфейс приложения становится все более важным. Один из подходов к достижению этого — сохранение нескольких копий UI для различных разрешений экрана и загрузка соответствующей в зависимости от доступного разрешения. Хотя это работает довольно хорошо, это увеличивает нагрузку на обслуживание.

Qt предлагает лучшее решение этой проблемы и рекомендует разработчикам приложений следовать этим советам:

• Используйте anchors или модуль Qt Quick Layouts для размещения визуальных элементов.
• Не указывайте явную ширину и высоту для визуального элемента.
• Предоставляйте ресурсы UI, такие как изображения и значки, для каждого разрешения дисплея, поддерживаемого вашим приложением. Пример галереи Qt Quick Controls хорошо демонстрирует это, предоставляя qt-logo.png для разрешений @2x, @3x, и @4x, что позволяет приложению адаптироваться к дисплеям высокого разрешения. Qt автоматически выбирает соответствующее изображение, подходящее для данного дисплея, при условии, что функция масштабирования высокой DPI явно включена.
• Используйте SVG-изображения для небольших значков. Хотя большие SVG-изображения могут быть медленными в рендеринге, маленькие работают хорошо. Векторные изображения исключают необходимость предоставления нескольких версий изображения, как это необходимо с растровыми изображениями.
• Используйте значки на основе шрифтов, такие как Font Awesome. Они масштабируются до любого разрешения дисплея и позволяют изменять цвет. Пример Qt Quick Controls Text Editor хорошо демонстрирует это.

При выполнении этих рекомендаций пользовательский интерфейс вашего приложения должен масштабироваться в зависимости от разрешения дисплея.

Дополнительная информация

• Пример галереи
• Пример текстового редактора
• Шрифт Font Awesome
• Масштабируемость
• Высокая DPI