Технология создания графического интерфейса с помощью 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).
Статья научная