Въведение в Qt Quick заОт разработчици
Тази част описва как да добавите взаимодействие с мишка и докосване към приложение, как да работите със състояния в QML и предоставя информация за компонентите на QML и използването на анимация в QML.
Елементи за взаимодействие: мишка и сензорен екран
Често е необходимо да се добави поддръжка за взаимодействие с мишка или сензорен екран към приложение. За да направите това, използвайте елемента MouseArea. Тя позволява на потребителя да кликва върху бутони и да плъзга визуални елементи с мишка или сензорен екран. Има и други елементи за взаимодействие: Flickable, Flipable и FocusScope.
Имайте предвид, че обектът MouseArea е независим от визуалните обекти. Това осигурява на дизайнера допълнителна гъвкавост в работата му. Например, можете да визуализирате бутон за потребителя и след това да оразмерите зоната за щракване, така че да е по-голяма от визуалното изображение с няколко пиксела. След това от потребителя няма да се изисква да натиска точно върху бутона, тъй като щракването с мишката или докосването на сензорния екран близо до бутона също ще се счита за щракване.
Нека да разгледаме малък пример за Hello World, който добавя зона с възможност за кликване. Правоъгълникът, съдържащ текста "Hello World", получава нов правоъгълник, който ще дефинира региона.
Този пример променя цвета на правоъгълника в отговор на всяко валидно щракване с мишката. Щракването се дефинира като натискане, последвано от отпускане на бутона на мишката: и двете действия трябва да са в рамките на MouseArea (натискане, преместване на курсора извън MouseArea, след това придвижване обратно вътре и отпускане на бутона на мишката също се считат за щраквания).Пълният синтаксис за този манипулатор е: MouseArea::onClicked (мишка), където параметърът на мишката съдържа информация за мишката, включително координатите X и Y на позицията на курсора, когато бутонът на мишката е бил освободен и когато бутонът е бил натиснат. В този пример тази информация не се използва.
Взаимодействието мишка/тъч екран показва прост пример за визуална промяна на състоянието, при която точно една стойност се променя в отговор на едно събитие. Методът onClicked бързо ще стане много объркващ, ако се опитате да промените множество стойности в отговор на множество събития. В този случай си струва да опишем състоянията в QML.
Листинг 1. Взаимодействие със сензора на мишката.
Описания на състоянието
Описанията на състоянието на елемента включват клауза when, която указва кога даденото състояние е зададено. Тук можете да видите, че състоянието се променя в червено в момента, в който бутонът на мишката или сензорният бутон се натиснат в MouseArea.
Състоянията, описани в кода, задават не само цвета на правоъгълника, но и неговата ширина и височина. В "оранжево" състояние размерът на бутона се увеличава. Тъй като състоянията се променят, областта за обработка на бутона на мишката onClicked се актуализира.
За да създадете преходи на състояния, се дефинират преходни елементи. Тези елементи използват информацията за начално и крайно състояние, за да променят свойството плавно с помощта на елементите на анимацията. Елементите на анимацията прилагат редица различни криви на антиалиасинг и методи за групиране. Това дава на разработчика и дизайнера висока степен на контрол върху това как и кога дадено свойство преминава от състояние в състояние. Този въпрос е разгледан по-подробно по-долу.
QML компоненти
Примерът Hello World, обсъден в първата част (направете връзка към първата статия)демонстрира какво е QML документ. Трябва да се отбележи, че името на QML документа също има значение. Ако започва с главна буква, това означава, че се дефинира един QML компонент от най-високо ниво. QML компонентът е шаблон, който се използва за създаване на обект с предварително дефинирано поведение по време на изпълнение на програмата. QML компонент може да се изпълнява многократно, създавайки множество различни обекти, наречени екземпляри на компоненти.
След като екземплярите бъдат създадени, те вече не зависят от компонента, от който са извлечени, и следователно могат да работят с независими данни. Нека да разгледаме пример за прост компонент Button (дефиниран във файла Button.qml), който създава четири различни бутона във файла application.qml. Всеки екземпляр се създава със собствена стойност на текстово свойство:
| Листинг 4. Създаване на четири бутона с различни стойности на текстови свойства. |
Имайте предвид, че QML документите могат да включват създаване на вградени компоненти с помощта на елемента Component.
Анимационни елементи: плавни преходи
Следващият пример е код за анимиране на движещ се правоъгълник. Примерът създава обект Rectangle с две състояния: начално и крайно. В крайното състояние правоъгълникът се измества от вектора (50, 50). Обектът Transition указва, че когато състоянието на правоъгълника се промени от началото до края, всички промени на свойствата x и y трябва да бъдат анимирани. За това се използва Easing.InOutQuad.
Оригинално ръководство: Въведение в Qt Quick за C++ разработчици Превод: Владимир Шабаршин Редактиране: Надежда Лагутина, Иля Парамонов