'

QML – новый подход к построению GUI

Понравилась презентация – покажи это...





Слайд 0

QML – новый подход к построению GUI


Слайд 1

Введение Подходы к построению десктопных приложений: Императивный Декларативный QML - это декларативный язык, предназначенный для описания пользовательского интерфейса программы. Сравнение: XAML CSS


Слайд 2

Синтаксис Дерево объектов со свойствами: Rectangle { id: canvas width: 200 height: 200 color: "blue" Image { id: logo source: "pics/logo.png" anchors.centerIn: parent x: canvas.height / 5 } }


Слайд 3

Основные типы данных action bool color date enumeration font int list point real rect size string time url vector3d Item { x: 10.5 // a 'real' property state: "details“ // a 'string' property focus: true // a 'bool' property } Item { x: 10.5 // a 'real' property state: "details" // a 'string' property focus: true // a 'bool' property ... Item { x: 10.5 // a 'real' property state: "details" // a 'string' property focus: true // a 'bool' property ... Item { x: 10.5 // a 'real' property state: "details" // a 'string' property focus: true // a 'bool' property ...


Слайд 4

Идентификаторы объектов Row { Text { id: text1 text: "Hello World" } Text { text: text1.text } } Идентификатор элемента виден во всей области компонента, в котором этот элемент находится


Слайд 5

Выражения JavaScript – выражения могут быть использованы для назначения свойств элементов: Пример 1: Item { width: 100 * 3 height: 50 + 22 } Пример 2: Item { width: 300 height: 300 Rectangle { width: parent.width - 50 height: 100 color: "yellow" } }


Слайд 6

Соединения (Connections) Создает подключение к QML-сигналу: MouseArea { id: area } ... Connections { target: area onClicked: foo(...) } Преимущества: для одного сигнала можно написать несколько соединений создание связей за пределами сферы отправителя сигнала подключение к источникам не нужно предопределять


Слайд 7

Сигналы. Обработка сигналов Обработка сигнала нажатия кнопки мыши: Item { width: 100; height: 100 MouseArea { anchors.fill: parent onClicked: { console.log("mouse button clicked") } } } Возможность создания собственных сигналов с последующей их обработкой


Слайд 8

Состояния Это множество изменений по отношению к стандартной конфигурации элемента: Rectangle { id: myRect width: 100; height: 100 color: "black" MouseArea { id: mouseArea anchors.fill: parent onClicked: myRect.state == 'clicked' ? myRect.state = "" : myRect.state = 'clicked'; } states: [ State { name: "clicked" PropertyChanges { target: myRect; color: "red" } } ] }


Слайд 9

Поведение элементов Поведение определяет анимации, которые должны применяться, когда изменяются определенные значения свойств элемента: Rectangle { id: rect width: 100; height: 100 color: "red" Behavior on width { NumberAnimation { duration: 1000 } } MouseArea { anchors.fill: parent onClicked: rect.width = 50 } }


Слайд 10

Анимация Свойства и методы анимации привязаны непосредственно к элементам QML: Rectangle { width: 100 height: 100 color: "green" RotationAnimation on rotation { loops: Animation.Infinite from: 0 to: 360 } } Свойства, присущие для всех видов анимации: alwaysRunToEnd : bool loops : int paused : bool running : bool


Слайд 11

Работа с мышью Для обработки сигналов, отправленных мышью служит элемент MouseArea: Rectangle { width: 100; height: 100 color: "green" MouseArea { anchors.fill: parent onClicked: { parent.color = 'red' } } }


Слайд 12

QML в С++ приложениях Создание и передача свойства «цвет» из C++ приложения в QML: // main.cpp #include <QApplication> #include <QDeclarativeView> #include <QDeclarativeContext> int main(int argc, char *argv[]) { QApplication app(argc, argv); QDeclarativeView view; QDeclarativeContext *context = view.rootContext(); context->setContextProperty("backgroundColor", QColor(Qt::yellow)); view.setSource(QUrl::fromLocalFile("main.qml")); view.show(); return app.exec(); } // main.qml Rectangle { width: 300 height: 300 color: backgroundColor Text { anchors.centerIn: parent text: "Hello Yellow World!" } }


×

HTML:





Ссылка: