Qt Quick

Qt Quick - набор технологий для создания пользовательского интерфейса.

Подход основан на использовании описательного языка QML (Qt Meta-object Language). Принцип схож с форматом JSON.
В QML встроен интерпретатор JavaScript, поэтому легко принимает вставки данного языка.
QML содержит множество модулей, как общих для QT так и своих, подключаемых директивой import.

Объекты в QML располагаются древовидной структурой.
Объекты содержат свойства в формате ключ: значение, доступ к объекту можно получить через идентификатор id, к родителю можно обращаться через parent.

В среде Qt Creator вроде как можно работать с QML интерактивно.

JavaScript

Java интерпретируется и применяется сходу, например тут- «width: parent.width / 5», значение сначала высчитывается, на java, после этого присваивается свойству.
Можно вставлять целые функции:

Rectangle
{
     function maximum(a, b)
     {
          return a > b ? a:b;
     }
     width: maximum(parent.width, 100)
}

Функции можно импортировать из внешних файлов

import "myfile.js" as MyScripts
(...)
Rectangle
{     
     width: MyScripts.maximum(parent.width, 100)
}

Есть ряд полезных функций для отладки:

console.count()	Кол-во вызова кода
console.[debug(); log(); info(); error(); warn()]; print()	Вывод сообщений
console.[time(); timeEnd()]	Замер времени
console.trace()	Цепочка вызовов java не более 10

Пример: Простое окно с полем ввода

import QtQuick 2.12
import QtQuick.Window 2.12
 
Window
{
    width: 640
    height: 480
    visible: true
    title: "Hello World"
    MouseArea
    {
        anchors.fill: parent
        onClicked: console.log('Clicked on background. Text: "'+ textEdit.text +'"')
    }
    TextEdit
    {
        id: textEdit
        text: "Enter your text123.."
        verticalAlignment: Text.AlignVCenter
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalLeft
        anchors.topMargin: 15
        Rectangle
        {
            anchors.fill: parent
            anchors.margins: -10
            color: "transparent"
            border.width: 1
        }
    }
}

Объекты

Не визуальные

Column; Row; Grid, Flow, Positioner; etc	Для размещения элементов
Timer; Loader; Connections, WorkerScript; Binding; etc	Инструменты
[Property; Number; Color; Parallel]Animation; etc	Анимация
[List; Xml; VisualData; VusialItem]Model; ListElement; etc	Модели
[Mouse; Drop; Pinch; MultiPointTouch]Area; [Mouse; Key]Event; etc	Пользовательский ввод

Визуальные

Item	Базовый тип для всех элементов, может выступать в роли окна приложения
Rectangle	Заполненная прямоугольная область, мб с контуром
Image (BorderImage)	Растровое изображения (с контуром)
Text	Форматированный текст
TextEdit (TextInput)	Ввод и отображение текста
Window	Элемент главного окна приложения
WebView	Отображение веб содержания

Отдельная подгруппа представлений для размещения элементов: ListView, GridView, PathView;

Элементы-потомки отображаются относительно и внутри своего родительского элемента.

Пример: 3 уровня элементов

import QtQuick 2.8
import QtQuick.Window 2.2
 
Window
{
    visible: true
    width: 360
    height: 360
    Rectangle
    {
        color: "darkkhaki"
        x: 100
        y: 50
        width: 170
        height: 200
        border.color: "black"
        border.width: 10
        radius: 40
        smooth: true
        Text
        {
            x: 50
            y: 50
            text: "Hi, this is string of my text"
        }
    }
}

Свойства элементов

Стандартные свойства для всех элементов:

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	Методы, вызываемые при изменении свойств, в них можно размещать код

Пример: Взаимосвязанные свойства объектов

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
    }
}

Собственные свойства

property <тип> <имя>[:значение]
Элементам можно задавать собственные свойства. Они могут содержать значения, а так же для них создаются методы onX для реагирования на изменения этих свойств.

Необходимо указывать типы данных, они строго типизированы (bool, double, enumeration, int, list, real, string, time, url, var, color, date, font, matrix4x4, point, rect, size, Vercor[2,3,4]d).

zxcx

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

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

Содержание