Лабораторная работа № 3. Кнопка «лёд — вода — пар»
Студент: Кривошеин Максим Константинович, группа ИС-2301
Дисциплина: Разработка мобильных приложений, СПбГЭУ
Платформа: ОС Аврора 5.2 (Aurora SDK 5.2.0.180), Qt 5.6, QML / Sailfish Silica
Задание
Разработать компоненту в отдельном qml-файле. Компонента должна отображать кнопку,
которая имеет три состояния: «лёд», «вода», «пар». Состояния должны быть оформлены
в виде States. При желании добавить анимацию при переходе из состояния в состояние.
Реализация
Компонента — qml/components/PhaseButton.qml.
Каждое нажатие переводит кнопку в следующее состояние: лёд → вода → пар → лёд.
Состояние (State.name) |
Надпись | Форма кнопки | Значок |
|---|---|---|---|
ice |
лёд, ниже 0 °C | голубой «кубик» со скруглёнными углами | снежинка |
water |
вода, от 0 до 100 °C | синий круг, по воде расходятся круги | капля |
steam |
пар, выше 100 °C | полупрозрачное серое «облако», вверх поднимаются клубы пара | волны пара |
Все отличия состояний (цвет, радиус скругления, прозрачность, надписи, значок)
заданы через PropertyChanges внутри states. Для переходов описаны transitions:
-
ice → water— плавление: цвет перетекает, углы скругляются с упругой анимациейEasing.OutElastic; -
water → steam— кипение: кнопка «вздувается» и становится полупрозрачной; -
steam → ice— кристаллизация: кнопка сжимается и доворачивается на 90°; -
* → *— общий переход для прямого переключения в любое состояние.
Во всех переходах надписи меняются через плавное затухание (PropertyAction
между двумя NumberAnimation), значки состояний — перекрёстным затуханием.
Значки — PNG-файлы из ресурсов qrc:/images/.
На главном экране (qml/pages/MainPage.qml) под кнопкой есть три переключателя
«лёд / вода / пар»: они показывают текущее состояние и позволяют выставить его
напрямую. При каждой смене состояния в консоль пишется Состояние кнопки: <имя>.
Структура проекта
ru.krivoshein.PhaseButton.pro проект qmake
resources.qrc значки состояний
images/ice.png, water.png, steam.png
src/main.cpp точка входа приложения
qml/PhaseButton.qml ApplicationWindow
qml/components/PhaseButton.qml компонента кнопки с тремя состояниями
qml/pages/MainPage.qml экран с кнопкой
qml/pages/AboutPage.qml «О приложении»
qml/cover/DefaultCoverPage.qml обложка приложения
rpm/ru.krivoshein.PhaseButton.spec описание RPM-пакетаСкриншоты
| Лёд | Вода | Пар |
|---|---|---|
 |
 |
 |
Лицензия
MIT, см. LICENSE.