Различия

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

--- develop:qt:quick [2021/08/15 10:12]
admin
+++ develop:qt:quick [2021/08/31 15:22] (текущий)
admin
@@ Строка 1: / Строка 1: @@
-====== Qt Quick ======
+====== Qt Quick: Общее, Элементы, Размещение ======
 **Qt Quick** - набор технологий для создания пользовательского интерфейса.\\
@@ Строка 14: / Строка 14: @@
 ===== JavaScript =====
-----
 **Java** интерпретируется и применяется сходу, например тут- **"width: parent.width / 5"**, значение сначала высчитывается, на **java**, после этого присваивается свойству.\\
 Можно вставлять целые функции:
@@ Строка 47: / Строка 47: @@
 <details>
 <summary>:!: Пример: Простое окно с полем ввода </summary>
 <code QML>
 import QtQuick 2.12
@@ Строка 83: / Строка 82: @@
 </details>
 ===== Объекты =====
 ==== Не визуальные ====
 ----
@@ Строка 94: / Строка 92: @@
 | [Mouse; Drop; Pinch; MultiPointTouch]Area; [Mouse; Key]Event; etc | Пользовательский ввод |
 ==== Визуальные ====
 ----
@@ Строка 142: / Строка 140: @@
 </details>
 ==== Свойства элементов ====
 ----
@@ Строка 160: / Строка 158: @@
 <details>
 <summary>:!: Пример: Взаимосвязанные свойства объектов </summary>
 <code QML>
 import QtQuick 2.8
@@ Строка 191: / Строка 188: @@
 </details>
 === Собственные свойства ===
 ----
@@ Строка 199: / Строка 196: @@
 Необходимо указывать **типы данных**, они строго типизированы (bool, double, enumeration, int, list, real, string, time, url, var, color, date, font, matrix4x4, point, rect, size, Vercor[2,3,4]d).\\
 ==== Собственные элементы ====
 ----
@@ Строка 208: / Строка 205: @@
 <details>
 <summary>:!: Пример: Собственный элемент </summary>
 <code QML>
 // Описание элемента в отдельном файле, в папке в проектом
@@ Строка 247: / Строка 243: @@
 </details>
