Конспект вебинаров по QML QT Quick.

Категории: 
Электроника
Тэги: 
QML
Qt Quick Controls
QT

Исходные видео материалы первой части можно найти тут.

Вторая часть.

Часть первая. Основная концепция QML   и его реализация в QT.

1. QML  и его приемущества.

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

2.  Что такое QT Quick.

QT Quick - среда разработки приложений на основе QML, C++, JavaScript. Что интересно QT Quick обеспечивает взаимодействие с оборудованием в стиле QML.

  • среда разработки интегрирована с QT
  • поддержка в  QT Creator
  • имеются инструменты графического дизайна
  • интеграция с QT приложениями на C++.

3. Немного о QT.

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

4. Архитектура QML QT Quick програмного обеспечения.

  • Визуальные элементы QML
  • Декларативная среда исполнения +  С++ разширения
  • QT + JavaScript
  • HTML  и CSS

5.  Структура QML.

Интерфейс описывается как древовидная структура элементов и их свойств.

Перечень некоторых базовых компонентов:

  • Rectangle
  • Text
  • MouseArea
  • anchors
  • id
  • parent
  • Image

Часть вторая.  QML & QT Quick, создание интерфейса пользовотеля.

Короткий обзор:

  • Иерархический UI
  • Основные элементы. Графические и текстовые.
  • Якоря и отступы
  • Компановка ( loyouts)

1.Принципы построения интерфейса пользователя в языке QML.

  • UI  представляет из себя дерево вложенных элементов
  • Уровень вложенности не ограничен
  • Для именования родительского элемента используется "parent"
  • Для оступа к элементом не являющимя родительскими используется "id".

Пример: Рисуется несколько квадратов.

2.Использование графических элементов в QML.

В QML  используются следующие графические элементы:

  • Векторные и растровые форматы изображений ( предпочтительно использовать SVG)
  • Цвета в различных представлениях
  • Трансформации объектов
  • Градиенты

3.  Использование и представление цветов в QML.

  • SVG нотация, например: "green", "blue" ...
  • Компонентное представление HEX. Например: #ff0000, #f3f3f3.
  • функция (R,G,B,A). Пример: Qt.rgba(1,0.4,0,0.5). Где A- альфа канал, прозпачность.
  • элементы поддерживают прозрачность. opacity:0 (0- прозрачное, 1- непрозрачное)

Пример: задание цветов.

4. Использование изображений в QML.

  • Изображения описываются компонентом Image
  • Компонент ссылается на файл с использованием свойства source:URL. Может использоваться абсолютный URL, тносительные QML пути, ссылка на ресурсы.
  • Поддерживается преобразование изображений: масштабирование, вращение. Для вращения можно задавать точку вращения и ось.

    Примеры: Использования  Image.

5. Градиенты.

  • Определяется Gradient
  •  В определение градиента входит список из двух или более GradientStop. Позиция ( число от 0 до 1), цвет.
  • Градиент перекрывает определение color.

Замечание: Градиенты активно используют CPU и могут повлечь неожиданные эффекты при анимации

6. Текстовые элементы в языке QML.

  • Текстовые элементы в документ QML встраиваются при помощи элемента Text
  • В текстовых элементах могут быть настроеный размер и шрифты
  • Не имеют рамок и других декораций
  • Могут использоваться для отображения HTML

7. Якоря. (Anchors).

  • Используются для связывания, позицирования и выравнивания элементов.
  • Элементы могут быть выровняны по сторонам и центральным линиям других элементов
  • Якоря ссылаются на другие элементы. (Пример: centerln, fill)
  • Якоря других элементов (Пример: left, top)


Замечания по использованию якорей:

  • Якоря используются с родительскими элементами или элементами того же уровня.
  • Якоря работа если имеются позиции и размеры связанные якорями.
  • Нельзы использовать циклическое связование

Использование якорей:

  • Определить роли элементов
  • Фиксированные элементы имеют свойства id или доступны через parent
  • Доминантные компаненты, опора для всех остальных, имеют свойства id
  • Элементы реагирующие на изменение доминантных компанентов привязываются к ним якорями

8. Отступы. (Margins).

  • Отступы в языке QML используются вместе с якорями
  • Определяют расстояние в пикселях между элементами соедененными якорями.
  • Отступы работают при определенных якорях (leftMarfin -> left)

Примеры: topMargin, bottomMargin, leftMargin, rightMargin