Что такое qt qml

Qt Documentation

Contents

The Qt QML module provides a framework for developing applications and libraries with the QML language. It defines and implements the language and engine infrastructure, and provides an API to enable application developers to extend the QML language with custom types and integrate QML code with JavaScript and C++. The Qt QML module provides both a QML API and a C++ API.

Note that while the Qt QML module provides the language and infrastructure for QML applications, the Qt Quick module provides many visual components, model-view support, an animation framework, and much more for building user interfaces.

For those new to QML and Qt Quick, please see QML Applications for an introduction to writing QML applications.

Getting Started

To include the definitions of the module’s classes, use the following directive:

QML and QML Types

The Qt QML module contains the QML framework and important QML types used in applications. The constructs of QML are described in the The QML Reference.

In addition to the QML Basic Types, the module comes with the following QML object types:

The Qt global object provides useful enums and functions for various QML types.

Lists and Models

JavaScript Environment for QML Applications

JavaScript expressions allow QML code to contain application logic. Qt QML provides the framework for running JavaScript expressions in QML and from C++.

These sections are from The QML Reference.

Integrating QML with C++ Applications

The module also provides the framework for running QML applications. The QML framework allows QML code to contain JavaScript expressions and for the QML code to interact with C++ code.

Additional Frameworks

Licenses and Attributions

Qt QML is available under commercial licenses from The Qt Company. In addition, it is available under free software licenses. Since Qt 5.4, these free software licenses are GNU Lesser General Public License, version 3, or the GNU General Public License, version 2. See Qt Licensing for further details.

Furthermore Qt QML in Qt 5.15.7 may contain third party modules under following permissive licenses:

BSD 2-clause «Simplified» License

Guides and Other Information

Further information for writing QML applications:

Reference

В© 2021 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.

Источник

Начинаем работу Python + Qt5 + QML урок №1

Всем привет. Сегодня познакомимся с QML. Узнаем что это такое и с чем его едят. Создадим небольшое приложение с использованием данной технологии.

Небольшое отступление:

QML (Qt Meta Language) — декларативный язык программирования, основанный на JavaScript, предназначенный для создания дизайна приложений. Является частью Qt Quick, среды разработки пользовательского интерфейса, которая поставляется вместе с Qt.

В качестве примера декларативных языков можно привести SQL и HTML. Подробнее о QML можете почитать здесь: документация.

Начнем, пожалуй, с самого простого: создания окна. Создаем два файла base.qml и test.py следующего содержания:

Код файла test.py должен быть вам полностью понятен, но если все же он вызывает у вас трудности, рекомендую пройти курс по PyQt5 здесь: https://pythonworld.ru/gui/pyqt5-firstprograms.html

Собственно это и есть простейший пример работы с qml, на выходе мы получим окно, размером 250X250 залитое зеленым цветом:

В QML, основным видимым элементом является элемент Rectangle. Элемент Rectangle имеет свойства для управления внешним видом и местоположением элемента, которые мы можем ему задавать, например, такие:

Другие свойства мы рассмотрим чуть позже.

Немного усложним задачу: создадим окно в котором будет прямоугольник с надписью: «Hello World»:

Теперь мы получим такой результат:

Здесь мы центрируем по вертикали и горизонтали наш объект относительно родителя anchors.verticalCenter: parent.verticalCenter,anchors.horizontalCenter: parent.horizontalCenter. Parent позволяет обратится к родителю, в нашем случае родителем объекта Text является Rectangle с id:rec_green.

В общем теперь вы должны понять, что интерфейс на QML строится на иерархии объектов. В нашем случае это выглядит так:

Сделали прямоугольник с надписью. Хм… Пока это мало напоминает полезный интерфейс, давайте добавим кнопку по клике на которую в консоль будет выводится надпись: «Hey Programmer».
Немного изменим код, теперь он будет выглядеть так:

Здесь мы добавляем объект MouseArea, позволяющий работать с мышью.
anchors.fill: parent — говорим, что вся область родителя будет задействована.
onClicked — событие нажатия на кнопку. В нашем случае, вызывается функция, выводящая в консоль: ‘Hey Programmer’.

На этом, пожалуй, сегодня и закончим. В следующих статьях разберем qml более подробно.

Пока вы, возможно, не видите преимуществ использования qml, но когда мы познакомимся с этим замечательным инструментом подробнее, вы поймете какой он удобный и функциональный.

Спасибо за внимание. Если у вас остались вопросы задавайте их в комментариях. Надеюсь статья была вам полезна.

Источник

Первые шаги с QML

QML — это новый язык разметки для создания пользовательских интерфейсов. Его основная задача — обеспечить возможность простого и быстрого создания приложений с красивым, анимированным интерфейсом.
Не так давно вышла публичная версия. Это означает, что API в целом стабилизировался, и версию можно смело тестировать и использовать.
Declarative UI планируется включить в релиз Qt 4.7, а пока можно найти все необходимые файлы и инструкции по установке на ftp троллей.
В данной статье мне хотелось бы показать, как можно использовать С++ объекты (QObject) в qml.

Первым делом нужно скачать с ftp и собрать qt-4.6.0-declarative.tar.gz. А качестве альтернативы можно использовать уже собранный QtCreator, в котором присутствуют нужные библиотеки
Давайте создадим проект:
Проще всего создать через QtCreator GUI приложение Qt4, в качестве базового класса прекрасно подойдет QWidget

qmltest.pro

widget.h

#include
class QmlView;
class MyObject;
class Widget : public QWidget
<
Q_OBJECT
public :
explicit Widget(QWidget *parent = 0);
private :
QmlView *view;
MyObject * object ;
private slots:
void onSceneResized(QSize size);
>;

Для начала, неплохо было бы убрать системный заголовок и сделать фон прозрачным:

setWindowFlags(Qt::FramelessWindowHint);
setAttribute(Qt::WA_TranslucentBackground);
setAttribute(Qt::WA_NoSystemBackground);
view = new QmlView( this );
view->viewport()->setAutoFillBackground( false );

Q_PROPERTY(QString text READ text WRITE setText NOTIFY textChanged)

BorderImage <
source: «background.png»
height: rect.height
width: rect.width
border.left: 20
border.top: 20
border.bottom: 20
border.right: 20
>

Text <
id: title
text: MyText
font.pointSize: 14
wrap: true
color: «white»

effect: DropShadow <
color: «white»
blurRadius: 2
offset.x: 0
offset.y: 0
>

anchors.top: rect.top
anchors.topMargin : 5
anchors.left: avatar.right
anchors.leftMargin : 5
>

Для размещения элементов в qml применяются якоря, в которых указывается положение объекта относительно других объектов, что оказывается весьма удобным. К тексту можно применять различные эффекты, например, эффект тени. Сам текст берётся из контекста, который мы указали ранее. Значение wrap указывает на то, что необходимо делать переносы строк

Text <
id: body
text: MyObject.text
font.pointSize: 12
wrap: true
color: «white»

//ancors
anchors.top: title.bottom
anchors.topMargin: 5
anchors.right: rect.right
anchors.rightMargin: 5
anchors.left: avatar.right
anchors.leftMargin : 5

onTextChanged: rect.height = calculateMyHeight();
>

В этом блоке присутствует слот, который активируется при любом изменении текста, и вызывает javascript функцию, пересчитывающую высоту всего прямоугольника, в котором заключена наша сцена. А текст можно изменять просто вызывая функцию setText у нашего С++ объекта.

Script <
function calculateMyHeight() <
console.log( «height : » + (body.y + body.height + 20));
return (edit.y + edit.height + 20);
>

В блоке scripts можно описывать javascript’ы, через которые можно взаимодействовать в любыми qml объектами
Оставшийся код можно найти здесь.
В конечном итоге должно получится такое миленькое окошко:

На сегодня всё. С остальными возможностями можно ознакомитmся посмотрев документацию и заглянув в примеры.
PS
Прислали скриншот из Win7, не мог не выложить, для создания размытия используется qtwin

Источник

Qt + QML на простом примере

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

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

Пользовательский интерфейс будет полностью реализован на QML, программная часть на Qt.

Для тех, у кого Qt еще не установлен, заходим на страницу загрузки qt.nokia.com/downloads и в разделе «Qt SDK: Complete Development Environment» скачиваем бинарники для своей платформы. И, собственно, устанавливаем.

В новом окне вводим название проекта, указываем путь к проекту, жмем Далее.

В следующем окне снимаем галочку Создать форму, она нам не пригодиться, Далее. И в последнем просто нажимаем кнопку Завершить. Все, каркас нашего приложения создан.

Первым делом добавим модуль qt-declarative к нашему проекту, для этого, в файле проекта (4Toddler.pro), к строке

class MainWindow : public QDeclarativeView
<
.
>

От реализации конструктора отрежем, ставшую ненужной, инициализацию базового класса QMainWindow(parent).

Если сейчас собрать и запустить проект то мы увидим пустое окно. Так и должно быть, т.к. мы еще не создали и не инициализировали Qml интерфейс.

Добавим в проект новый QML файл, для этого щелкаем правой клавишей по проекту

Мастер создал нам файл, содержащий один элемент Rectangle, он и будет являться основным элементом для нашего пользовательского интерфейса. Добавим несколько новых свойств и зададим их значение

Rectangle
<
// Идентификатор, по нему будет происходить
// обращение к свойствам этого элемента
id: canvas;

// Цвет фона, черный
color: «black»

// Изменять размер под размеры
// родительского элемента
anchors.fill: parent

// Будет получать фокус ввода
focus: true
>

void MainWindow::Init()
<
// Путь к папке, содержащей QML файлы
QString contentPath;

#ifdef QT_DEBUG
// В отладочной версии это абсолютный путь к папке проекта
contentPath = «D:/MyProjects/QT/4Toddler» ;
#else
// В релизе это путь к папке, в которой расположено приложение
contentPath = QApplication::applicationDirPath();
#endif

setFocusPolicy(Qt::StrongFocus);
// Изменять размеры QML объекта под размеры окна
// Возможно делать и наоборот,
// передавая QDeclarativeView::SizeViewToRootObject
setResizeMode(QDeclarativeView::SizeRootObjectToView);

// Загрузить QML файл
setSource(QUrl::fromLocalFile(contentPath + «/main.qml» ));
>

Окно будет разворачиваться на весь экран. Прежде, чем запускать приложение, давайте добавим кнопку, с помощью которой можно будет закрыть окно. Забегая вперед скажу, кнопок в окне будет две, для того, чтобы не писать несоклько раз один и тот же код добавим к проекту новый QML файл, и назовем его WindowButton.

Элемент WindowButton мы будем использовать повторно, изменяя лишь определенные свойства у каждого экземпляра. Кнопки у нас будут выполнены в виде иконок, каждой из них мы будем задавать путь к файлу иконки и изменять обработчик нажатия левой клавишей мыши. Ниже приведен готовый код элемента с комментариями

// Область, обрабатывающая «мышиные» сообщения
MouseArea
<
// Действует в пределах всего
// элемента Image
anchors.fill: parent

// При нажатии вызвать метод callback
onClicked: callback()
>
>

// Элемент позволяющий
// распологать элементы горизонтально
Row
<
// Правый край элемента выравнивается
// по правому краю родительского элемента
anchors.right: parent.right;
// Отступ справа, 4 пикселя
anchors.rightMargin: 4;
// Верхний край эелемента выравнивается
// по верхнему краю родительского элемента
anchors.top: parent.top;
// Отступ сверху, 4 пикселя
anchors.topMargin: 4;

// Отступ между элементами
spacing: 4

WindowButton
<
// Кнопка возова диалога «О программе»
id: about;

// Путь к файлу с изображением
// в данном случае иконка лежит в той же папке,
// что и QML файл
source: «about.png» ;

// Метод, который будет вызываться
// при нажатии на кнопку левой клавишей мыши
// onClicked: callback()
function callback()
<
>
>

WindowButton
<
// Кнопка закрытия окна
id: exit;

Чтобы то, что мы сделали заработало нам осталось реализовать оба метода callback для каждой кнопки. Для закрытия окна мы вызовем метод Quit, который реализуем в классе окна. Для этого в объявление класс добавим

Обратите внимание, что вызывать можно только те методы, которые объявлены как Q_INVOKABLE, т.е. от же метод Init, главного окна вызвать не удастся.

Готово, запускаем, видим черный экран, все, что сейчас мы можем сделать это закрыть окно, нажав на кнопку exit. Нажали и видим, что состояние кнопки при наведении курсора и при нажатии никак не меняется, выглядит как «неживая». Оживим ее, добавив состояния:

Image
<
.
states:[
State
<
// Произвольное название
name: «hovered» ;
// Указание на то, когда элемент переходит в это состояние
// в данном случае когда нажата левая кнопка мыши
when: mouseArea.pressed;
// Какие свойства будут изменяться в этом состоянии
// в данном случае это будет прозрачность
PropertyChanges < target: button; opacity: 1;>
>,
State
<
name: «normal»
// В это состояние элемент будет переходить
// когда левая кнопка мыши не нажата
when: mouseArea.pressed == false ;
PropertyChanges < target: button; opacity: 0.7; >
>
]
>

Элемент может переходить в определенное состояние как автоматически при выполнении условия, указанного в when, так и вручную, путем изменения свойства state.

Запустили, нажали, прозрачность изменяется, уже лучше, но не хватает плавности. Добавим следующий код:

Image
<
.
Behavior on opacity
<
// Анимация с шагом в 100 миллисекунд
// Раз в 100 миллисекунд прозрачность будет изменяться
// на 0,1
NumberAnimation < duration: 100 >
>
>

Behavior очень полезный элемент для создания анимаций, позволяющий указать то как будет меняться указанное свойство, в данном случае прозрачность кнопки.

Запускаем и смотрим, совсем другое дело, плавный переход от полупрозрачного к непрозрачному состоянию.

Окно о программе будет реализовано полностью на QML. Это будет модальное окно, которое будет появляться при нажатии кнопки about. При щелчке левой клавишей мыши в любом месте окна оно будет исчезать. Добавим новый QML файл About.qml в проект.

Я приведу сразу весь код этого окна с пояснениями

// Главный элемент для диалогового окна
Rectangle
<
id: about

// Функция для отображения окна
// изменяет прозрачность главного элемента
function show()
<
about.opacity = 1;
>

// Функция для закрытия окна
function hide()
<
about.opacity = 0;
>

// Прозрачный задний фон
color: «transparent»
// Полностью прозрачен по умолчанию
opacity: 0

// Ширина и высота устанавливаются равными
// ширине и высоте родительского элемента
// в данном случае это элемент с id: canvas
width: parent.width
height: parent.height

// Видимым элемент будет считаться если выполняется условие
// opacity > 0
visible: opacity > 0

// Дочерний элемент, создающий полупрозрачный фон
Rectangle
<
anchors.fill: parent

// Дочерний элемент создающий который является диалогом
// «О программе. »
Rectangle
<
id: dialog

// Ширина и высота являются фиксированными
width: 360
height: 230

Text
<
text: «4 Toddler»

// Выравнивание элемента по центру
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
>
>

Behavior on opacity
<
NumberAnimation < duration: 100 >
>

MouseArea
<
// Элемент полностью заполняет родительский элемент
anchors.fill: parent;

// При клике в любом месте прячем окно
onClicked: hide();
>
>

Это не просто присвоение ширины, если в процессе отображения будет меняться ширина родительского элемента, то и ширина дочернего будет перерасчитана. Не знаю как вас, а меня в процессе «ковыряния» QML эта особенность приятно удивила. Так же интересна следующая строка:

Свойство может быть не только задано, но и вычислено.

Осталось добавить диалог и код для его отображения при нажатии кнопки about. В файл Main.qml добавим код, в конце элемента canvas

Для того, чтобы окно отображалось добавим строку

в функцию callback кнопки about

// Новое свойство объекта, необходимое
// для изменения состояния при удалении объекта
property bool remove: false
// При добавлении объекта
property bool show: false

opacity: 0;
fillMode: Image.Stretch;

states: [
State
<
// Состояние, в которое переходит объект
// тогда, когда нам нужно его удалить
name: «remove» ; when: remove == true ;
PropertyChanges < target: block; opacity: 0 >
StateChangeScript < script: block.destroy(1000); >
>,
State
<
// Состояние, в которое переходит объект
// тогда, когда нам нужно его отобразить
name: «show» ; when: show == true ;
PropertyChanges < target: block; opacity: 1 >
>
]

// Шаблон для создания новых элементов
var component = Qt.createComponent( «block.qml» );

// Максимальное количество элементов
var maxBlocksCount = 10;

// Массив, в котором будут храниться все эелементы
var blocksArray = new Array();

// Вызов функции, которая создаст новый элемент
// с указанными координатами
createNewBlock(x, y);
>

// Удалить лишние элементы
if (blocksArray.length > maxBlocksCount)
<
removeAllBlocks();
>

var newBlock = component.createObject(canvas);

if (newBlock == null )
<
return false ;
>

// Путь к файлу иконки доступен через свойство главного
// окна randomIcon
var iconFile = window.randomIcon;

newBlock.source = ( «Icons/» + iconFile);

newBlock.x = x;
newBlock.y = y;

// Переводим элемент в состояние show
newBlock.show = true ;

// Проигрываем случайный звуковой эффект
window.PlaySound();

