zxcx

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

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

Вы находитесь здесь: e-Info » Разработка » QT C++ » Qt Quick: Общее, Элементы, Размещение
develop:qt:quick

Различия

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

Ссылка на это сравнение

Предыдущая версия справа и слева Предыдущая версия
Следующая версия 		Предыдущая версия
develop:qt:quick [2021/08/22 15:12]
admin 		develop:qt:quick [2021/08/31 15:22] (текущий)
admin
Строка 14: Строка 14:
  
 ===== JavaScript ===== ===== JavaScript =====
-----+
 **Java** интерпретируется и применяется сходу, например тут- **"width: parent.width / 5"**, значение сначала высчитывается, на **java**, после этого присваивается свойству.\\ **Java** интерпретируется и применяется сходу, например тут- **"width: parent.width / 5"**, значение сначала высчитывается, на **java**, после этого присваивается свойству.\\
 Можно вставлять целые функции: Можно вставлять целые функции:
Строка 82: Строка 82:
 </details> </details>
  
 + 
 ===== Объекты ===== ===== Объекты =====
- 
 ==== Не визуальные ==== ==== Не визуальные ====
 ---- ----
Строка 93: Строка 92:
 | [Mouse; Drop; Pinch; MultiPointTouch]Area; [Mouse; Key]Event; etc | Пользовательский ввод | | [Mouse; Drop; Pinch; MultiPointTouch]Area; [Mouse; Key]Event; etc | Пользовательский ввод |
  
 + 
 ==== Визуальные ==== ==== Визуальные ====
 ---- ----
Строка 141: Строка 140:
 </details> </details>
  
 + 
 ==== Свойства элементов ==== ==== Свойства элементов ====
 ---- ----
Строка 189: Строка 188:
 </details> </details>
  
 + 
 === Собственные свойства === === Собственные свойства ===
 ---- ----
Строка 197: Строка 196:
 Необходимо указывать **типы данных**, они строго типизированы (bool, double, enumeration, int, list, real, string, time, url, var, color, date, font, matrix4x4, point, rect, size, Vercor[2,3,4]d).\\ Необходимо указывать **типы данных**, они строго типизированы (bool, double, enumeration, int, list, real, string, time, url, var, color, date, font, matrix4x4, point, rect, size, Vercor[2,3,4]d).\\
  
 + 
 ==== Собственные элементы ==== ==== Собственные элементы ====
 ---- ----
Строка 244: Строка 243:
 </details> </details>
  
 + 
 ==== Собственные модули ==== ==== Собственные модули ====
 ---- ----
Строка 250: Строка 249:
 Располагают их в отдельной папке, создают файл **qmldir** с картой описания qml файлов элементов, с указанием версии.\\ Располагают их в отдельной папке, создают файл **qmldir** с картой описания qml файлов элементов, с указанием версии.\\
  
 + 
 ==== Динамическое создание элементов ==== ==== Динамическое создание элементов ====
 ---- ----
Строка 279: Строка 278:
 **Flickable** - типа скроллбара, в нем можно располагать элементы большого размера **Flickable** - типа скроллбара, в нем можно располагать элементы большого размера
  
 + 
 ==== Готовые элементы ==== ==== Готовые элементы ====
 ---- ----
Строка 310: Строка 309:
 Так же, в модуле **QtQuick.Extras** есть аналогичные, но выглядящие более специфично, элементы.\\  Так же, в модуле **QtQuick.Extras** есть аналогичные, но выглядящие более специфично, элементы.\\ 
  
 + 
 ==== Диалоговые окна ==== ==== Диалоговые окна ====
 ---- ----
Строка 394: Строка 393:
 </details> </details>
  
- + 
 ===== Управление размещением ===== ===== Управление размещением =====
 ==== Фиксаторы ==== ==== Фиксаторы ====
Строка 548: Строка 546:
 </details> </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>
develop/qt/quick.1629645167.txt.gz · Последнее изменение: 2021/08/22 15:12 — admin

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

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki