Qt Quick Carousel/bg

Български English

[toc align_right="yes" depth="2"]

Как да направим въртележка с Qt Quick

Въведение

Този урок ще ви покаже как да създадете анимирано меню с елементи, въртящи се в псевдо 3D пространство. Също ще ви бъде показано как да разделите QML проекта на отделни модули и как да добавите поддръжка на различни езици с Qt Linguist.

Всичко, от което се нуждаете, за да изпълните инструкциите е qmlviewer. Ако използвате някоя от последните версии на Убунту, просто инсталирайте пакетите qt4-qmlviewer и libqt4-dev. Всички файлове от урока могат да бъдат намерени в "gitorious":https://www.gitorious.org/qt-training/qml-demos/trees/master/carousel .

Qt Quick трябва да бъде поне версия 1.0, която идва с Qt 4.7.1 и нагоре.

Запознаване с PathView

"PathView":http://developer.qt.nokia.com/doc/qt-4.7/qml-pathview.html взима елементи от модел и ги разполага по определен път. Пътят е геометрично дефиниран като последователност от участъци. Има три вида участъци: линии, квадратични и кубични криви на "Безие":http://en.wikipedia.org/wiki/Bezier_curve curves. За да придобиете опит в това, как да създавате пътища, нека започнем с най-обикновен участък под формата на права линия:

// Carousel0.qml
import QtQuick 1.0

PathView {
 id: view
 width: 640
 height: 360
 model: 32
 delegate: Text { text: index }
 path: Path {
 startX: 0
 startY: 0
 PathLine { x: view.width; y: view.height }
 }
}

PathView е нашият главен елемент. Слагайки числото 32 като модел, автоматично ще се генерират индекси за модела от 0 до 31. За всеки елемент от модела се създава по един делегат, за да се визуализира. Започваме с обикновено текстово поле, което показва индексите на елементите в модела. По-късно ще видим как се създават по-сложни делегати, но за сега нека да се фокусираме върху създаването на пътищата. Описанието на път изисква поне начална точка и един участък. В нашият случай започваме от (0, 0) и рисуваме праволинеен участък до долу в дясно. Като заредите файла в qmlviewer, трябва да получите подобен изход: Carousel0.png

Когато плъзгате елементите, те реалистично ще се преместват. Забележете как те застават на фиксирани места. По подразбиране първият елемент е центриран в началната точка, а останалите са разпределени равномерно по дължината на пътя.

Добре, нека да усложним малко примера и да нарисуваме цял правоъгълник. Заменете описанието на пътя от предният пример със следното:

// Carousel1.qml
…
property int pathMargin: 50
path: Path {
 startX: pathMargin
 startY: pathMargin
 PathLine { x: view.width - pathMargin; y: pathMargin }
 PathLine { x: view.width - pathMargin; y: view.height - pathMargin }
 PathLine { x: pathMargin; y: view.height - pathMargin }
 PathLine { x: path.startX; y: path.startY }
}
…

Когато стартирате програмата, трябва да видите правоъгълник. Всеки "PathLine":http://developer.qt.nokia.com/doc/qt-4.7/qml-pathline.html започва от крайната точна на предният участък, така че ние трябва да зададем само крайните точни на всеки участък. За последният участък просто задаваме началната точка и така затваряме пътя. Създаваме наше си свойство pathMargin, за да си помогнем да дефинираме геометрията на пътя. Използването на потребителски свойства е най-лесният начин за създаване на допълнителни променливи в Qt Quick, но трябва да внимавате, защото те винаги са с публичен достъп.

Може да искате да напишете:

