8_Вступ до Qt Quick для C
Введення Qt Quick для C++ розробників. Частина 1
Мал. 1. Інтерфейс середовища Qt Creator для створення компонентів Qt Quick
Основні концепції QML
Центральне поняття QML - елемент. Елементи є базовими будівельними блоками, з яких формується програма на QML. QML підтримує різні візуальні елементи (наприклад, Rectangle та Text), елементи взаємодії (MouseArea та Flipable), та елементи анімацій (RotationAnimation та Transition). Також є складні типи елементів, які дозволяють програмісту працювати з даними, створювати уявлення в архітектурі модель-подання (Model-View), а також багато інших. Елементи QML мають властивості (наприклад, color), які можуть встановлюватися та змінюватися розробником, а також сигнали (наприклад, onClicked), які використовуються для обробки подій та зміни станів.
Візуальні елементи. Hello World!
Розглянемо класичний приклад Hello World. Нижче наведено код, який виводить рядок "Hello World" усередині зафарбованого прямокутника:
Розглянемо цей код докладно. Він є QML документ - закінчений блок вихідного коду на QML, який можна запускати на виконання. QML документи зазвичай зберігаються в текстових файлах, однак також можуть бути створені "на льоту" під час роботи програми. Документ QML завжди починається з однієї або кількох операцій імпорту. У цьому прикладі імпортується Qt 4.7. Для того, щоб запобігти впливу змін майбутніх версій Qt Quick на існуючі QML-документи, при імпорті явно вказується номер версії модуля. Елемент Rectangle використовується для створення активного об'єкта. Об'єкти можуть містити вінші об'єкти. У наведеному вище коді об'єкт Rectangle – це батько для об'єкта Text. Також елемент Rectangle визначає вікно верхнього рівня, що забезпечує також керування фокусом в інтерфейсі користувача.Технічне зауваження:властивість children будь-якого QML-елемента містить список всіх дочірніх візуальних елементів. Властивість ресурсів, відповідно, — список невізуальних об'єктів. Обидва списки заповнюються автоматично, хоча за необхідності їх можна заповнити явно. Третя властивість data є список, що поєднує об'єкти обох зазначених вище списків. Його не можна заповнити явно, проте воно може стати в нагоді, якщо необхідно переміщатися від елемента до елемента за списками елементів, не розрізняючи, чи є вони візуальними чи не візуальними. Таким чином, можна написати:
Item < Text <>Rectangle <> Timer <> >
Item < children: [ // стандартна властивість і неявно задане Text <>, Rectangle <> ] resources: [ // стандартна властивість і неявно задана Timer <> ] >
Мал. 1. Використання якір для вирівнювання елементів
Розміщення візуальних елементів
При розміщенні візуальних QML-елементів вони можуть накладатися один на одного з ефектом прозорості. Для використання ефекту прозорості використовується наступний синтаксис:opacity: число, дечислобереться з діапазону від 0 (абсолютна прозорість) до 1 (абсолютна непрозорість). Нижче наведено код, який створює два частково накладені один на одного прямокутники - червоний і синій. При цьому загальна частина прямокутників завдяки ефекту прозорості буде фіолетовою. Зверніть увагу, як дочірній (синій) прямокутник успадковує 50% прозорості відсвого батьківського (червоного) прямокутника.
Мал. 1. Використання прозорості
Введення Qt Quick для C++ розробників. Частина 2
Елементи для взаємодії: миша та сенсорний екран
Часто буває необхідно додати додаток підтримку взаємодії з мишею чи сенсорним екраном. Для цього слід використовувати елемент MouseArea. Він дає можливість користувачеві натискати на кнопки та перетягувати візуальні елементи мишею або торканням сенсорного екрана. Також існують інші елементи взаємодії: Flickable, Flipable та FocusScope.
Лістинг 1. Взаємодія з мишею-сенсором.
Описи станів QML визначають набір значень властивості, які може отримувати з початкового стану. Початковий стан ініціалізує властивість порожнім рядком. Після зміни значень можна повернутися до початкового стану, надавши властивості state порожній рядок.
У наступному прикладі реалізовані стани, що відповідають двом різним кольорам. У визначенні об'єкта "червоного прямокутника" визначається властивість id. Це необхідно тому, що об'єкти з іменами можуть посилатися сусідні або дочірні елементи. Для об'єкта визначено два стани: червоний та помаранчевий. Властивість state задає елементу початковий стан. Описи станів елемента включають умову when, яке визначає, коли встановлюється даний стану. Тут видно, що стан змінюється на червоне в момент натискання кнопки миші або сенсора в області MouseArea. Описані в коді стану задають не лише колір прямокутника, а й його ширину та висоту. У помаранчевому стані розмір кнопки збільшується. При зміні станів область обробки натискання кнопки миші onClicked оновлюється.
; width: 120; height:80 > > ]
Розглянутий у першій частиніприклад Hello World(зробити посиланням на першу статтю) продемонстрував, що являє собою QML-документ. Слід зазначити, що ім'я документа QML також має значення. Якщо воно починається з прописаної (великої) літери, це означає, що визначається одиночний QML-компонент верхнього рівня. QML-компонент – це шаблон, який використовується для створення об'єкта з певною поведінкою під час виконання програми. QML-компонент може бути запущений виконання кілька разів, у своїй створюється кілька різних об'єктів, які називаються примірниками компонента. Після того, як екземпляри створені, вони більше не залежать від того компонента, від якого вони виготовлені, і тому можуть працювати з незалежними даними. Розглянемо приклад простого компонента Button (визначеного у файлі Button.qml), з якого створюється чотири різні кнопки у файлі application.qml. Кожен екземпляр створюється зі своїм значенням властивості:
Лістинг 3. Прості переходи між станами.
Лістинг 4. Створення чотирьох кнопок із різними значеннями властивості text.
Лістинг 5. Файл Button.qml створює компонент "кнопка". Зауважимо, що QML-документи можуть містити створення вбудованих компонентів за допомогою елемента Component.
Елементи анімації: плавні переходи
Анімація відіграє ключову роль у динамічному інтерфейсі користувача. У QML ці ефекти створюються шляхом застосування анімаційних об'єктів до значень властивостей об'єкта, щоб поступово змінювати. Анімаційні об'єкти створюються за допомогою вбудованого набору анімаційних елементів, які можуть використовувати різні типи анімації. Крім того, анімаційні об'єкти можуть застосовуватись і для інших цілей залежно відконтексту.
Наступний приклад є код для анімації переміщення прямокутника. У прикладі створюється об'єкт Rectangle з двома станами: початковим і кінцевим. У кінцевому стані прямокутник зсувається вектор (50, 50). Об'єкт Transition визначає, що коли стан прямокутника змінюється від початкового до кінцевого, всі зміни властивостей х і у мають бути анімованими. Для цього використовується Easing.InOutQuad.
Лістинг 6. Анімовані переходи між станами.
На лістингу 7 показано, як можна застосувати численні переходи до елемента Item. (Нагадаємо, що все, що застосовується до Item, поширюється на елемент Rectangle). За промовчанням перехід застосовується до всіх змін стану. Для більшого контролю можна встановити властивості from і to, щоб застосовувати перехід тільки за зміни одного заданого стану на інший або між явно заданими станами.