Лабораторная работа № 4. Компонент «Скрытый текст»

Студент: Кривошеин Максим Константинович, группа ИС-2301
Дисциплина: Разработка мобильных приложений, СПбГЭУ
Платформа: ОС Аврора 5.2 (Aurora SDK 5.2.0.180), Qt 5.6, QML / Sailfish Silica

Задание

Разработать компоненту «Скрытый текст» в отдельном qml-файле. Компонента должна отображать текстовое поле, скрытое за анимацией. Анимацию сделать в виде пузырьков, поднимающихся снизу вверх, или в виде появляющихся и лопающихся пузырьков. Прообраз поля — поле денег в банковском приложении «СберБанк». При нажатии на поле с анимацией анимация исчезает и появляется скрытый за ней текст. При нажатии на текст анимация появляется обратно.

Реализация

Компонента — qml/components/HiddenText.qml.

• Текст (Label) и слой с пузырьками лежат друг над другом; свойство revealed определяет, что из них видно. Смена идёт плавно (FadeAnimation), текст при появлении слегка «выпрыгивает» (Easing.OutBack).
• Пузырьки — Repeater из Rectangle-кругов с бликом. Каждый пузырёк получает случайные размер, позицию и скорость, поднимается снизу вверх с покачиванием, а у верхнего края раздувается и «лопается». После этого он появляется снова в новом случайном месте (ScriptAction в начале каждого цикла анимации).
• Когда текст открыт или приложение свёрнуто, анимации пузырьков останавливаются, чтобы не тратить ресурсы.
• Свойства компоненты: text, revealed, textColor, bubbleColor, bubbleCount, font; сигнал toggled(bool revealed).

Компонента используется в карточке счёта qml/components/AccountCard.qml. На главном экране (qml/pages/MainPage.qml) три карточки: дебетовая карта, накопительный и кредитный счета. Через вытягиваемое меню можно показать или скрыть все суммы сразу. При нажатии в консоль пишется, какая сумма показана или скрыта.

Структура проекта

ru.krivoshein.HiddenText.pro       проект qmake
src/main.cpp                       точка входа приложения
qml/HiddenText.qml                 ApplicationWindow
qml/components/HiddenText.qml      компонента «Скрытый текст»
qml/components/AccountCard.qml     карточка счёта со скрытой суммой
qml/pages/MainPage.qml             экран «Мои счета»
qml/pages/AboutPage.qml            «О приложении»
qml/cover/DefaultCoverPage.qml     обложка приложения
rpm/ru.krivoshein.HiddenText.spec  описание RPM-пакета

Скриншоты

Суммы скрыты	Открыта одна сумма	Открыты все суммы

Лицензия

MIT, см. LICENSE.