Интерфейс пользователя как граф состоянии
Выбери формат для чтения
Статья: Интерфейс пользователя как граф состоянии
Загружаем конспект в формате pptx
Это займет всего пару минут! А пока ты можешь прочитать работу в формате Word 👇
Интерфейс пользователя
как граф состояний
Состояния
Состояние – конфигурация объекта.
В qml любой объект может переходить между различными состояниями,
меняя при этом свойства какого-либо соответствующего элемента.
Каждое состояние может, к примеру:
показывать одни компоненты и скрывать другие
предоставлять различные доступные действия пользователю
начинать и останавливать анимацию
выполнять некоторые сценарии, требуемые новыми состояниями
изменять значения свойств определенного элемента
показывать различные виды и экраны
2
Граф состояний объектов
3
State
Button {
id: stateIndicator
anchors.centerIn: parent
state: "NORMAL"
states: [
State {
name: "NORMAL"
PropertyChanges {
target: stateIndicator
text: "Сейчас все нормально"
}
},
State {
name: "DIFFERENT"
PropertyChanges {
target: stateIndicator
text: "Что-то изменилось"
}
}
]
}
4
State. Свойства
changes: list – содержит список измененией значений свойств
по отношению к начальному состоянию
extend: string – хранит имя состояние, от которого идет наследование
списка изменений
name: string – название состояния
when: bool – определяет условие, при котором состояние будет активно
5
State. Наследование
Button {
id: stateIndicator
anchors.centerIn: parent
state: "completelyDifferent"
states: [
State {
name: "different"
PropertyChanges {
target: stateIndicator
text: "Что-то изменилось"
}
},
State {
name: "completelyDifferent"
extend: "different"
PropertyChanges {
target: stateIndicator;
color: "yellow"
}
}
]
}
6
State. Условие when
Rectangle {
id: signal
width: 75; height: 75
color: "green"
states: State {
name: "WARNING"
when: (stateIndicator.state != "NORMAL")
PropertyChanges {target: signal; color: "red"}
}
}
7
State. Взаимодействие с объектами
State использует несколько элементов, чтобы менять различные свойства
объектов:
PropertyChanges – числовые значения свойств объекта
AnchorChanges – якори объекта
StateChangeScript – выполнение кода
ParentChange – родитель объекта
8
PropertyChanges
Button {
id: stateIndicator
anchors.centerIn: parent
state: "normal"
states: [
State {
name: "normal"
PropertyChanges {
target: stateIndicator
text: "Сейчас все нормально"
}
},
State {
name: "different"
PropertyChanges {
target: stateIndicator
text: "Что-то изменилось"
}
}
]
onClicked: state = state == "normal" ? "different" : "normal"
}
9
PropertyChanges. Свойства
target : Object – содержит объект, к которому будут применяться изменения
значений
explicit : bool – если выставлен true, при изменении значений свойств
объекта с помощью PropertyChanges, вместо привязки параметра будет
происходить единоразовае присвоение значение переменной.
Изначально false
restoreEntryValues : bool – определяет, будут ли восстановлены прежние
значения свойств при выходе из состояние. Изначально true
10
AnchorChanges
Page {
Button {
id: example
text: "Двигающаяся кнопка"
anchors.verticalCenter: parent.verticalCenter
states: [
State {
name: "left"
AnchorChanges { target: example; anchors.left: parent.left }
},
State {
name: "right"
AnchorChanges {target: example; anchors.right: parent.right }
}
]
onClicked: state = state == "right" ? "left" : "right"
}
}
11
AnchorChanges. Свойства
anchors.left : AnchorLine – левый якорь
anchors.right : AnchorLine – правый якорь
anchors.horizontalCenter : AnchorLine – горизонтальное выравнивание
anchors.top : AnchorLine – верхний якорь
anchors.bottom : AnchorLine – нижний якорь
anchors.verticalCenter : AnchorLine – вертикальное выравнивание
anchors.baseline : AnchorLine – выравнивание основания текста
12
ParentChange
Page {
Rectangle {
id: redRect
width: 100; height: 100
color: "red"
}
Rectangle {
id: blueRect
x: redRect.width
width: 50; height: 50
color: "blue"
states: State {
name: "parentChanged"
ParentChange { target: blueRect; parent: redRect; x: 10; y: 10 }
}
MouseArea { anchors.fill: parent; onClicked: blueRect.state = "parentChanged" }
}
}
13
ParentChange. Свойства
height : real – новое значение высоты
parent : Item – новый родитель
rotation : real – новое значение угла поворота
scale : real – новый масштаб
target : Item – элемент, родитель которого меняется
width : real – новое значение ширины
x : real – новое значение горизонтальной координаты
y : real – новое значение вертикальной координаты
14
StateChangeScript
State {
name: "DIFFERENT"
PropertyChanges { target: stateIndicator; text: "Что-то изменилось" }
StateChangeScript {
name: "warningScript"
script: warnAboutChanges()
}
}
15
Переходы
Transition {
NumberAnimation {
properties: "x,y"
duration: 500
}
}
16
Transition
transitions: [
Transition {
SequentialAnimation {
PropertyAnimation { property: "x"; duration: 1000 }
ScriptAction { scriptName: "warningScript" }
ColorAnimation { duration: 1000 }
}
},
Transition {
from: "go"
to: "stop"
PropertyAnimation { target: goLight; properties: "color"; duration: 1000 }
NumberAnimation { properties: "x"; from: 100; duration: 200 }
}
]
17
Transition. свойства
animations : list – содержит список анимаций, которые
произойдут при данном переходе
enabled : bool – определяет, произойдет ли переход при смене состояний.
Изначально true
from : string – определяет, при выходе из какого состояние произойдет
переход.
reversible : bool – определяет, при переходе в какое состояние произойдет
анимация.
running : bool – определяет, идет ли переход в текущий момент. Только для
чтения
to : string – определяет, будет ли переход обращен, если вызвавшее его
событие обращено. Изначально false
18
StateGroup
SomeCustomObject {
StateGroup {
id: itsStateGroup
states: State {
name: "state1"
//some changes
}
transitions: Transition {
//transition
}
}
someEventHandler: itsStateGroup.state = "state1"
}
19
StateGroup. Свойства
state : string – название текущего состояния
states : list – список всех состояний группы.
transitions : list – список всех переходов группы
20
Создание собственных QML компонентов
Возможность переиспользования кода
Исключение дублируемости кода
Повышение читаемости кода
Облегчение поддержки кода
21
Создание собственных QML компонентов
// CustomButton.qml
import QtQuick 2.0
// application.qml
import QtQuick 2.0
Rectangle {
width: 100; height: 100
color: "red"
Column {
CustomButton { }
Button {
x: 100
width: 100; height: 50
color: "blue"
}
}
MouseArea {
anchors.fill: parent
onClicked: console.log("Clicked!")
}
}
22
Корневой объект
Item - базовый тип для всех визуальных компонентов
Page и Dialog - базовые классы для создания новых страниц и диалогов
Image и BorderImage - типы для взаимодействия с изображениями
Rectangle - тип, использующий прямоугольник с заливкой и границей
Text, TextEdit и TextInput - типы для работы с текстом
23
Добавление свойств
[default] property [: defaultValue]
// ImageViewer.qml
import QtQuick 2.0
Item {
width: 200; height: 200
property string currentImage: "default-image.png"
//...
}
24
Доступные типы свойств
Числовые типы - int, double, real
Логический тип bool
Тип строки string
Тип url для локации ресурсов
Тип color - название цвета или его HEX код
Тип date для работы с датами
Тип variant (или var) - общий тип для свойства
Стандартные типы QML объектов, такие как Item, QtObject и др.
Список элементов list, где в качестве Type могут выступать
стандартные типы QML объектов, такие как Item, QtObject и др.
25
Свойства с параметром default
Определение свойства с
ключевым словом default делает
его свойством по-умолчанию:
// MyLabel.qml
import QtQuick 2.0
Text {
default property var someText
text: "Hello, " + someText.text
}
Значение свойству someText может
быть присвоено так:
// application.qml
MyLabel {
Text { text: "world!" }
}
Что аналогично обычному
присвоению:
// application.qml
MyLabel {
someText: Text { text: "world!" }
}
26
Alias
[default] property alias :
// Button.qml
import QtQuick 2.0
Item {
property alias buttonText: textItem.text
width: 200; height: 50
Text { id: textItem }
}
27
Добавление методов
// CustomButton.qml
Rectangle {
id: rectangle
width: 400; height: 100
color: "red"
MouseArea {
anchors.fill: parent
onClicked: console.log("Clicked!")
}
// application.qml
Button {
id: button
onClicked:
customButton.changeColor("blue")
}
CustomButton {
id: customButton
width: button.width
}
function changeColor(color) {
rectangle.color = color;
}
}
28
Создание и обработка сигналов
// CustomButton.qml
Rectangle {
signal customButtonClicked(string newColor)
id: rectangle
width: 400; height: 100
color: "red"
MouseArea {
anchors.fill: parent
onClicked: {
rectangle.color = Qt.rgba(Math.random(),
Math.random(), Math.random(), 1);
rectangle.customButtonClicked(color)
}
}
}
// application.qml
CustomButton {
id: customButton
onCustomButtonClicked: {
console.log(newColor);
}
}
29
Подключение и отключение сигналов
Rectangle {
id: rectangle
width: 400; height: 100
color: "red"
Подключение сигнала:
..connect()
Отключение сигнала:
..disconnect()
MouseArea {
id: mouseArea
anchors.fill: parent
}
Component.onCompleted: mouseArea.clicked.connect(mouseAreaClickedHandler)
function mouseAreaClickedHandler(mouse) {
rectangle.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1);
}
}
30
Сигналы изменения свойств
У каждого свойства, объявленного в QML, есть обработчик изменения
значения. Синтаксис обработчика: on<НазваниеСвойства>Changed.
CustomButton {
id: customButton
onColorChanged: {
console.log(color);
}
}
31
Connections
Объект, позволяющий добавить обработчик сигнала другому объекту.
CustomButton {
id: customButton
}
Connections {
target: customButton
onColorChanged: {
console.log(customButton.color);
}
}
32
