ݺߣ

ݺߣShare a Scribd company logo

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

•Download as PPTX, PDF•
•
Олег Шмаков
Олег Шмаков
1 of 13
Downloaded 11 times
QML – новый подход к построению GUI
Введение Подходы к построению десктопных приложений:ИмперативныйДекларативныйQML - это декларативный язык, предназначенный для описания пользовательского интерфейса программы. Сравнение:XAMLCSS
Синтаксис Дерево объектов со свойствами:Rectangle { id: canvas width: 200 height: 200 color: "blue" Image { id: logo source: "pics/logo.png" anchors.centerIn: parent x: canvas.height / 5 } }
Основные типы данных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}actionboolcolordateenumerationfontintlistpointrealrectsizestringtimeurlvector3d
Идентификаторы объектовRow { Text { id: text1 text: "Hello World" } Text { text: text1.text } }Идентификатор элемента виден во всей области компонента, в котором этот элемент находится
ВыраженияJavaScript – выражения могут быть использованы для назначения свойств элементов:Пример 1:Item { width: 100 * 3 height: 50 + 22 }Пример 2:Item { width: 300 height: 300 Rectangle{ width: parent.width - 50 height: 100 color: "yellow" } }
Соединения (Connections)Создает подключение к QML-сигналу:MouseArea { id: area }... Connections { target: area onClicked: foo(...) }Преимущества:для одного сигнала можно написать несколько соединенийсоздание связей за пределами сферы отправителя сигналаподключение к источникам не нужно предопределять
Сигналы. Обработка сигналовОбработка сигнала нажатия кнопки мыши:Item { width: 100; height: 100 MouseArea { anchors.fill: parent onClicked: { console.log("mouse button clicked") } }}Возможность создания собственных сигналов с последующей их обработкой
СостоянияЭто множество изменений по отношению к стандартной конфигурации элемента:Rectangle { id: myRectwidth: 100; height: 100 color: "black" MouseArea { id: mouseAreaanchors.fill: parent onClicked:myRect.state == 'clicked' ? myRect.state = "" : myRect.state = 'clicked'; } states: [ State { name: "clicked" PropertyChanges { target: myRect; color: "red" } } ] }
Поведение элементов Поведение определяет анимации, которые должны применяться, когда изменяются определенные значения свойств элемента:Rectangle { id: rectwidth: 100; height: 100 color: "red" Behavior on width { NumberAnimation { duration: 1000 } } MouseArea { anchors.fill: parent onClicked: rect.width = 50 } }
Анимация Свойства и методы анимации привязаны непосредственно к элементам QML:Rectangle { width: 100 height: 100 color: "green" RotationAnimation on rotation { loops: Animation.Infinite from: 0to: 360 } }Свойства, присущие для всех видов анимации:alwaysRunToEnd : boolloops : intpaused : boolrunning : bool
Работа с мышью Для обработки сигналов, отправленных мышьюслужит элемент MouseArea:Rectangle { width: 100; height: 100 color: "green" MouseArea { anchors.fill: parent onClicked: { parent.color = 'red' } } }
QML в С++ приложенияхСоздание и передача свойства «цвет» из C++ приложения в QML:// main.cpp#include <QApplication> #include <QDeclarativeView> #include <QDeclarativeContext> int main(intargc, 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.qmlRectangle { width: 300 height: 300 color: backgroundColorText { anchors.centerIn: parent text: "Hello Yellow World!" } }

More Related Content

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

  • 1. QML – новый подход к построению GUI
  • 2. Введение Подходы к построению десктопных приложений:ИмперативныйДекларативныйQML - это декларативный язык, предназначенный для описания пользовательского интерфейса программы. Сравнение:XAMLCSS
  • 3. Синтаксис Дерево объектов со свойствами:Rectangle { id: canvas width: 200 height: 200 color: "blue" Image { id: logo source: "pics/logo.png" anchors.centerIn: parent x: canvas.height / 5 } }
  • 4. Основные типы данных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}actionboolcolordateenumerationfontintlistpointrealrectsizestringtimeurlvector3d
  • 5. Идентификаторы объектовRow { Text { id: text1 text: "Hello World" } Text { text: text1.text } }Идентификатор элемента виден во всей области компонента, в котором этот элемент находится
  • 6. ВыраженияJavaScript – выражения могут быть использованы для назначения свойств элементов:Пример 1:Item { width: 100 * 3 height: 50 + 22 }Пример 2:Item { width: 300 height: 300 Rectangle{ width: parent.width - 50 height: 100 color: "yellow" } }
  • 7. Соединения (Connections)Создает подключение к QML-сигналу:MouseArea { id: area }... Connections { target: area onClicked: foo(...) }Преимущества:для одного сигнала можно написать несколько соединенийсоздание связей за пределами сферы отправителя сигналаподключение к источникам не нужно предопределять
  • 8. Сигналы. Обработка сигналовОбработка сигнала нажатия кнопки мыши:Item { width: 100; height: 100 MouseArea { anchors.fill: parent onClicked: { console.log("mouse button clicked") } }}Возможность создания собственных сигналов с последующей их обработкой
  • 9. СостоянияЭто множество изменений по отношению к стандартной конфигурации элемента:Rectangle { id: myRectwidth: 100; height: 100 color: "black" MouseArea { id: mouseAreaanchors.fill: parent onClicked:myRect.state == 'clicked' ? myRect.state = "" : myRect.state = 'clicked'; } states: [ State { name: "clicked" PropertyChanges { target: myRect; color: "red" } } ] }
  • 10. Поведение элементов Поведение определяет анимации, которые должны применяться, когда изменяются определенные значения свойств элемента:Rectangle { id: rectwidth: 100; height: 100 color: "red" Behavior on width { NumberAnimation { duration: 1000 } } MouseArea { anchors.fill: parent onClicked: rect.width = 50 } }
  • 11. Анимация Свойства и методы анимации привязаны непосредственно к элементам QML:Rectangle { width: 100 height: 100 color: "green" RotationAnimation on rotation { loops: Animation.Infinite from: 0to: 360 } }Свойства, присущие для всех видов анимации:alwaysRunToEnd : boolloops : intpaused : boolrunning : bool
  • 12. Работа с мышью Для обработки сигналов, отправленных мышьюслужит элемент MouseArea:Rectangle { width: 100; height: 100 color: "green" MouseArea { anchors.fill: parent onClicked: { parent.color = 'red' } } }
  • 13. QML в С++ приложенияхСоздание и передача свойства «цвет» из C++ приложения в QML:// main.cpp#include <QApplication> #include <QDeclarativeView> #include <QDeclarativeContext> int main(intargc, 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.qmlRectangle { width: 300 height: 300 color: backgroundColorText { anchors.centerIn: parent text: "Hello Yellow World!" } }