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

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

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

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

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

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

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

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

Отдельная подгруппа представлений для размещения элементов: 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"
        }
    }
}

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

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

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).

Определяются в отдельных файлах, один файл - один элемент. Используются так же как и стандартные.
Элементы расположенные в одном каталоге автоматически доступны друг для друга.
Из вне будут доступны только свойства базового элемента, но не св-ва вложенных, для этого можно переопределить определить их алиасом в базовом элементе.

Пример: Собственный элемент

// Описание элемента в отдельном файле, в папке в проектом
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
    }
}

// Использование элемента
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
    }
}

Коллекции QML элементов можно объединять в модули и использовать повторно, подключив директивой import.
Располагают их в отдельной папке, создают файл qmldir с картой описания qml файлов элементов, с указанием версии.

Элемент Repeater позволяет производить элементы используя любой тип модели данных (число, массив, набор JSON), это инструкция к созданию, а элемент внутри, является шаблоном.

Пример: 4 элемента в столбик, из массива значений

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 - номер текущего элемента
        }
    }
}

Flickable - типа скроллбара, в нем можно располагать элементы большого размера