Размещение визуальных элементов

При размещении визуальных QML-элементов, они могут накладываться друг на друга с эффектом прозрачности. Для использования эффекта прозрачности используется следующий синтаксис: opacity: число, где число берётся из диапазона от 0 (абсолютная прозрачность) до 1 (абсолютная непрозрачность).   Ниже приведен код, который создает два частично наложенных друг на друга прямоугольника — красный и синий. При этом общая часть прямоугольников благодаря эффекту прозрачности оказывается будет фиолетовой. Обратите внимание, как дочерний (синий) прямоугольник наследует 50% прозрачности от своего родительского (красного) прямоугольника.

	Rectangle {    opacity: 0.5    color: "red"    width: 100; height: 100    Rectangle {       color: "blue"       x: 50; y: 50; width: 100;       height: 100    } }
Рис. 1. Использование прозрачности

Техническое замечание: элементы-потомки всегда наследуют свойства родительского элемента. Например, элемент Rectangle — это класс-потомок от Item, поэтому все свойства элемента Item будут доступны и в элементе Rectangle. Наследование также может реализовываться с помощью QGraphicsView: когда один элемент помещается в другой, свойства родителя (элемента-контейнера) оказывают влияние на его дочерние объекты. Например, в приведенном выше коде, элемент childRectangle получает 50% прозрачности элемента parentRectangle. Продолжение следует. Оригинальное руководство: Introduction to Qt Quick for C++ Developers Перевод: Владимир Шабаршин Редактирование: Илья Парамонов Если вы заметили неточности в приведённом тексте статьи или у вас есть дополнения, пожалуйста, приводите их в комментариях к статье.

Введение в Qt Quick для C++ разработчиков. Часть 2

Учебные материалы

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

Элементы для взаимодействия: мышь и сенсорный экран

Часто бывает необходимо добавить в приложение поддержку взаимодействия с мышью или сенсорным экраном. Для этого следует использовать элемент MouseArea. Он дает возможность пользователю нажимать на кнопки и перетаскивать визуальные элементы мышью или касанием сенсорного экрана. Также существуют другие элементы взаимодействия: Flickable, Flipable и FocusScope.

Необходимо обратить внимание на то, что объект MouseArea не зависит от визуальных объектов. Это предоставляет дизайнеру дополнительную гибкость в работе. Например, можно создать визуальный образ кнопки для пользователя, а затем определить размер области для нажатия таким образом, чтобы она была больше, чем визуальный элемент, на несколько пикселей. После этого пользователь не будет обязан попадать строго по кнопке, так как щелчок мышью или касание сенсорного экрана около кнопки тоже будет считаться нажатием. Рассмотрим небольшой пример на основе Hello World, где добавляется область для щелчка мышью. В прямоугольнике, содержащем текст "Hello World", создается наследник — новый прямоугольник, который будет определять эту область. Элемент MouseArea включает в себя обработчики сигналов, которые позволяют писать выражения на языке JavaScript. Эти обработчики сигналов будут вызваны, когда произойдет определенное событие или изменение состояния. Существуют следующие обработчики событий: onClicked, onEntered, onExited, onPressed и onReleased. В приведенном выше примере обработчик сигнала onClicked меняет цвет прямоугольника. В этом примере изменяется цвет прямоугольника в ответ на любой допустимый клик мышью. Клик определяется как нажатие с последующим отпусканием кнопки мыши: оба действия должны быть внутри области MouseArea (нажатие, перемещение курсора вне MouseArea, последующий переход обратно внутрь и отпускание кнопки мыши также считаются кликом). Полный синтаксис для этого обработчика выглядит так: MouseArea::onClicked (mouse), где параметр mouse содержит информацию о мыши, в том числе координаты X и Y положения курсора в момент отпускания кнопки мыши и в момент нажатия этой кнопки. В рассматриваемом примере эта информация не используется. Взаимодействие с мышью/cенсорным экраном показывает простой пример визуального изменения состояния, когда в ответ на одно событие меняется ровно одно значение. Метод onClicked быстро станет очень непонятным, если пытаться изменить несколько значений в ответ на несколько событий. В этом случае стоит описывать состояния на QML.

import Qt 4.7 Rectangle {    color: "#ff0000"    width: 310    height: 210    MouseArea {       anchors.fill: parent       onClicked: {          if (parent.color == "#ff0000") {             parent.color = "#ff9900";          } else {             parent.color = "#ff0000";          }       }    }    Rectangle {       width: 300       height: 200       anchors.horizontalCenter: parent.horizontalCenter       anchors.verticalCenter: parent.verticalCenter       Text {          anchors.horizontalCenter: parent.horizontalCenter          anchors.verticalCenter: parent.verticalCenter          text: "Hello World"       }    } }

Листинг 1. Взаимодействие с мышью-сенсором.