Qt Quick Controls 2 — обіцяного три роки чекають

Саме стільки минуло з моменту виходу Qt Quick 2 і оголошення про нової стратегії розвитку, спрямованої на підтримку мобільних платформ.

Технологія дорослішала, розробники лікували дитячі хвороби, але для повного щастя не вистачало трьох речей:

  • Правильного масштабування на High DPI екранах
  • Компонентів, специфічних для смартфонів
  • Гнучкої стилізації наявних компонентів
З масштабуванням вирішувалося досить просто: обчислюємо щільність пікселів, записуємо в глобальну константу і множимо всі розміри на потрібний коефіцієнт.

З відсутністю компонентів вирішувалося теж просто, але трудомістко: велосипедами. Треба зауважити, що останнім часом з'явилося кілька пристойних користувальницьких наборів, під Чоловічий, Material, iOS. Для мене досі загадка, чому Digia при всій орієнтованості на мобільники випустили першу версію контролів під настільні платформи, де і віджети почуваються непогано.

Півтора року тому з'явився стандартний стиль імітує Android 4.x — ситуацію це не врятувало. Стилізація у Qt Quick Controls 1 недостатньо гнучка, в загальному знову велосипеди, благо пишуться вони досить просто, і майже все потрібне вже написано в попередньому пункті.

Загалом до 5.6 була печальна, а тепер і на нашій вулиці свято

Змінилося рішуче все, хлопці взяли і переписали всі компоненти з нуля. Дописали відсутні, такі як Navigation Drawer, Tabs view, Picker etc. Масштабування на High DPI екранах теж переписали.

Для прикладу ось як працювала кнопка раніше:

Структура кнопки в Qt Quick Controls 1

Написана вона на QML, видніється гора Loader'ів, таймери, деякі речі потрібні тільки для специфічних штук типу випадаючого меню або кнопки спливаючих підказок. Скажімо прямо, використовується такий функціонал на мобільних і вбудованих пристроях трохи рідше ніж ніколи, а ресурси витрачає постійно.

Стало


Структура кнопки в Qt Quick Controls 2

Класно, правда? API залишилося практично тим же, вилов подій винесли в C++, окремі класи стилізації викинули, замість них можна вставити в якості фону і написи. За рахунок цього різко знижується споживання ресурсів, підвищується гнучкість стилізації.


Порівняння часу створення компонентів

Додаток галереї запускається майже миттєво, що не може не радувати.

Стилізація
На сьогодні з коробки доступні стилі Material для Android і Universal для Windows Phone. Точніше ми можемо використовувати будь-який стиль на будь-якій платформі, вони просто близькі до рідних. Для зміни стилю досить перезапустити програму. Можна скопіювати папку стилю і на його основі зробити власний. Можна зробити повністю свій, для цього написана бібліотека шаблонів компонентів, в якій кожен компонент має API, внутрішні стани, але не має елементів для відображення.

Кнопка зі стилю default:

import QtQuick 2.6
import Qt.labs.templates 1.0 as T

T. Button {
id: control

implicitWidth: Math.max(background ? background.implicitWidth : 0,
label ? label.implicitWidth + leftPadding + rightPadding : 0)
implicitHeight: Math.max(background ? background.implicitHeight : 0,
label ? label.implicitHeight + topPadding + bottomPadding : 0)
baselineOffset: label ? label.y + label.baselineOffset : 0

padding: 6
leftPadding: 8
rightPadding: 8

label: Text {
x: control.leftPadding
y: control.topPadding
width: control.availableWidth
height: control.availableHeight
text: control.text
font: control.font
opacity: enabled || highlighted ? 1 : 0.3
color: control.highlighted ? "#ffffff" : (control.pressed ? "#26282a" : "#353637")
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}

background: Rectangle {
implicitWidth: 100
implicitHeight: 40
opacity: enabled ? 1 : 0.3
color: control.pressed ? (control.highlighted ? "#585a5c" : "#e4e4e4") : (control.highlighted ? "#353637" : "#f6f6f6")
border.color: control.pressed ? "#26282a" : "#353637"
}
}

Гарне відео з більш докладним поясненням:
Презентація з Qt World Summit 2015

З мінусів можна згадати:

  • Стиль під iOS поки тільки в планах
  • Стилі під настільні ОС є тільки в Qt Quick Controls 1 (залишаються в поставці)
  • Таблиці і деревоподібні структури теж тільки в Qt Quick Controls 1


p.s. Зауважу, що в Qt 5.6 нові контроли у вигляді прев'ю під ім'ям Qt Labs Controls, повноцінно запрацюють в найближчому релізі 5.7, який обіцяють в травні.

Зміст документації: doc.qt.io/qt-5/qtlabscontrols-index.html
Інформація по шаблонах контролів: doc.qt.io/qt-5/qtlabstemplates-index.html
Вихідні коди, можна подивитися приклади стилів: github.com/qtproject/qtquickcontrols2
Стандартний приклад-галерея контролів: doc.qt.io/qt-5/qtlabscontrols-gallery-example.html

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.