…
path: Path {
 property int pathMargin: 50
 startX: pathMargin
…

… но това не е възможно, защото Path компонента вече е дефиниран някъде другаде и не ние е позволено да добавяме нови свойства по време на изпълнение.

Създаване на кръг

След като се научихме да създаваме правоъгълник, нека да опитаме нещо по-трудно - кръг. Path не поддържа кръгли криви, така че ще трябва да използваме приближение чрез някои от следните варианти: линии, квадратични или кубични криви ви Безие. Тъй като това не е урок по аналитична геометрия, нека директно да преминем на решението - 4 кубични криви, като използваме "магическото число 0.551784":http://www.tinaja.com/glib/ellipse4.pdf. Погледнете кода:

// Carousel2.qml
…
property int pathMargin: 50
property real rx: ry // view.width / 2 - pathMargin
property real ry: view.height / 2 - pathMargin
property real magic: 0.551784
property real mx: rx * magic
property real my: ry * magic
property real cx: view.width / 2
property real cy: view.height / 2
path: Path {
 startX: view.cx + view.rx; startY: view.cy
 PathCubic { // first quadrant arc
 control1X: view.cx + view.rx; control1Y: view.cy + view.my
 control2X: view.cx + view.mx; control2Y: view.cy + view.ry
 x: view.cx; y: view.cy + view.ry
 }
 PathCubic { // second quadrant arc
 control1X: view.cx - view.mx; control1Y: view.cy + view.ry
 control2X: view.cx - view.rx; control2Y: view.cy + view.my
 x: view.cx - view.rx; y: view.cy
 }
 PathCubic { // third quadrant arc
 control1X: view.cx - view.rx; control1Y: view.cy - view.my
 control2X: view.cx - view.mx; control2Y: view.cy - view.ry
 x: view.cx; y: view.cy - view.ry
 }
 PathCubic { // forth quadrant arc
 control1X: view.cx + view.mx; control1Y: view.cy - view.ry
 control2X: view.cx + view.rx; control2Y: view.cy - view.my
 x: view.cx + view.rx; y: view.cy
 }
}
…

Това ни дава перфектен кръг: Carousel2.png

Както може да видите, ние се нуждаем от по две контролни точки за всяка кубична крива. (Всички точки се дават в абсолютни координати.) Ако бяхме използвали квадратична крива, щяхме да се нуждаем само от една контролна точка. Контролните точки лежат извън кривата, но влияят на нейната форма. Може би сте запознати с концепцията от инструментите за работа с векторна графика.

Скриване на логиката

QML файла "може да се дефинира като преизползваем компонент":http://doc.qt.nokia.com/4.7/qml-extending-types.html#defining-new-components. Когато кода ви расте, вие обикновено искате да го разделите на логически блокове в отделни файлове, за да може да се използва многократно и да е по-лесен за четене. В нашият пример ще го разделим на:

// Carousel3.qml
import QtQuick 1.0

PathView {
 id: view
 width: 640
 height: 360
 model: 32
 delegate: Text { text: index }
 path: Ellipse {
 width: view.width
 height: view.height
 }
}

Нашият Ellipse компонент скрива сложната логика за апроксимиране на кръга и скалиране на елементите. Когато дефинираме наши компоненти, поризлизащи от вече съществуващи, можем да дефинираме и нови свойства. Компонента Ellipse съдържа следният код, който е леко променена версия на предният:

// Ellipse.qml
import QtQuick 1.0

Path {
 id: p
 property real width: 200
 property real height: 200
 property real margin: 50
 property real cx: width / 2
 property real cy: height / 2
 property real rx: width / 2 - margin
 property real ry: height / 2 - margin
 property real mx: rx * magic
 property real my: ry * magic
 property real magic: 0.551784
 startX: p.cx; startY: p.cy + p.ry
 PathCubic { // second quadrant arc
 control1X: p.cx - p.mx; control1Y: p.cy + p.ry
 control2X: p.cx - p.rx; control2Y: p.cy + p.my
 x: p.cx - p.rx; y: p.cy
 }
 PathCubic { // third quadrant arc
 control1X: p.cx - p.rx; control1Y: p.cy - p.my
 control2X: p.cx - p.mx; control2Y: p.cy - p.ry
 x: p.cx; y: p.cy - p.ry
 }
 PathCubic { // forth quadrant arc
 control1X: p.cx + p.mx; control1Y: p.cy - p.ry
 control2X: p.cx + p.rx; control2Y: p.cy - p.my
 x: p.cx + p.rx; y: p.cy
 }
 PathCubic { // first quadrant arc
 control1X: p.cx + p.rx; control1Y: p.cy + p.my
 control2X: p.cx + p.mx; control2Y: p.cy + p.ry
 x: p.cx; y: p.cy + p.ry
 }
}

Както може да видите, започваме пътя от втори квадрант. Целта е да първият елемент да е най-отдолу. Това е позицията и на текущият елелемнт.

Довавяне на графичното оформление

Вече трябва да имате основни познания как се създават пътища. За това минаваме на следващата стъпка - графичното оформление. За целта ще използваме "Трон подобни икони":https://www.gitorious.org/qt-training/qml-demos/trees/master/carousel/icons, които ще направим да изглеждат като 3D. Това се прави удивително лесно с QML.

Първо, нека създаден необходимият модел. Започнахме с прост изкуствен модел и сега ще го заменим с истински. Това е кода за него:

// Model0.qml
import QtQuick 1.0

ListModel {
 ListElement { title: "Calendar"; iconSource: "icons/calendar.png" }
 ListElement { title: "Setup"; iconSource: "icons/develop.png" }
 ListElement { title: "Internet"; iconSource: "icons/globe.png" }
 ListElement { title: "Messages"; iconSource: "icons/mail.png" }
 ListElement { title: "Music"; iconSource: "icons/music.png" }
 ListElement { title: "Call"; iconSource: "icons/phone.png" }
}

Използваме "ListModel":http://developer.qt.nokia.com/doc/qt-4.7/qml-listmodel.html и го пълним с примерни данни. Свободни сме да дефинираме каквито искаме свойства за елементите. Ще използваме iconSource за иконите в менюто и title за да добавим заглавие по-късно. Новият ни делегат е базиран на компонента Image и изглежда по следният начин:

// Carouse5.qml
import QtQuick 1.0

Rectangle {
 width: 640
 height: 360
 color: "black"
 PathView {
 id: view
 width: parent.width
 height: parent.height + y
 y: -33
 model: Menu0 {}
 delegate: Image {
 source: iconSource
 width: 64
 height: 64
 scale: 4. * y / parent.height
 z: y
 smooth: true
 opacity: scale / 2.
 }
 path: Ellipse {
 width: view.width
 height: view.height
 }
 }
}

Кода не е много, нали? Но вече си има всичко необходимо за разкошно 3D меню. Имитираме 3D като намаляваме размера на иконите когато отивам към горната част на екрана. Намаляването на прозрачността също спомага за този ефект. Ако отворите Carousel4.qml в qmlviewer, трябва да видите:

Carousel4.png

h2. Добавяне на управление с клавиатурата

Добаването на управление с клавиатурата е доста лесно. Първо добавяме следните три реда код, за да обработваме събития от клавиатурата:

// Carousel5.qml
…
PathView {
 …
 focus: true
 Keys.onLeftPressed: decrementCurrentIndex()
 Keys.onRightPressed: incrementCurrentIndex()
 …
}
…

Всички визуални елемент има свойство focus. Само един елемент в даден момент може да има това свойство сложено на true и той е този който ще получи съобщения от клавиатурата. Използваме "Keys":http://developer.qt.nokia.com/doc/qt-4.7/qml-keys.html за да получаваме събития от клавиатурата. Можехме да използваме и по-сложният начин за обработка на съобщенията:

Keys.onPressed: {
 if (event.key  Qt.Key_Left) decrementCurrentIndex()
    else if (event.key  Qt.Key_Right) incrementCurrentIndex()
 event.accepted = true
}

Както виждате ние увеличаваме и намаляваме текущият индекс, когато се натисне бутон. Но кой точно е текущият елемент? Тъй като пътят може да приеме всякаква абстрактна форма, как може да знаем кой трябва да е тукещо активният елемент, ако изобщо има такъв? Чрез добавянето на следните редове код, можем да укажем на PathView да следи текущият елемент:

…
PathView {
 …
 preferredHighlightBegin: 0
 preferredHighlightEnd: 0
 highlightRangeMode: PathView.StrictlyEnforceRange
 …
}
…

В нашият случай, решихме да направим първият елемент на пътя текущ. Сега вече трябва да можем да навигираме с клавиатурата като увеличаваме и намаляваме текущият елемент. Опитайте като отворите Carousel5.qml в qmlviewer.

h2. Донастройване

Накрая бихме желали да показваме и заглавието на текущият елемент. PathView има свойство highlightItem, което бихме могли да използваме за подчертаване, но ние ще го използваме само за да изпишем "текст":http://developer.qt.nokia.com/doc/qt-4.7/qml-text.html. Тук също се вижда и как да свържете два компонента.

…
PathView {
 id: view
 …
}
Text {
 id: label
 text: view.model.get(view.currentIndex).title
 color: "paleturquoise"
 font.pixelSize: 16
 font.bold: true
 anchors.horizontalCenter: parent.horizontalCenter
 anchors.bottom: parent.bottom
}
…

Qt Quick предоставя богат набор от възможности за оформление на текста. Цвета paleturquoise е един от "имената за цветове в SVG":http://www.w3.org/TR/SVG/types.html#ColorKeywords. Както може да видите, ние свързваме текста директно с заглавието от модела. Този начин на присвояване на стойности е бърз и лесен. Всеки път, когато currentIndex се промени, QML автоматично ще обнови текста с новата стойност. Но трябва да внимавате, може да възникне проблем. Не злоупотребявайте с директното свързване между различни обекти. На промер, когато решим да преименуваме title атрибута на модела на нещо друго, ще развалим всички свързвания, които включват title и няма да получим предупреждение, докато компонента не бъде създаден.

h2. Интернационализация

Вече говорихме по доста теми в този урок, който беше предназначен да бъде като бърза обиколка в Qt Quick, но ако започнем да говорим за неща като свързване със C++ код, пакетиране и разпространение към потребителите, това ще ни отклони от първоначалната ни цел да запазим нещата прости. Но има още една важна тема, която все още можем да включим- интернационализацията. Обикновено това е доста сложна тема, но Qt прави превода на приложения удивително лесен.

Qt включва "Qt Linguist":http://developer.qt.nokia.com/doc/qt-4.7/linguist-manual.html, който е мощен инструмент за превод на приложения. Същите процедури, използвани в C++ кода важат и в QML с изключение на "няколко неща":http://developer.qt.nokia.com/doc/qt-4.7/qdeclarative.html

Текстовете, които трябва да бъдат преведени в QML, трябва да са сложени във функцията qsTr(). Така инструмента lupdate ще може да извади тези текстове и да генерира XML файлове за превод (с разширение .ts). След това преводача, може да добави превод като използва Qt Linguist и след като са готови .ts се компилират до .qm файлове като се използва програмата lrelease. За да проверите превода просто подайте .qm файла на qmlviewer с опцията -translation.

Има няколко проблема, за които трябва да знаете, така че нека да преведем заглавията на менюто. Може би си мислите, че можете просто да сложите title текста във функцията по този начин:

ListModel {
 ListElement { title: qsTr("Calendar"); iconSource: "icons/calendar.png" }
 …

Но това няма да проработи, защото не е позволено изрази да са стойности на елемнтите. Има няколко начина да се заобиколи този проблем. Тъй като JavaScript функциите са позволени почти навсякъде, решаваме да пренапишем title като функция:

// Menu1.qml
import QtQuick 1.0

ListModel {
 ListElement { iconSource: "icons/calendar.png" }
 ListElement { iconSource: "icons/develop.png" }
 ListElement { iconSource: "icons/globe.png" }
 ListElement { iconSource: "icons/mail.png" }
 ListElement { iconSource: "icons/music.png" }
 ListElement { iconSource: "icons/phone.png" }
 function title(index) {
 if (title["text"] === undefined) {
 title.text = [
 qsTr("Calendar"),
 qsTr("Setup"),
 qsTr("Internet"),
 qsTr("Messages"),
 qsTr("Music"),
 qsTr("Call")
 ]
 }
 return title.text[index]
 }
}

Както може да видите, ние извикваме qsTr() за всеки елемент от модела, когато title() функцията е извикана за първи път. Разбира се такива конструкции се налагат само, когато трябва да се справите с превод на стойности в модел. Всички други текстове могат да бъдат преведени дитектно с qsTr(). Тъй като променихме дефиницията на модела, трябва да променим и местата, където се използваше старият вариант. За радост имаме късмет, че трябва да променим само един ред код:

text: view.model.title(view.currentIndex)

Извикваме lupdate, за да генерираме XML файловете за превод:

lupdate . -ts Carousel_de.ts -codecfortr UTF-8

После отваряме файла с linguist и правим превода. След като сте съвршили, извиквате lrelease:

lrelease Carousel_de.ts

lrelease ще генерита нов Carousel_de.qml. Може да тествате превода като изпълните командата:

usr/bin/qmlviewer -translation Carousel_de.qm Carousel7.qml