zxcx

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

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

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

Различия

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

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

Предыдущая версия справа и слева Предыдущая версия
Следующая версия 		Предыдущая версия
develop:qt:quick [2021/08/15 17:55]
admin 		develop:qt:quick [2021/08/31 15:22] (текущий)
admin
Строка 1: Строка 1:
-====== Qt Quick ======+====== Qt Quick: Общее, Элементы, Размещение ======
  
 **Qt Quick** - набор технологий для создания пользовательского интерфейса.\\ **Qt Quick** - набор технологий для создания пользовательского интерфейса.\\
Строка 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** есть аналогичные, но выглядящие более специфично, элементы.\\ 
  
 + 
 ==== Диалоговые окна ==== ==== Диалоговые окна ====
 ---- ----
Строка 319: Строка 318:
 <code QML> <code QML>
 import QtQuick 2.8 import QtQuick 2.8
-import QtQuick.Window 2.2 +//import QtQuick.Window 2.2 
-import QtQuick.Controls 2.0+import QtQuick.Controls 2.2
 import QtQuick.Dialogs 1.2 import QtQuick.Dialogs 1.2
  
-Window+ApplicationWindow // Window
 { {
     visible: true; width: 200; height: 150     visible: true; width: 200; height: 150
Строка 390: Строка 389:
     }     }
 } }
 +
 </code> </code>
 </details> </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>
develop/qt/quick.1629050124.txt.gz · Последнее изменение: 2021/08/15 17:55 — admin

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

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki