Почему мы должны использовать Qt framework и QML

Qt (произносится как «милый») - это фреймворк с открытым исходным кодом для создания графических пользовательских интерфейсов, а также кроссплатформенных приложений, которые работают на различных программных и аппаратных платформах с небольшими изменениями или без изменений базовой кодовой базы, оставаясь при этом собственным приложением с родным возможности и скорость.

В этой статье мы обсудим несколько пунктов фреймворка Qt:

Презентация фреймворка и развертывания его целевых платформ.
Приложения, которые его используют.
Мы также представим IDE, предложенную Qt, под названием Qt Creator, это очень хорошая IDE для приложений C ++ и Qt.
И мы увидим еще один язык, созданный Qt, который одновременно является мощным, производительным и высокоуровневым. Он называется QML, он интегрирован в модуль Qt Quick.
Мы также поговорим об инструментах, которые Qt использует для создания приложений.

Фреймворки Qt

Используя Qt, вы можете один раз написать приложения с графическим интерфейсом и развернуть их в настольных, мобильных и встроенных операционных системах, не переписывая исходный код (https://doc.qt.io/qt-5/supported-platforms.html).

Меньше кода. Создавайте больше. Развертывайте везде. Qt. Это цель Qt.

Qt написан на C ++, но вы также можете использовать привязку языка как Python с PySide2 (официальный Qt) или PyQt (неофициальный).

Существуют и другие языки привязок, созданные сообществом:

Перейдите: https://github.com/therecipe/qt
Rust: https://github.com/rust-qt

Qt также предлагает большое количество модулей.

Для получения дополнительной информации о модулях Qt см .: https://doc.qt.io/qt-5/qtmodules.html

Программное обеспечение Qt

В этом разделе мы увидим некоторые важные программы, созданные Qt.

KDE

(K Desktop Environment) - это среда рабочего стола. Он состоит из набора инструментов, которые позволяют графически использовать ваш компьютер: оконный менеджер, окно подключения, файловый менеджер, утилиты и т. Д. И, конечно же, Plasma Office.

Майя

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

Sailfish OS

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

CryEngine

CryEngine - игровой движок, разработанный Crytek, специализирующийся на шутерах от первого лица.

Peugeot E-Legend

Peugeot E-Legend - это автомобиль с автономным управлением, в котором цифровая кабина создана с использованием Qt.

webOS

webOS - операционная система, развернутая LG.

Есть и другие программы:

Virtualbox, Adobe Photoshop Elements, Autodesk 3ds Max, эмуляторы (rpcs3, dolphin, ppsspp, citra), OBS, Teamviewer, ArcGis, QGis, Spyder (мощная научная среда для ученых, инженеров и аналитиков данных) и т. Д.

Qt Creator

У Qt есть собственная IDE под названием Qt Creator для разработки. Это кроссплатформенная интегрированная среда разработки C ++, Python, JavaScript и QML, оптимизированная для компиляции проектов с использованием Qt.
Он включает в себя визуальный отладчик и интегрированный графический интерфейс, а также инструменты конструктора форм, которые упрощают создание графического интерфейса.

QML (язык разметки Qt)

QML (модуль Qt Quick) - декларативный язык. Он позволяет разработчикам и дизайнерам создавать высокопроизводительные, плавно анимированные и визуально привлекательные приложения. Он предлагает хорошо читаемый, декларативный, подобный JSON синтаксис с поддержкой императивных выражений JavaScript, а также позволяет легко повторно использовать и настраивать компоненты в пользовательском интерфейсе.

В типичном проекте интерфейсная часть разрабатывается на QML / JavaScript. Внутренний код, который взаимодействует с системой и выполняет тяжелую работу, разработан с использованием Qt C ++ / Python. Это позволяет естественным образом разделиться между разработчиками, более ориентированными на дизайн, и разработчиками функциональных возможностей. (Ссылка 1).

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

Чтобы увидеть все модули, доступные в QML, перейдите по этой ссылке: https://doc.qt.io/qt-5/modules-qml.html

QML производительность

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

Синтаксис QML

QML - это иерархия элементов, любое объявление объекта может определять дочерние объекты через объявления вложенных объектов.

В следующем примере дочерние элементы наследуют систему координат от родителя. Координата x,y всегда относительно родителя ((см. Ссылку 1).

// The root element is the Rectangle
Rectangle {
    id: root
    width: 120; height: 240
    color: "#4A4A4A"

    // Declare a nested element (child of root)
    Image {
        id: triangle

        // reference the parent
        x: (parent.width - width)/2 
        y: 40
        source: 'triangle_red.png'
    }

    // Another child of root
    Text {
        // reference element by id
        y: triangle.y + triangle.height + 20
// reference root element
        width: root.width

        color: 'white'
        horizontalAlignment: Text.AlignHCenter
        text: 'Triangle'
    }
}

Возможности QML

В этом разделе будут рассмотрены лучшие возможности QML.

Якоря

В дополнение к более традиционным макетам Сетка, Строка, Поток и Столбец. Qt Quick предоставляет способ компоновки элементов с использованием концепции привязок.

Каждый элемент можно представить как набор из 7 невидимых якорных линий: левый, горизонтальный центр, правый, верхний, вертикальный центр, базовая линия и низ.

Примеры

Rectangle { id: rect1; ... }
Rectangle { 
    id: rect2
    anchors.left: rect1.right
     ... }

Rectangle { id: rect1; ... }
Rectangle { 
    id: rect2
    anchors.left: rect1.right
    anchors.top: rect1.bottom
    ... }

Rectangle { id: rect1; ... }
Rectangle { 
    id: rect2 
    anchors.left: rect1.right
    anchors.leftMargin: 5
    ... }

Для получения дополнительной информации см .: https://doc.qt.io/qt-5/qtquick-position-anchors.html

Область мыши

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

Для получения дополнительной информации см .: https://doc.qt.io/qt-5/qml-qtquick-mousearea.html

Привязка свойств

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

Для получения дополнительной информации см .: https://doc.qt.io/qt-5/qtqml-syntax-propertybinding.html

DragHandler

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

Для получения дополнительной информации см .: https://doc.qt.io/qt-5/qml-qtquick-draghandler.html

Состояние

Состояние - это набор пакетных изменений конфигурации по умолчанию.

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

Для получения дополнительной информации см .: https://doc.qt.io/qt-5/qml-qtquick-state.html

Анимация

Анимация - очень гибкий и многофункциональный инструмент, удовлетворяющий потребности самых разных пользователей.

В Qt Creator у вас есть мини-редактор, чтобы легко создавать анимацию, просто выберите нужные свойства. (Этот мини-помощник существует для прямоугольников, изображений, текста и анимации).

Для получения дополнительной информации см .: https://qmlbook.github.io/ch05-fluid/fluid.html

Переход

Переход определяет анимацию, которая будет применяться при изменении состояния.

Для получения дополнительной информации см .: https://doc.qt.io/qt-5/qml-tutorial3.html

Поведение

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

Динамическая загрузка компонентов

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

Для получения дополнительной информации см .: https://doc.qt.io/qt-5/qml-qtquick-loader.html и http://qmlbook.github.io/ch14-dynamicqml/dynamicqml.html.

Система событий сигналов и обработчиков

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

Например, тип Кнопка имеет сигнал clicked, который выдается всякий раз, когда нажимается кнопка. В этом случае обработчик сигнала для получения этого сигнала должен быть onClicked. В приведенном ниже примере при каждом нажатии кнопки вызывается обработчик onClicked,

Button {
    text: "Change color!"
    onClicked: {
       console.log("clicked") 
   }
}

В некоторых случаях может быть желательно получить доступ к сигналу за пределами объекта, который его излучает. Для этих целей в модуле QtQuick предусмотрен тип Подключения для подключения к сигналам произвольных объектов. Объект Connections может принимать любой сигнал от своей указанной цели.

Button {
    id: button
    text: "Change color!"
}
Connections {
   target: button
   onClicked: {
        console.log("clicked button")
   }
}

Обработчики сигналов изменения свойств

Сигнал излучается автоматически при изменении значения свойства QML. Этот тип сигнала является сигналом изменения свойства, и обработчики сигналов для этих сигналов записываются в форме on ‹Property› Changed

Например, тип «Прямоугольник» имеет свойство цвета. Чтобы получать уведомление при изменении этого свойства, напишите обработчик сигнала с именем

Rectangle {
    color: "red"
    onColorChanged: {
       console.log("Color changed") 
   }
}

Вы также можете легко добавить свой собственный сигнал!

Для получения дополнительной информации см .: https://doc.qt.io/qt-5/qtqml-syntax-signals.html

QML и JavaScript

QML предоставляет среду хоста JavaScript, адаптированную для написания приложений QML. Эта среда отличается от среды хоста, предоставляемой браузером или серверной средой JavaScript, такой как Node.js.

Например, QML не предоставляет объект окна или DOM API, как это обычно бывает в среде браузера. Он может запускать допустимые стандартные конструкции JavaScript, такие как условные операторы, массивы, значения переменных и циклы. Среда выполнения QML в настоящее время поддерживает до ES7.

Пример 1

Item {
    function fibonacci(n){
        var arr = [0, 1];
        for (var i = 2; i < n + 1; i++)
            arr.push(arr[i - 2] + arr[i -1]);

        return arr;
    }
MouseArea { 
        anchor.fill = parent
        onClicked: console.log(fibonacci(10))   
    }
}

Пример 2

// script.js
function jsFunction() {
    console.log("Called JavaScript function!")
}
---------------------------
// files.qml
import "script.js" as MyScript
Item {
    id: item
    width: 200; height: 200

    TapHandler {
        id: inputHandler
    }

    Component.onCompleted: {
        inputHandler.tapped.connect(MyScript.jsFunction)
    }
}

jsFunction() вызывается всякий раз, когда выдается сигнал tapped от TapHandler.

Qt QML Style (материал, представьте, мост PS)

Qt QML поддерживает несколько стилей:

Материальный дизайн (черный / белый).
Универсальный дизайн (черный / белый).
Представьте себе стиль.
Стиль фьюжн.
Стиль по умолчанию.

Для получения дополнительной информации см .: https://doc.qt.io/qt-5/qtquickcontrols2-styles.html

Представьте себе стиль

Стиль Imagine основан на изображениях. Стиль поставляется с набором изображений по умолчанию.

Инструменты дизайнера

Qt использует 3 инструмента дизайнера для своих приложений:

Qt Quick Designer: Qt предлагает графический инструмент, который позволяет вам создавать графические интерфейсы QML.
Qt 3D Studio: ориентирована на дизайнеров и позволяет легко создавать сложные 3D-сцены с состояниями и переходами, которые можно использовать в приложениях Qt и управлять ими. Для получения дополнительной информации см: https://www.youtube.com/watch?v=3OgiQMHzI-A.
Qt Designer Studio: это инструмент для проектирования и разработки пользовательского интерфейса, который позволяет дизайнерам и разработчикам быстро создавать прототипы и разрабатывать сложные пользовательские интерфейсы. Это специально для дизайнеров. Наиболее заметным дополнением к этим инструментам является Qt Bridge для Sketch. Это позволяет вам легко импортировать ваши проекты (Photoshop, Adobe Illustrator) в Qt Design Studio. Для получения дополнительной информации см: https://www.youtube.com/watch?v=oLdEJMoE7l8

Qt Quick Designer

С помощью этого инструмента мы можем делать многое, не просматривая код, особенно для дизайнера. Мы можем создать:

Состояния.
Сигнал и слот.
Привязки свойств.
Анимации с временной шкалой.

Для получения дополнительной информации см .: https://doc.qt.io/qtcreator/creator-using-qt-quick-designer.html

Анимация с временной шкалой

Мы увидим, как мы можем создать анимацию с помощью редактора временной шкалы.

Пример состояний

Мы увидим, как изменить состояние элемента QML с помощью Qt Quick Designer.

Qt Quick 3D

Qt Quick 3D, который представляет собой высокоуровневый API для создания трехмерного содержимого для пользовательских интерфейсов Qt Quick. (Мы можем использовать модуль Qt 3D, но Qt Quick 3D проще).

Прототипирование

QML сцена

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

Вы также можете сделать это в Qt Creator.

Qt Design Viewer

На основе Qt for WebAssembly мы можем создать программу просмотра QML, работающую в веб-браузере.

Вы можете протестировать по этой ссылке: http://qt-webassembly.io/designviewer/

Заключение

Мы увидели важность фреймворка Qt и мощь его IDE, а также использование его языка QML, который является одновременно простым и мощным, что позволяет взаимодействовать с серверной частью C ++ / python.