Технология создания графического интерфейса с помощью QML

Что такое QML

QML[2] (Qt Meta Language or Qt Modeling Language) - декларативный язык, который позволяет создавать графический интерфейс приложения с помощью описания видимых компонентов и способов их взаимодействия друг с другом.

Язык QML является высокочитаемым, он был специально разработан для того, чтобы позволить компонентам приложения быть динамически связанными, так же язык позволяет с легкостью повторно использовать и настраивать компоненты пользовательского интерфейса.

Синтаксис языка QML похож на JSON с поддержкой императивных возможностей языка JavaScript в сочетании с динамическими привязками языка.

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

Актуальность

Без использования дополнительных библиотек создание графического интерфейса на чистом языке C++ заняло бы очень много времени и строчек кода. Поэтому было придумано множество методов, позволяющее быстро создать интерфейся для приложения. Наиболее оптимальным выбором является QML, так как он:

• •    Кросплатформенный

• •    Имеет простой синтаксис

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

Так же Qt можно использовать и с другими языками программирования, такими как: Python, Ruby, PHP, Java.

Создание интерфейса

В качестве примера будем рассматривать создание графического интерфейса на операционной системе Ubuntu 12.04

Скачиваем Qt с оффициального сайта[1]. Зупускаем и выбираем пункт создание Приложение Qt Quick Controls 2.

Новый проект

Выберите шаблон:                                                                  Все шаблоны

Проекты Библиотека Другой проект Проект без Qt Импортировать проект Файлы и классы

а Приложение Qt Widgets Я Консольное приложение Qt -<3 Приложение Qt Quick ^ Приложение Qt Quick Controls ^ Приложение Qt Canvas 3D

Создание устанавливаемого приложение Qt Quick 2 с использованием Qt Quick Controls 2. Замечание^ Quick Controls 2 недоступны начиная с Qt 5.7. Поддерживаемые платформы: Desktop

Отмена Выбрать...

Создаст ся проект с некоторым кодом

	Проекты        t Т. ® В+ в				В main.qml                     # X
	© untitled4		1		(import QtQuick 2.7
Начало □ Редактор Дизайн A Отладка Проекты Справка	► ►	Lai untitled4.pro Исходники Й Ресурсы	2 3 6 7 8 9 16 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 36 31		import QtQuick.Controls 2.6 import QtQuick.Layouts 1.0 Applicationwindow { visible: true width: 640 height: 486 title: qs7r(”Hello World”) SwipeView { id: swipeView anchors.fill: parent currentindex: tabBar. currentindex Pagel { } Page { Label. { text: qs7r("Second page") anchors.centerin: parent } footer: TabBar { id: tabBar currentindex: swipeView.currentindex TabButton { text: qs7r(”First")
	Открытые документы ▼ Ы+ П ■
untitLed4	main	.qml                       Е	32
Отладка			33 34 35 36 37 чя		TabButton { text: qsTrC’Second”) }

В

т S3 untitled

• ►    ^ Исходники

• ►    Й Ресурсы

■*■ Era untitled4

• ►    E Исходники

В qtquickcontrols2.c

• 1    (import QtQuick 2.7

import QtQuick.Controls 2.0

• 3    import QtQuick.Layouts 1.0

• 4

• 5    ^v Item {

property alias textFieldl: textFieldl property alias buttonl: buttonl

TextField { id: textFieldl placeholderText: qsTr("Text Field”) }

Button { id: buttonl text: qs7r(”Press Me")

Удалим содержимое вкладки и начнем проект с нуля.

Пусть требуется создать дизайн, который будет содержать следующие элементы

• текстовое поле

• метка

• ползунок

Значение ползунка будет отображаться в метке.

Для начала создадим контейнер Item, который будет содержать все остальные элементы. Пусть он будет иметь квадратную форму с длиной стороны равной 500 пикселей.

Представленный код служит для инициализации контейнера Item:

Item { id: name width:500

height:500

}

Чтобы наши элементы располагались внутри контейнера, мы будем их описывать внутри блока Item.

Для создания текстового поля нам потребуется элемент TextField. Верхний угол нашего текстового поля будет располагаться в позиции (10,10). Для этого опишем его координаты х и у. Ширина будет 200 пикселей, а высота 50. Фон пусть будет серым. Для создания фона нам потребуется нарисовать прямоугольник (Rectangle), который мы закрасим серым цветом.

TextField{ width: 200

height: 50

x:10

y:10

background: Rectangle{ width:200

height:50 color: "#cccccc" }

}

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

Для создания ползунка используем элемент Slider. Значение ползунка будет меняться от 1 до 100. Чтобы в последствие можно было использовать свойства объекта, присвоим ему идентификатор «id: slider». Приведенный код инициализирует объект типа Slider:

Slider{ id:slider

y:80

x:10

from:1

value:42

to:100

stepSize:1

background: Rectangle {

x: slider .leftPadding

y: slider .topPadding + slider .availableHeight / 2 - height / 2 implicitWidth: 200

implicitHeight: 4

width: slider.availableWidth height: implicitHeight radius: 2

color: "#000000"

} handle: Rectangle {

x: slider .leftPadding + slider .visualPosition * ( slider .availableWidth - width )

y: slider .topPadding + slider .availableHeight / 2 - height / 2 implicitWidth: 10

implicitHeight: 10

radius: 5

color: "#ffffff"

}

}

From — минимальное значение. To — максимальное значение. Value — текущее значение. StepSize — значение шага В качестве фона используем прямоугольник с закругленными краями (radius: 2). И расположим его вертикально по центру контейнера (y: slider .topPadding + slider .availableHeight / 2 - height / 2). Для корректного отображения используются свойста implicitWidth и implicitHeight, так как изначально отдается предпочтение базовым настройкам. Свойство объекта Slider Handle инициализирует ручку ползунка.

Создадим последний элемент — метку (Label). Она будет отображать значение ползунка.

x:10

y:100

width:50

height:50

}

Чтобы посмотреть полную справку по каждому компоненту достаточно установить курсор в позицию перед компонентом и нажать клавишу F1.

Листинг интерфейса:

import QtQuick 2.7

import QtQuick.Controls 2.0

import QtQuick.Layouts 1.0

Item { id: name width:500

height:500

TextField{ width: 200

height: 50 x:10 y:10 background: Rectangle{ width:200 height:50

color: "#cccccc"

}

}

Slider{ id:slider

y:80

x:10

from:1

value:42

to:100

stepSize:1.0

background: Rectangle {

x: slider .leftPadding

y: slider .topPadding + slider .availableHeight / 2 - height / 2

implicitWidth: 200

implicitHeight: 4

width: slider.availableWidth height: implicitHeight radius: 2

color: "#000000"

} handle: Rectangle {

x: slider .leftPadding + slider .visualPosition * ( slider .availableWidth - width )

y: slider .topPadding + slider .availableHeight / 2 - height / 2

implicitWidth: 10

implicitHeight: 10

radius: 5

color: "#ffffff"

}

}

x:10

y:100

width:50

height:50 }

Результат выполнения:

}