// Удаление всех добавленных элементов
function removeAllBlocks()
<
for ( var i = 0; i true ;
>

Как видно из кода нам еще следует реализовать свойство randomIcon и функицию PlaySound главного окна.

Добавим свойство в объявление класса MainWindow

Q_PROPERTY(QString randomIcon READ RandomIcon)

И объявление функции

QString MainWindow::RandomIcon()
<
QStringList iconFilesList;
QString searchPath = m_ContentPath + «/Icons/» ;

QDir directory = QDir(searchPath);
QStringList filters;
filters «*.png» ;
directory.setNameFilters(filters);
// Получаем список файлов с расширением png
iconFilesList = directory.entryList(QDir::AllEntries);

// Получаем случайный индекс элемента
int fileIdx = qrand() % iconFilesList.count();

// Возвращаем название файла
return iconFilesList.at(fileIdx);
>

void MainWindow::PlaySound()
<
QStringList soundFilesList;
QDir directory = QDir(m_ContentPath + «/Sounds/» );
QStringList filters;
filters «*.wav» ;
directory.setNameFilters(filters);

// Получаем список файлов с расширением wav
soundFilesList = directory.entryList(QDir::AllEntries);
// Получаем случайный индекс элемента
int fileIdx = qrand() % soundFilesList.count();

// Получаем название файла
QString soundFile = m_ContentPath + «/Sounds/» + soundFilesList.at(fileIdx);
// Проигрываем файл
QSound::play(soundFile);
>

Почти все, осталось добавить обработчик нажатия клавиш в наш корневой элемент вызов фунции создания нового элемента. В начален файла main.qml сделаем видимым наш скрипт в файле main.qml

и сам обработчик внутри элемента canvas

На этом все — можем запускать и любоваться.

Как я и обещал программа является простой, но, на мой взгляд, это достаточно интересная «игровая» площадка для тех, кто только начинает изучать QML. Нет предела совершенству, кто знает, может кто-нибудь разовьет ее во что-то более стоящее.

Источник

Национальная библиотека им. Н. Э. Баумана
Bauman National Library

Персональные инструменты

QML (Qt Meta-Object Language)

QML (Qt Meta Language или Qt Modeling Language [ ˈmet.əˈlæŋɡwɪdʒ ]) является языком разметки интерфейса пользователя. Это основанный на JavaScript, декларативный язык для проектирования приложений. Он является частью Qt Quick, инструментом для создания пользовательских интерфейсм, разработанным Nokia в рамках фреймворка Qt. QML используется в основном для мобильных приложений с сенсорным вводом и fluid анимацией (60 FPS). Документы QML описывают дерево объектов-элементов. QML элементы, входящие в состав Qt являются сложным набором блоков, графических объектов (прямоугольники, изображения и т.д.) и объектами-поведеня (например, состояниями, переходами, анимациями). Эти элементы могут быть объединены для создания сложных компонентов: начиная от простых кнопок и слайдеров и завершая поддерживающими интернет-соединение программами.

Содержание

Основы синтаксиса QML

QML это мульти-парадигменный язык, позволяющий определять объекты в терминах их атрибутов и их отношений, реакций на изменения в других объектах. В отличие от чисто императивного кода, где изменения в атрибутах и поведении выражены посредством ряда выражений, которые обрабатываются шаг за шагом, QML интегрирует атрибут и поведенческие изменения непосредственно в определения отдельных объектов. Затем, когда необходимо определить сложное поведение, эти определения атрибутов могут включать в себя императивный код.

Импорт выражений

Документ QML может иметь один или несколько импортов, объявленных в верхней части файла. Импорт может быть:

Объявление объектов

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

Здесь описывается объект типа Rectangle, имеющий ряд аттрибутов, описанных в скобках. Тип Rectangle доступен в модуле QtQuick, и соответстующие аттрибуты описывают ширину, высоту и цвет прямоугольника.

Дочерние объекты

Любое описание объектов может включать в себя дочерние объекты, описанные во вложенных скобках. Таким образом, любой объект неявно описывает дерево объектов, которое может содержать любое число дочерних объектов. Например, описание объекта Rectangle ниже, включает описание градиента, который, в свою очередь содержит два объявления GradientStop:

Аттрибуты в Объявлении объектов

Описание объекта в документе QML определяет новый тип. Он также описывает иерархию объектов, которые будут будут создаваться. Множество атрибутов, которые есть у объектов в QML:

Система типов QML

Типы, которые могут быть использованы в определении иерархии объектов в QML документе, могут быть описаны в разных местах:

Кроме того, разработчики приложений могут создавать свои собственные типы, либо путем регистрации C++ типов, либо путем определения многократно используемых компонентов в документах QML, который могут быть импортированы впоследствие. В зависимости от места объявления, движок будет обеспечивать безопасность типов для свойств и экземпляров этих типов.

Базовые типы QML

QML поддерживает множество базовых типов

Базовые типы могут быть использованы для определения:

Поддерживаемые базовые типы

Некоторые базовые типы поддерживаются движком по умолчанию и не требует оператора импорта для использования, в то время как другие требуют импортирования модуля, который обеспечивает их объявление. Все основные типы, перечисленные ниже, могут быть использованы в качестве типа свойств в XML документе, со следующими исключениями: list должен быть использован в сочетании с типом объекта QML enum не может быть использован непосредственно, перечисление должно быть определено зарегистрированным типом QML объекта.

Базовые типы, поддерживаемые языком QML

Базовые типы, доступные при помощи модулей QML

QML модули могут расширять язык набором типов. Например, ниже перечислены типы, предоставляемые модулем:

Типы JavaScript

JavaScript объекты и массивы поддерживаются движком QML. Любой стандартный тип JavaScript может быть создан и сохранен с использованием дженерик-типа var. Например, доступны стандартные типы Date и Array:

Источник