Различия

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

--- develop:qt:quick [2021/08/15 06:50]
admin
+++ develop:qt:quick [2021/08/31 15:22] (текущий)
admin
@@ Строка 1: / Строка 1: @@
-====== Qt Quick ======
+====== Qt Quick: Общее, Элементы, Размещение ======
 **Qt Quick** - набор технологий для создания пользовательского интерфейса.\\
@@ Строка 24: / Строка 24: @@
           return a > b ? a:b;
      }
      width: maximum(parent.width, 100)
 }
@@ Строка 46: / Строка 45: @@
-===== Примеры =====
+<details>
+<summary>:!: Пример: Простое окно с полем ввода </summary>
-Простое окно с полем ввода
 <code QML>
 import QtQuick 2.12
@@ Строка 59: / Строка 57: @@
     visible: true
     title: "Hello World"
     MouseArea
     {
         anchors.fill: parent
-        onClicked:
+        onClicked: console.log('Clicked on background. Text: "'+ textEdit.text +'"')
-        {
-            console.log('Clicked on background. Text: "'+ textEdit.text +'"')
-        }
     }
     TextEdit
     {
@@ Строка 87: / Строка 80: @@
 }
 </code>
+</details>
 ===== Объекты =====
 ==== Не визуальные ====
+----
 | Column; Row; Grid, Flow, Positioner; etc | Для размещения элементов |
 | Timer; Loader; Connections, WorkerScript; Binding; etc | Инструменты |
@@ Строка 99: / Строка 92: @@
 | [Mouse; Drop; Pinch; MultiPointTouch]Area; [Mouse; Key]Event; etc | Пользовательский ввод |
 ==== Визуальные ====
+----
 | Item | Базовый тип для всех элементов, может выступать в роли окна приложения |
 | Rectangle | Заполненная прямоугольная область, мб с контуром |
@@ Строка 114: / Строка 107: @@
 **Элементы-потомки** отображаются **относительно и внутри** своего **родительского** элемента.
+<details>
+<summary>:!: Пример: 3 уровня элементов</summary>
 <code QML>
 import QtQuick 2.8
@@ Строка 143: / Строка 138: @@
 }
 </code>
+</details>
+==== Свойства элементов ====
+----
+Стандартные свойства для всех элементов:
+| x; y; z; position | Позиционирование |
+| width; height; implicit[Width; Height] | Задание/получение размеров |
+| rotation; scale; clip; transform; smooth; transformOrigin; etc | Графические операции и преобразования |
+| anchors | Фиксация |
+| id; parent | Ссылки на элементы |
+| enabled; focus | Доступность; Фокус |
+| visible; opacity; visibleChildren | Видимость |
+| states; state; transitions | Состояние и переход |
+| layer | Работа со слоями |
+| children; childrenRect | Дочерние элементы |
+| onWidthChanged; onHeightChanged; etc | Методы, вызываемые при изменении свойств, в них можно размещать код |
+<details>
+<summary>:!: Пример: Взаимосвязанные свойства объектов </summary>
+<code QML>
+import QtQuick 2.8
+import QtQuick.Window 2.2
+Window
+{
+    visible: true
+    width: 360
+    height: 360
+    Rectangle
+    {
+        id: redrect
+        color: "red"
+        x: 0
+        y: 0
+        width: parent.width / 2
+        height: parent.height / 2
+    }
+    Rectangle
+    {
+        color: "green"
+        x: redrect.width
+        y: redrect.height
+        width: redrect.width
+        height: redrect.height
+    }
+}
+</code>
+</details>
+=== Собственные свойства ===
+----
+**property <тип> <имя>[:значение]**\\
+Элементам можно задавать собственные свойства. Они могут содержать значения, а так же для них создаются методы **onX** для реагирования на изменения этих свойств.\\
+Необходимо указывать **типы данных**, они строго типизированы (bool, double, enumeration, int, list, real, string, time, url, var, color, date, font, matrix4x4, point, rect, size, Vercor[2,3,4]d).\\
+==== Собственные элементы ====
+----
+Определяются в отдельных файлах, **один файл - один элемент**. Используются так же как и стандартные.\\
+Элементы расположенные в одном каталоге **автоматически доступны** друг для друга.\\
+Из вне будут доступны только свойства базового элемента, но не св-ва вложенных, для этого можно переопределить определить их **алиасом** в базовом элементе.\\
+<details>
+<summary>:!: Пример: Собственный элемент </summary>
+<code QML>
+// Описание элемента в отдельном файле, в папке в проектом
+import QtQuick 2.8
+Rectangle
+{
+    property alias text: txt.text
+    property string name: "TextFielddd"
+    width: txt.width
+    height: txt.height
+    Text
+    {
+        id: txt
+        x: 0
+        y: 0
+    }
+}
+</code>
+<code QML>
+// Использование элемента
+import QtQuick 2.8
+import QtQuick.Window 2.2
+Window
+{
+    visible: true; width: 360; height: 360
+    TextField
+    {
+        x: 10
+        y: 20
+        color: "yellow"
+        text: "This Text in myTextField<br>Second String"
+        border.width: 1
+    }
+}
+</code>
+</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

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

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

Различия

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