Различия

Показаны различия между двумя версиями страницы.

--- develop:qt:quick2 [2021/08/23 12:12]
admin
+++ develop:qt:quick2 [2021/08/31 15:21] (текущий)
admin
@@ Строка 1: / Строка 1: @@
-====== Qt Quick: Ввод, Анимация, Преставление, С++ ======
+====== Qt Quick: Изображения, Ввод, Анимация ======
 ===== Элементы графики =====
 ==== Растровые изображения ====
-----
 Можно использовать форматы: **JPG**, **PNG** и **SVG**.\\
 === Элемент Image ===
-----
 Этот элемент отображает файл изображения, указанный в свойстве **source**, файл может находится как локально так и в сети.\\
 Есть интерактивный редактор для изменения свойств.\\
@@ Строка 116: / Строка 115: @@
 </details>
+=== BorderImage ===
-=== BorderImage ===
-----
 Элемент для нормального масштабирования графики, особенно полезно при закругленных углах (кнопок и т.д.). Элемент разбивает изображение на девять частей.\\
@@ Строка 135: / Строка 134: @@
 </details>
+==== Градиент ====
+----
+В QML есть только один градиент - линейный, если нужен другой, можно воспользоваться трансформацией.\\
+Для создания, нужно свойству **gradient** присвоить элемент **Gradient**, он содержит точки останова (**GradientStop**) с позициями от 0 до 1.\\
+Создание градиентов может потребовать много ресурсов, поэтому эффективнее использовать изображение градиента.\\
+<details>
+<summary>:!: Пример: Градиент с тремя точками останова, трансформирован в диагональ</summary>
+<code QML>
+import QtQuick 2.12; import QtQuick.Controls 2.2; import QtQuick.Layouts 1.12
+ApplicationWindow
+{
+    width: 640; height: 480; visible: true;
+    Rectangle
+    {
+        anchors.fill: parent
+        gradient: Gradient
+        {
+            GradientStop{position: 0.0; color: "blue"}
+            GradientStop{position: 0.7; color: "gold"}
+            GradientStop{position: 1.0; color: "silver"}
+        }
+        rotation: 30
+        scale: 1.5
+    }
+}
+</code>
+</details>
-====  ====
+==== Рисование Canvas ====
 ----
+**Canvas** представляет собой элемент холста, на котором можно выполнять растровые операции, по сути аналогичен **QPaintDevice**.\\
+Сам QML описательный язык, поэтому алгоритмы рисования реализуются с использованием **JavaScript**, в свойстве обработки **onPaint**.\\
+<details>
+<summary>:!: Пример: Прикольный узор, нарисованный на холсте</summary>
+<code QML>
+import QtQuick 2.12; import QtQuick.Controls 2.2; import QtQuick.Layouts 1.12
+ApplicationWindow
+{
+    width: 480; height: 480; visible: true;
+    Rectangle
+    {
+        anchors.fill: parent
+        Canvas
+        {
+            anchors.fill: parent;
+            onPaint:
+            {
+                function drawFantasy()
+                {
+                    ctx.beginPath();
+                    ctx.translate(parent.width / 2, parent.height / 2);
+                    var fAngle = 91 * 3.14156 / 180
+                    for(var i = 0; i < 300; ++i)
+                    {
+                        var n = i * 2;
+                        ctx.moveTo(0, 0);
+                        ctx.lineTo(n, 0);
+                        ctx.translate(n, 0);
+                        ctx.rotate(fAngle)
+                    }
+                    ctx.closePath();
+                }
+                var ctx = getContext("2d");
+                ctx.clearRect(0, 0, parent.width, parent.height);
+                ctx.save();
+                ctx.strokeStyle = "black";
+                ctx.lineWidth = 1;
+                drawFantasy();
+                ctx.stroke();
+                ctx.restore();
+            }
+        }
+    }
+}
+</code>
+</details>
 <details>
