Исходные видео материалы первой части можно найти тут.
Вторая часть.
Часть первая. Основная концепция 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