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

zxcx

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

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

Содержание