-<summary>:!: Пример: </summary>
+<summary>:!: Пример: Градиент на холсте</summary>
 <code QML>
+import QtQuick 2.12; import QtQuick.Controls 2.2; import QtQuick.Layouts 1.12
+ApplicationWindow
+{
+    width: 480; height: 480; visible: true;
+    Rectangle
+    {
+        anchors.fill: parent
+        Canvas
+        {
+            id: canv
+            width: 320; height: 320;
+            onPaint:
+            {
+                var ctx = getContext("2d");
+                ctx.strokeStyle= "blue";
+                ctx.lineWidth = 15;
+                var gradient = ctx.createLinearGradient(canv.width, canv.height, 0, 0);
+                gradient.addColorStop(0, "Indigo");
+                gradient.addColorStop(0.5, "Bisque");
+                gradient.addColorStop(1, "ForestGreen");
+                ctx.fillStyle = gradient;
+                ctx.fillRect(0, 0, canv.width, canv.height);
+                ctx.strokeRect(0, 0, canv.width, canv.height);
+            }
+        }
+    }
+}
 </code>
 </details>
+===== Пользовательский ввод =====
+==== Область мыши ====
+----
+Для получения событий мыши служат специальные элементы - **MouseArea**, по сути просто прямоугольные области, в которых осуществляется ввод информации от мыши.\\
 <details>
-<summary>:!: Пример: </summary>
+<summary>:!: Пример: Нажатие левой и правой кнопок мыши</summary>
 <code QML>
+import QtQuick 2.12; import QtQuick.Controls 2.2; import QtQuick.Layouts 1.12
+ApplicationWindow
+{
+    width: 300; height: 300; visible: true;
+    Rectangle
+    {
+        anchors.fill: parent
+        color: "lightgreen"
+        Text
+        {
+            id: txt
+            anchors.centerIn: parent
+            text: "<h1>This is text<br>Click here</h1>"
+            horizontalAlignment: Text.AlignHCenter
+        }
+        MouseArea
+        {
+            anchors.fill: parent
+            acceptedButtons: Qt.LeftButton | Qt.RightButton
+            onPressed:
+            {
+                if(mouse.button == Qt.LeftButton)
+                    parent.color= "red"
+                else
+                    parent.color= "blue"
+            }
+            onReleased: parent.color= "lightgreen"
+        }
+    }
+}
 </code>
 </details>
+Так же, можно использовать свойство **containsMouse**, для обнаружения находится ли курсор над областью.\\
+Аналогично можно использовать свойства **onEntered** и **onExit**.\\
+<details>
+<summary>:!: Пример: Обнаружение находится ли курсор над областью</summary>
+<code QML>
+import QtQuick 2.12; import QtQuick.Controls 2.2
+ApplicationWindow
+{
+    width: 300; height: 300; visible: true;
+    Rectangle
+    {
+        anchors.fill: parent
+        color: mousearea.containsMouse ? "red" : "lightgreen"
+        Text
+        {
+            anchors.centerIn: parent
+            text: "<h1>Hover me</h1>"
+        }
+        MouseArea
+        {
+            id: mousearea
+            anchors.fill: parent
+            hoverEnabled: true
+        }
+    }
+}
+</code>
+</details>
-====  ====
+==== Сигналы ====
 ----
