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

zxcx

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

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

Содержание