+==== Собственные модули ====
+----
+Коллекции QML элементов можно объединять в модули и использовать повторно, подключив директивой **import**.\\
+Располагают их в отдельной папке, создают файл **qmldir** с картой описания qml файлов элементов, с указанием версии.\\
+==== Динамическое создание элементов ====
+----
+Элемент **Repeater** позволяет производить элементы используя любой тип модели данных (число, массив, набор JSON), это инструкция к созданию, а элемент внутри, является шаблоном.\\
-====  ====
+<details>
+<summary>:!: Пример: 4 элемента в столбик, из массива значений</summary>
+<code QML>
+import QtQuick 2.8
+import QtQuick.Window 2.2
+Window
+{
+    visible: true; width: 360; height: 360
+    Repeater
+    {
+        model: ["one", "two", "three", "four"]
+        Text
+        {
+            text: modelData // обращение к массиву значений
+            y: index * 20 // index - номер текущего элемента
+        }
+    }
+}
+</code>
+</details>
-====  ====
+**Flickable** - типа скроллбара, в нем можно располагать элементы большого размера
+==== Готовые элементы ====
+----
+В модуле **QtQuick.Controls** содержится ряд готовых элементов GUI.\\
+Такие элементы как: CheckBox, DelayButton, RadioButton, PoundButton, Switch, ToolButton, Button, BusyIndicator, ComboBox, Dial, Label, PageIndicator, ProgressBar, RangeSlider, Slider, SpinButton, ToolBar, Tumbler.\\
-====  ====
+Область основного окна делится на три зоны: Верхняя (header), Нижняя (footer) и Рабочая (в середине)
+<details>
+<summary>:!: Пример: Элементы в трех зонах</summary>
+<code QML>
+import QtQuick 2.8
+import QtQuick.Window 2.2
+Window
+{
+    visible: true; width: 360; height: 360
+    header: ToolBar
+    {
+        //AnyElements
+    }
+    footer: ToolBar
+    {
+        //AnyElements
+    }
+    //AnyElements in Center
+}
+</code>
+</details>
+Так же, в модуле **QtQuick.Extras** есть аналогичные, но выглядящие более специфично, элементы.\\
+==== Диалоговые окна ====
+----
+В основном это: **FileDialog**, **FontDialog**, **ColorDialog** и **MessageDialog**.\\
+<details>
+<summary>:!: Пример: Три диалога, после выбора месседж с выбранным вариантом</summary>
+<code QML>
+import QtQuick 2.8
+//import QtQuick.Window 2.2
+import QtQuick.Controls 2.2
+import QtQuick.Dialogs 1.2
+ApplicationWindow // Window
+{
+    visible: true; width: 200; height: 150
+    Repeater
+    {
+        id: repeater
+        model: [colorDialog, fontDialog, fileDialog]
+        Button
+        {
+            y: index * (parent.height / repeater.count)
+            height: parent.height / repeater.count
+            width: parent.width
+            text: modelData.title
+            onClicked:
+            {
+                messageDialog.visible = false
+                modelData.visible = true
+            }
+        }
+    }
+    ColorDialog
+    {
+        id: colorDialog
+        visible: false
+        modality: Qt.WindowModal
+        title: "Select color"
+        color: "blue"
+        onAccepted:
+        {
+            messageDialog.informativeText = "Selected color: "+ color
+            messageDialog.visible = true
+        }
+    }
+    FontDialog
+    {
+        id: fontDialog
+        visible: false
+        modality: Qt.WindowModal
+        title: "Select font"
+        onAccepted:
+        {
+            messageDialog.informativeText = "Selected font: "+ font
+            messageDialog.visible = true
+        }
+    }
+    FileDialog
+    {
+        id: fileDialog
+        visible: false
+        modality: Qt.WindowModal
+        title: "Select file"
+        folder: "C:\\Users\\"
+        nameFilters: ["All files (*)"]
+        onAccepted:
+        {
+            messageDialog.informativeText = "Selected file: "+ fileUrls
+            messageDialog.visible = true
+        }
+    }
+    MessageDialog
+    {
+        id: messageDialog
+        visible: false
+        modality: Qt.NonModal
+        title: "Message"
+    }
+}
+</code>
+</details>
+===== Управление размещением =====
+==== Фиксаторы ====
+----
+**Фиксатор (anchors)** позволяет определить расположение одного элемента относительно других.\\
+В **QML** все элементы вложены друг в друга и располагаются элементы относительно своего родителя.\\
+Для фиксации можно использовать свойства: left, right, top, bottom, {horizontal,vertical}Center
+<details>
+<summary>:!: Пример: Размещение элемента в центре родителя</summary>
+<code QML>
+import QtQuick 2.12; import QtQuick.Window 2.12
+Window
+{
+    width: 640; height: 480; visible: true;
+    Rectangle
+    {
+        anchors.fill: parent
+        Text
+        {
+            text: "This is text in text-element"
+            anchors.centerIn: parent
+            // или аналогично:
+            //anchors.horizontalCenter: parent.horizontalCenter
+            //anchors.verticalCenter: parent.verticalCenter
+        }
+    }
+}
+</code>
+</details>
+Эти же свойства можно использовать для заполнения элементом области
+<details>
+<summary>:!: Пример: Заполнение области</summary>
+<code QML>
+import QtQuick 2.12; import QtQuick.Window 2.12
+Window
+{
+    width: 640; height: 480; visible: true;
+    Rectangle
+    {
+        // Для группы свойств
+        anchors
+        {
+            left: parent.left
+            right: parent.right
+            top: parent.top
+            bottom: parent.bottom
+        }
+        // Аналогично
+        //anchors.fill: parent
+    }
+}
+</code>
+</details>
+<details>
+<summary>:!: Пример: Размещение двух элементов с перекрытием (наложением)</summary>
+<code QML>
+import QtQuick 2.12; import QtQuick.Controls 2.2
+ApplicationWindow
+{
+    width: 640; height: 480; visible: true;
+    Rectangle
+    {
+        anchors.fill: parent
+        Rectangle
+        {
+            id: firstRec
+            color: "red"
+            width: parent.width / 1.5
+            height: parent.height / 1.5
+            anchors.left: parent.left
+            anchors.top: parent.top
+        }
+        Rectangle
+        {
+            opacity: 0.5
+            color: "blue"
+            anchors
+            {
+                top: firstRec.verticalCenter
+                left: firstRec.horizontalCenter
+                right: parent.right
+                bottom: parent.bottom
+            }
+        }
+    }
+}
+</code>
+</details>
+<details>
+<summary>:!: Пример: Два элемента по краям, третий заполняет центр + отступы</summary>
+<code QML>
+import QtQuick 2.12; import QtQuick.Controls 2.2
+ApplicationWindow
+{
+    width: 640; height: 480; visible: true;
+    Rectangle
+    {
+        anchors.fill: parent
+        Rectangle
+        {
+            id: leftrec
+            width: 60
+            color: "blue"
+            anchors
+            {
+                left: parent.left
+                top: parent.top
+                bottom: parent.bottom
+                topMargin: 10
+                bottomMargin: 10
+            }
+        }
+        Rectangle
+        {
+            id: rightrec
+            width: 60
+            color: "blue"
+            anchors
+            {
+                right: parent.right
+                top: parent.top
+                bottom: parent.bottom
+                topMargin: 10
+                bottomMargin: 10
+            }
+        }
+        Rectangle
+        {
+            id: centerrec
+            color: "green"
+            anchors
+            {
+                top: parent.top
+                bottom: parent.bottom
+                left: leftrec.right
+                right: rightrec.left
+            }
+        }
+    }
+}
+</code>
+</details>
+==== Традиционные размещения ====
+----
+Размещения являются элементами
+| Row, RowLayout | Горизонтальное размещение, аналог QHBoxLayout |
+| Column, ColumnLayout | Вертикальное размещение, аналог QVBoxLayout |
+| Grid, GridLayout | Табличное размещение, аналог QGridLayout |
+| StackLayout | Одновременно можно видеть только один элемент, аналог QStackLayout |
+Содержат свойства **spacing** и **layoutDirection**, для установки промежутков и управления направлением размещения.\\
+Элементы со словом **layout**, содержатся в модуле **QtQuick.Layouts** и обладают доп. свойством **Layout**:
+| .minimum{Width,Heigth} | минимальная ширина/высота |
+| .maximum{Width,Heigth} | максимальная ширина/высота |
+| .preferred{Width,Heigth} | предпочтительная ширина/высота |
+| .fill{Width,Heigth} | заполнение по ширине/высоте элемента |
+<details>
+<summary>:!: Пример: Горизонтальное размещение</summary>
+<code QML>
+import QtQuick 2.12; //import QtQuick.Window 2.12
+import QtQuick.Controls 2.2
+ApplicationWindow
+{
+    width: 640; height: 480; visible: true;
+    Rectangle
+    {
+        anchors.fill: parent
+        Row
+        {
+            anchors.centerIn: parent
+            spacing: 10
+            Rectangle
+            {
+                width: 64; height: 64; color: "red"
+            }
+            Rectangle
+            {
+                width: 64; height: 64; color: "yellow"
+            }
+            Rectangle
+            {
+                width: 64; height: 64; color: "green"
+            }
+        }
+    }
+}
+</code>
+</details>
+<details>
+<summary>:!: Пример: Горизонтальное размещение RowLayout+ замещение элементами</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
+        RowLayout
+        {
+            anchors.fill: parent
+            spacing: 10
+            Layout.margins: 10
+            Rectangle
+            {
+                Layout.minimumWidth: 64; Layout.minimumHeight: 64; color: "red"; Layout.fillHeight: true
+            }
+            Rectangle
+            {
+                Layout.minimumWidth: 64; Layout.minimumHeight: 64; color: "yellow"; Layout.fillWidth: true
+            }
+            Rectangle
+            {
+                Layout.minimumWidth: 64; Layout.minimumHeight: 64; color: "green"; Layout.fillHeight: true
+            }
+        }
+    }
+}
+</code>
+</details>
+==== Размещение в виде потока ====
+----
+Упорядочивает элементы змейкой, пытаясь уместить их как можно больше.\\
+<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
+        Flow
+        {
+            anchors.fill: parent
+            anchors.margins: 20
+            spacing: 20
+            Repeater
+            {
+                model:
+                {
+                    var v = new Array(10);
+                    for(var i= 0; i < v.length; ++i)
+                        v[i]= i % 2 ? "green" : "red"
+                    return v;
+                }
+                Rectangle
+                {
+                    width: 64; height: 64; radius: 32; color: modelData
+                    Text
+                    {
+                        color: "white"; font.pixelSize: 48; font.family: "Courier"; anchors.centerIn: parent; text: index
+                    }
+                }
+            }
+        }
+    }
+}
+</code>
+</details>

zxcx

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

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

Различия

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