+Сигналы в QML это события, которые уже прикреплены к свойствам, с кодом исполнения в них, эти свойства называются с префиксом **on** и являются по сути слотами.\\
+Можно определять собственные сигналы:\\
+**signal <name>[(<type> <value>, ...)]**\\
+К каждому такому сигналу автоматически создастся соответствующий обработчик (слот), с префиксом **on**.\\
+Насколько я понимаю, вызвать наш сигнал может только какое то действие т.е. стандартный сигнал (точнее его обработчик **on..**), поэтому любой собственный сигнал будет так или иначе связан с уже существующим, стандартным сигналом.., плюс есть как минимум в том, что наши собственные сигналы будут доступны на уровнях выше т.е. извне, в случае например объявления объекта в отдельном файле.\\
-====  ====
+<details>
+<summary>:!: Пример: Сигнал движения курсора мыши</summary>
+<code QML>
+import QtQuick 2.12; import QtQuick.Controls 2.2
+ApplicationWindow
+{
+    width: 300; height: 300; visible: true;
+    Rectangle
+    {
+        anchors.fill: parent
+        color: mousearea.containsMouse ? "red" : "lightgreen"
+        signal myMouseSignal(int x, int y)
+        onMyMouseSignal:
+        {
+            txt.text= "<h1>X:"+x +"; Y:"+y +"</h1>"
+        }
+        Text
+        {
+            id: txt
+            anchors.centerIn: parent
+        }
+        MouseArea
+        {
+            anchors.fill: parent
+            hoverEnabled: true
+            onMouseXChanged: parent.myMouseSignal(mouseX, mouseY)
+            onMouseYChanged: parent.myMouseSignal(mouseX, mouseY)
+        }
+    }
+}
+</code>
+</details>
+<details>
+<summary>:!: Пример: Собственный элемент+ передача сигнала наружу</summary>
+<code QML>
+// Файл button.qml
+import QtQuick 2.0
+BorderImage
+{
+    property alias text: txt.text
+    signal clicked;
+    source: "qrc:/button.png"
+    width: txt.width +15
+    height: txt.height +15
+    border {left: 15; top: 12; right: 15; bottom: 15}
+    Text
+    {
+        id: txt
+        color: "white"
+        anchors.centerIn: parent
+    }
+    MouseArea
+    {
+        anchors.fill: parent
+        onClicked: parent.clicked();
+        onPressed: parent.source= "button-press.png"
+        onReleased: parent.source= "button.png"
+    }
+}
+// Основной файл
+import QtQuick 2.12; import QtQuick.Controls 2.2
+ApplicationWindow
+{
+    width: 150; height: 100; visible: true;
+    Rectangle
+    {
+        anchors.fill: parent
+        Button
+        {
+            anchors.centerIn: parent
+            text: "Click this"
+            onClicked: text= "Clicked"
+        }
+    }
+}
+</code>
+</details>
+==== Ввод с клавиатуры ====
 ----
+В основном ввод с клавиатуры обрабатывается двумя элементами: **TextInput** (однострочный) и **TextEdit** (многострочный).\\
+Размер элемента будет соответствовать введенному тексту, что бы при пустом вводе элемент не исчезал, нужно задавать мин.ширину
+<details>
+<summary>:!: Пример: Простое поле ввода текста</summary>
+<code QML>
+import QtQuick 2.12; import QtQuick.Controls 2.2
+ApplicationWindow
+{
+    width: txt.width + 20; height: 100; visible: true;
+    Rectangle
+    {
+        anchors.fill: parent
+        TextInput
+        {
+            id: txt
+            anchors.centerIn: parent
+            color: "red"
+            text: "Text in this"
+            font.pixelSize: 32
+            focus: true
+        }
+    }
+}
+</code>
+</details>
-====  ====
+==== Фокус ====
 ----
