Технология создания графического интерфейса с помощью QML
Автор: Семенов А.А., Афанасьев Г.И.
Журнал: Теория и практика современной науки @modern-j
Рубрика: Математика, информатика и инженерия
Статья в выпуске: 4 (22), 2017 года.
Бесплатный доступ
В данной статье описана методика создания графического интерфейса на языке QML. Описывается создание такие элементов, как текстовое поле, ползунок, метка. Так же описывается простое взаимодействие между объектами.
Графический интерфейс
Короткий адрес: https://sciup.org/140271152
IDR: 140271152
Текст научной статьи Технология создания графического интерфейса с помощью 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 }
Результат выполнения:
}

Список литературы Технология создания графического интерфейса с помощью QML
- Официальный сайт Qt [Электронный ресурс] - режим доступа: https://www.qt.io (дата обращения 17.04.2017).
- Википедия: QML [Электронный ресурс] - режим доступа: https://ru.wikipedia.org/wiki/QML (дата обращения 17.04.2017).