+Если на форме один элемент, он получает фокус автоматом, далее, фокус можно изменить ручным выбором мышкой либо табом. Програмно можно воспользоваться свойством **focus**.\\
+Нетекстовые элементы так же могут иметь фокус.\\
+Для управления порядком фокуса табом, используется т.н. прикрепляемое свойство "**KeyNavigation.tab: <FocusThisElement>**". В этом свойстве так же доступны клавиши типа **KeyNavigation.left**, **KeyNavigation.right**, **KeyNavigation.up**, **KeyNavigation.down** и т.д.\\
+<details>
+<summary>:!: Пример: Два поля ввода, выделение их фокусировки</summary>
+<code QML>
+import QtQuick 2.12; import QtQuick.Controls 2.2
+ApplicationWindow
+{
+    width: 200; height: 80; visible: true;
+    Rectangle
+    {
+        anchors.fill: parent
+        TextEdit
+        {
+            anchors
+            {
+                left: parent.left
+                right: parent.horizontalCenter
+                top: parent.top
+                bottom: parent.bottom
+            }
+            text: "Text1\nText1\nText1"
+            font.pixelSize: 20
+            color: focus ? "red":"black"
+            focus: true
+        }
+        TextEdit
+        {
+            anchors
+            {
+                left: parent.horizontalCenter
+                right: parent.right
+                top: parent.top
+                bottom: parent.bottom
+            }
+            text: "Text2\nText2\nText2"
+            font.pixelSize: 20
+            color: focus ? "red":"black"
+        }
+    }
+}
+</code>
+</details>
+==== Сырой ввод ====
+----
+С помощью прикрепляемого свойства **Keys** можно получить доступ к событиям клавиатуры, с полной информацией о событии.\\
+<details>
+<summary>:!: Пример: Перемещение элемента с помощью клавиш-стрелок</summary>
+<code QML>
+import QtQuick 2.12; import QtQuick.Controls 2.2
+ApplicationWindow
+{
+    width: 200; height: 80; visible: true;
+    Rectangle
+    {
+        anchors.fill: parent
+        Text
+        {
+            x: 20; y: 20;
+            text: "Move this text"
+            horizontalAlignment: Text.AlignHCenter
+            Keys.onLeftPressed: x -= 3
+            Keys.onRightPressed: x += 3
+            Keys.onUpPressed: y -= 3
+            Keys.onDownPressed: y += 3
+            focus: true
+        }
+    }
+}
+</code>
+</details>
+При помощи **Keys.forwardTo** можно пересылать события другим элементам, для дальнейшей обработки.\\
+<details>
+<summary>:!: Пример: Так же, можно сделать это в одном обработчике</summary>
+<code QML>
+import QtQuick 2.12; import QtQuick.Controls 2.2
+ApplicationWindow
+{
+    width: 200; height: 80; visible: true;
+    Rectangle
+    {
+        anchors.fill: parent
+        Text
+        {
+            x: 20; y: 20;
+            text: "Move this text"
+            horizontalAlignment: Text.AlignHCenter
+            focus: true
+            Keys.onPressed:
+            {
+                if(event.key === Qt.Key_Left) { x -= 3; }
+                else if(event.key === Qt.Key_Right) { x += 3; }
+                else if(event.key === Qt.Key_Down) { y += 3; }
+                else if(event.key === Qt.Key_Up) {y -= 3; }
+                else if(event.key === Qt.Key_Plus) {font.pixelSize++; }
+                else if(event.key === Qt.Key_Minus) {font.pixelSize--; }
+            }
+        }
+    }
+}
+</code>
+</details>
+==== Мультитач ====
+----
+Область региона- **MultiPointTouchArea**. Он содержит в себе элементы обработки события касания- **TouchPoint**, их должно быть столько, сколько одновременных касаний мы собираемся принимать, его можно сравнить с **MouseArea**.\\
+<details>
+<summary>:!: Пример: Обработка пяти одновременных касаний</summary>
+<code QML>
+import QtQuick 2.12; import QtQuick.Controls 2.2
+ApplicationWindow
+{
+    width: 400; height: 400; visible: true
+    Rectangle
+    {
+        anchors.fill: parent
+        color: "black"
+        MultiPointTouchArea
+        {
+            anchors.fill: parent
+            minimumTouchPoints: 1
+            maximumTouchPoints: 5
+            touchPoints:
+            [
+                TouchPoint {},
+                TouchPoint {},
+                TouchPoint {},
+                TouchPoint {},
+                TouchPoint {}
+            ]
+            Repeater
+            {
+                model: parent.touchPoints
+                Rectangle
+                {
+                    color: "white"
+                    x: modelData.x; y: modelData.y
+                    width: 30; height: 30
+                    visible: modelData.pressed
+                }
+            }
+        }
+    }
+}
+</code>
+</details>
+Так же, у **TouchPoint** есть следующие св-ва:
+| pressed | При касании == true |
+| pressure | Сила нажатия (не все устр-ва поддерживают) |
+| previous{X,Y} | Пред координаты касания |
+| start{X,Y} | Начальные координаты касания |
+| x,y | Текущие координаты касания |
+===== Анимация =====
+==== Анимация при изменении свойств ====
+----
+Для анимации свойств существует элемент **PropertyAnimation**, с ним можно менять сразу **несколько свойств одновременно**.\\
+<details>
+<summary>:!: Пример: Одновременное изменение **x** и **y**</summary>
+<code QML>
+import QtQuick 2.12; import QtQuick.Controls 2.2
+ApplicationWindow
+{
+    width: 400; height: 400; visible: true
+    Rectangle
+    {
+        anchors.fill: parent
+        color: "lightgreen"
+        Image
+        {
+            id: img
+            x: 0; y: 0;
+            source: "qrc:/button.png"
+        }
+        PropertyAnimation
+        {
+            target: img
+            properties: "x,y"
+            // Начальное и конечное значение для св-в
+            from: 0; to: 400 - img.height
+            // Длительность мс
+            duration: 1500
+            running: true
+            loops: Animation.Infinite
+            // Режим. скорость и т.д. есть интерактивный редактор
+            easing.type: Easing.OutExpo
+        }
+    }
+}
+</code>
+</details>
+=== Изменение числовых значений ===
+----
+Более эффективная реализация для **real** и **int**.\\
+<details>
+<summary>:!: Пример: Изменение размера вложенного прямоугольника x2</summary>
+<code QML>
+import QtQuick 2.12; import QtQuick.Controls 2.2
+ApplicationWindow
+{
+    width: 300; height: 100; visible: true
+    Rectangle
+    {
+        id: par
+        anchors.fill: parent
+        color: "lightgreen"
+        Rectangle
+        {
+            x: 0; y: 0;
+            height: 100
+            color: "red"
+            NumberAnimation on width
+            {
+                id: anim1
+                from: 300; to: 0
+                duration: 2000
+                easing.type: Easing.InOutCubic
+                onStopped:
+                {
+                    anim2.start()
+                }
+            }
+            NumberAnimation on width
+            {
+                id: anim2
+                from: 0; to: 300
+                duration: 2000
+                easing.type: Easing.InOutCubic
+                running: false
+                onStopped:
+                {
+                    anim1.start()
+                }
+            }
+        }
+    }
+}
+</code>
+</details>
+=== Изменение цвета ===
+----
+**ColorAnimation** управляет изменением цвета, так же используется **from** и **to**.\\
+<details>
+<summary>:!: Пример: Изменение цвета</summary>
+<code QML>
+import QtQuick 2.12; import QtQuick.Controls 2.2
+ApplicationWindow
+{
+    width: 300; height: 100; visible: true
+    Rectangle
+    {
+        anchors.fill: parent
+        ColorAnimation on color
+        {
+            from: "lightgreen"
+            to: "red"
+            duration: 1500
+            running: true
+            loops: Animation.Infinite
+        }
+    }
+}
+</code>
+</details>
+=== Поворот ===
+----
+**RotationAnimation** описывает поворот элемента.\\
+Его свойство **direction** задает направление поворота:
+| RotationAnimation.Clockwise | по часовой (по умолчанию) |
+| RotationAnimation.Counterclockwise | против часовой |
+| RotationAnimationShortest | угол поворота в наименьшую сторону исходя из "from-to" |
+<details>
+<summary>:!: Пример: Поворот по часовой стрелке</summary>
+<code QML>
+import QtQuick 2.12; import QtQuick.Controls 2.2
+ApplicationWindow
+{
+    width: 150; height: 150; visible: true
+    Rectangle
+    {
+        anchors.fill: parent
+        Image
+        {
+            source: "qrc:/button.png"
+            anchors.centerIn: parent
+            smooth: true
+            RotationAnimation on rotation
+            {
+                from: 0
+                to: 360
+                duration: 2000
+                loops: Animation.Infinite
+                easing.type: Easing.InOutBack
+            }
+        }
+    }
+}
+</code>
+</details>
+==== Анимация поведения ====
+----
+**Behavior** реагирует на изменение свойств элементов, соответственно в эти моменты может вызывать другую анимацию и т.д.\\
+В следующем примере, **Behavior** реагирует на изменение **x** и **y** у изображения, внутри другой элемент анимации, изменение же свойств изображения вызывается из событиями мыши в **MouseArea**
+<details>
+<summary>:!: Пример: Анимация вызывается поведением </summary>
+<code QML>
+import QtQuick 2.12; import QtQuick.Controls 2.2
+ApplicationWindow
+{
+    width: 360; height: 360; visible: true
+    Rectangle
+    {
+        id: rect
+        anchors.fill: parent
+        Image
+        {
+            id: img
+            x: 10; y: 10;
+            source: "qrc:/button.png"
+            smooth: true
+            Text
+            {
+                anchors.verticalCenter: img.verticalCenter
+                anchors.top: img.bottom
+                text: "Move cursor"
+            }
+            Behavior on x
+            {
+                NumberAnimation
+                {
+                    duration: 500
+                    easing.type: Easing.OutBack
+                }
+            }
+            Behavior on y
+            {
+                NumberAnimation
+                {
+                    duration: 500
+                    easing.type: Easing.OutBack
+                }
+            }
+        }
+        MouseArea
+        {
+            anchors.fill: rect
+            hoverEnabled: true
+            onMouseXChanged: img.x= mouseX
+            onMouseYChanged: img.y= mouseY
+        }
+    }
+}
+</code>
+</details>
+==== Параллельные и последовательные анимации ====
+----
+Анимации могут быть объединены в группы, эти группы выполняются **последовательно** (SequentialAnimation) либо **параллельно** (ParallelAnimation). Группы могут быть вложенными друг в друга. Если элемент группы не указан, анимации выполняются параллельно.\\
+<details>
+<summary>:!: Пример: Параллельная анимация. Увеличение размера и прозрачность</summary>
+<code QML>
+import QtQuick 2.12; import QtQuick.Controls 2.2
+ApplicationWindow
+{
+    width: 360; height: 360; visible: true
+    Rectangle
+    {
+        anchors.fill: parent
+        Image
+        {
+            id: img
+            source: "qrc:/button.png"
+            smooth: true
+            anchors.centerIn: parent
+        }
+        ParallelAnimation
+        {
+            NumberAnimation
+            {
+                target: img
+                properties: "scale"
+                from: 0.1
+                to: 3.0
+                duration: 2000
+                easing.type: Easing.InOutCubic
+            }
+            NumberAnimation
+            {
+                target: img
+                properties: "opacity"
+                from: 1.0
+                to: 0
+                duration: 2000
+            }
+            running: true
+            loops: Animation.Infinite
+        }
+    }
+}
+</code>
+</details>
+<details>
+<summary>:!: Пример: Тоже самое, но немного другой подход </summary>
+<code QML>
+import QtQuick 2.12; import QtQuick.Controls 2.2
+ApplicationWindow
+{
+    width: 360; height: 360; visible: true
+    Rectangle
+    {
+        anchors.fill: parent
+        Image
+        {
+            id: img
+            source: "qrc:/button.png"
+            smooth: true
+            anchors.centerIn: parent
+            NumberAnimation on scale
+            {
+                from: 0.1
+                to: 3.0
+                duration: 2000
+                easing.type: Easing.InOutCubic
+                loops: Animation.Infinite
+            }
+            NumberAnimation on opacity
+            {
+                from: 1.0
+                to: 0
+                duration: 2000
+                loops: Animation.Infinite
+            }
+        }
+    }
+}
+</code>
+</details>
+Пример последовательной анимации: После нажатия мыши объект упадет вниз, повернется вокруг своей оси, полежит немного, затем поднимется обратно вверх:
+<details>
+<summary>:!: Пример: </summary>
+<code QML>
+import QtQuick 2.12; import QtQuick.Controls 2.2
+ApplicationWindow
+{
+    width: 130; height: 450; visible: true
+    Rectangle
+    {
+        anchors.fill: parent
+        Image
+        {
+            id: img
+            source: "qrc:/button.png"
+            smooth: true
+            Text
+            {
+                anchors.horizontalCenter: parent.horizontalAlignment
+                anchors.top: parent.bottom
+                text: "Click for do it"
+            }
+            MouseArea
+            {
+                anchors.fill: img
+                onClicked: anim.running= true
+            }
+            SequentialAnimation
+            {
+                id: anim
+                NumberAnimation
+                {
+                    target: img
+                    from: 20; to: 300;
+                    properties: "y"
+                    duration: 1000
+                    easing.type: Easing.OutBounce
+                }
+                RotationAnimation
+                {
+                    target: img
+                    from: 0; to: 360;
+                    properties: "rotation"
+                    duration: 1000
+                }
+                PauseAnimation {duration: 500}
+                NumberAnimation
+                {
+                    target: img
+                    from: 300; to: 20;
+                    properties: "y"
+                    duration: 1000
+                    easing.type: Easing.OutBounce
+                }
+            }
+        }
+    }
+}
+</code>
+</details>
+==== Состояния и переходы ====
+=== Состояния ===
+----
+Управлять состоянием можно при помощи элемента **State**, поддерживает наборы списков, описания элементов с набором их состояний.\\
+Все объекты **обязательно** должны быть **именованными**.\\
+Список состояний присваивается свойству **states** а необходимый набор присваивается свойству **state**, так и происходит смена состояний.\\
+Изменение свойств внутри состояния перечисляется в в элементе **PropertyChanges**
+<details>
+<summary>:!: Пример: Два определенных состояния прямоугольника и смена между ними</summary>
+<code QML>
+import QtQuick 2.12; import QtQuick.Controls 2.2
+ApplicationWindow
+{
+    width: 360; height: 360; visible: true
+    Rectangle
+    {
+        anchors.fill: parent
+        Rectangle
+        {
+            id: rect
+            state: "State2"
+            Text
+            {
+                id: txt
+                anchors.centerIn: parent
+            }
+        }
+        states:
+        [
+            State
+            {
+                name: "State1"
+                PropertyChanges
+                {
+                    target: rect
+                    color: "lightgreen"
+                    width: 150; height: 60;
+                }
+                PropertyChanges
+                {
+                    target: txt
+                    text: "State2: Click"
+                }
+            },
+            State
+            {
+                name: "State2"
+                PropertyChanges
+                {
+                    target: rect
+                    color: "yellow"
+                    width: 200; height: 120;
+                }
+                PropertyChanges
+                {
+                    target: txt
+                    text: "State1: Click"
+                }
+            }
+        ]
+        MouseArea
+        {
+            anchors.fill: parent
+            onClicked: parent.state= (parent.state== "State1") ? "State2":"State1"
+        }
+    }
+}
+</code>
+</details>
+==== Переходы ====
+----
+Свойство **transitions** задает список переходов, в списке задаем элементы **Transition**, каждый элемент содержит два момента:
+  * **from / to** - начальное/конечное состояние перехода (**States**, рассмотренные выше)
+  * **PropertyAnimation** - управление анимацией перехода
+<details>
+<summary>:!: Пример: Переход между состояниями</summary>
+<code QML>
+import QtQuick 2.12; import QtQuick.Controls 2.2
+ApplicationWindow
+{
+    width: 360; height: 360; visible: true
+    Rectangle
+    {
+        anchors.fill: parent
+        Rectangle
+        {
+            id: rect
+            width: 100; height: 100
+            color: "magenta"
+            state: "State1"
+            Text
+            {
+                anchors.centerIn: parent
+                text: "Click this"
+            }
+            MouseArea
+            {
+                anchors.fill: parent
+                onClicked: rect.state = (rect.state == "State1") ? "State2":"State1"
+            }
+            states:
+            [
+                State
+                {
+                    name: "State1"
+                    PropertyChanges {target: rect; x: 0; y: 0}
+                },
+                State
+                {
+                    name: "State2"
+                    PropertyChanges {target: rect; x: 200; y: 200}
+                }
+            ]
+            transitions:
+            [
+                Transition
+                {
+                    from: "State1"; to: "State2";
+                    PropertyAnimation
+                    {
+                        target: rect;
+                        properties: "x,y";
+                        duration: 1000
+                        easing.type: Easing.OutBack
+                    }
+                },
+                Transition
+                {
+                    from: "State2"; to: "State1";
+                    PropertyAnimation
+                    {
+                        target: rect;
+                        properties: "x,y";
+                        duration: 1000
+                        easing.type: Easing.InBounce
+                    }
+                }
+            ]
+        }
+    }
+}
+</code>
+</details>
+Если свойства перехода будут одинаковыми, тогда можно использовать **шаблонный переход**:
+<details>
+<summary>:!: Пример: Тоже самое только шаблонный переход</summary>
+<code QML>
+import QtQuick 2.12; import QtQuick.Controls 2.2
+ApplicationWindow
+{
+    width: 300; height: 300; visible: true
+    Rectangle
+    {
+        anchors.fill: parent
+        Rectangle
+        {
+            id: rect
+            width: 100; height: 100
+            color: "magenta"
+            state: "State1"
+            Text
+            {
+                anchors.centerIn: parent
+                text: "Click this"
+            }
+            MouseArea
+            {
+                anchors.fill: parent
+                onClicked: rect.state = (rect.state == "State1") ? "State2":"State1"
+            }
+            states:
+            [
+                State
+                {
+                    name: "State1"
+                    PropertyChanges {target: rect; x: 0; y: 0}
+                },
+                State
+                {
+                    name: "State2"
+                    PropertyChanges {target: rect; x: 200; y: 200}
+                }
+            ]
+            transitions:
+            [
+                Transition
+                {
+                    from: "*"; to: "*";
+                    PropertyAnimation
+                    {
+                        target: rect;
+                        properties: "x,y";
+                        duration: 1000
+                        easing.type: Easing.OutBack
+                    }
+                }
+            ]
+        }
+    }
+}
+</code>
+</details>
+==== Модуль частиц ====
+----
+Движок для работы с частицами, в роли частиц могут выступать картинки и т.д.
+<details>
+<summary>:!: Пример: Кнопкопад</summary>
+<code QML>
+import QtQuick 2.12; import QtQuick.Controls 2.2; import QtQuick.Particles 2.0
+ApplicationWindow
+{
+    width: 360; height: 360; visible: true
+    Rectangle
+    {
+        anchors.fill: parent
+        color: "MidnightBlue"
+        ParticleSystem
+        {
+            anchors.fill: parent
+            ImageParticle
+            {
+                source: "qrc:/button.png"
+            }
+            Emitter
+            {
+                width: parent.width
+                height: parent.height
+                anchors.bottom: parent.bottom
+                lifeSpan: 10000
+                sizeVariation: 16
+                emitRate: 20
+                velocity: AngleDirection
+                {
+                    angle: 90
+                    angleVariation: 10
+                    magnitude: 100
+                }
+            }
+        }
+    }
+}
+</code>
+</details>

zxcx

Инструменты пользователя

Инструменты сайта

Различия

Инструменты страницы