Qt Quick Carousel/bg: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
(Remove non-functioning "toc" command)
 
(7 intermediate revisions by 2 users not shown)
Line 1: Line 1:
'''Български''' [[Qt Quick Carousel|English]]
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}


=Как да направим въртележка с Qt Quick=
[[Category:Developing_with_Qt::Qt Quick]]


==Въведение==
'''Български''' [[:Qt_Quick_Carousel|English]]


Този урок ще ви покаже как да създадете анимирано меню с елементи, въртящи се в псевдо 3D пространство. Също ще ви бъде показано как да разделите <span class="caps">QML</span> проекта на отделни модули и как да добавите поддръжка на различни езици с ''Qt Linguist''.


Всичко, от което се нуждаете, за да изпълните инструкциите е '''qmlviewer'''. Ако използвате някоя от последните версии на Убунту, просто инсталирайте пакетите '''qt4-qmlviewer''' и '''libqt4-dev'''. Всички файлове от урока могат да бъдат намерени в [https://www.gitorious.org/qt-training/qml-demos/trees/master/carousel gitorious] ''[gitorious.org]'' .
= Как да направим въртележка с Qt Quick =
 
== Въведение ==
 
Този урок ще ви покаже как да създадете анимирано меню с елементи, въртящи се в псевдо 3D пространство. Също ще ви бъде показано как да разделите QML проекта на отделни модули и как да добавите поддръжка на различни езици с ''Qt Linguist''.
 
Всичко, от което се нуждаете, за да изпълните инструкциите е '''qmlviewer'''. Ако използвате някоя от последните версии на Убунту, просто инсталирайте пакетите '''qt4-qmlviewer''' и '''libqt4-dev'''. Всички файлове от урока могат да бъдат намерени в [https://www.gitorious.org/qt-training/qml-demos/trees/master/carousel gitorious] .


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


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


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


''PathView'' е нашият главен елемент. Слагайки числото 32 като модел, автоматично ще се генерират индекси за модела от 0 до 31. За всеки елемент от модела се създава по един делегат, за да се визуализира. Започваме с обикновено текстово поле, което показва индексите на елементите в модела. По-късно ще видим как се създават по-сложни делегати, но за сега нека да се фокусираме върху създаването на пътищата. Описанието на път изисква поне начална точка и един участък. В нашият случай започваме от (0, 0) и рисуваме праволинеен участък до долу в дясно. Като заредите файла в '''qmlviewer''', трябва да получите подобен изход:<br />[[Image:Carousel0.png|Carousel0.png]]
<code>
// 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 }
}
}
</code>
 
''PathView'' е нашият главен елемент. Слагайки числото 32 като модел, автоматично ще се генерират индекси за модела от 0 до 31. За всеки елемент от модела се създава по един делегат, за да се визуализира. Започваме с обикновено текстово поле, което показва индексите на елементите в модела. По-късно ще видим как се създават по-сложни делегати, но за сега нека да се фокусираме върху създаването на пътищата. Описанието на път изисква поне начална точка и един участък. В нашият случай започваме от (0, 0) и рисуваме праволинеен участък до долу в дясно. Като заредите файла в '''qmlviewer''', трябва да получите подобен изход:
[[Image:http://www.gitorious.org/qt-training/qml-demos/blobs/raw/4ef3dccc2be296484845628880c5abcebbbceb1e/carousel/Carousel0.png|Carousel0.png]]


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


Когато стартирате програмата, трябва да видите правоъгълник. Всеки [http://developer.qt.nokia.com/doc/qt-4.7/qml-pathline.html PathLine] ''[developer.qt.nokia.com]'' започва от крайната точна на предният участък, така че ние трябва да зададем само крайните точни на всеки участък. За последният участък просто задаваме началната точка и така затваряме пътя. Създаваме наше си свойство ''pathMargin'', за да си помогнем да дефинираме геометрията на пътя. Използването на потребителски свойства е най-лесният начин за създаване на допълнителни променливи в Qt Quick, но трябва да внимавате, защото те винаги са с публичен достъп.
<code>
// 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 }
}
</code>
 
Когато стартирате програмата, трябва да видите правоъгълник. Всеки [http://developer.qt.nokia.com/doc/qt-4.7/qml-pathline.html PathLine] започва от крайната точна на предният участък, така че ние трябва да зададем само крайните точни на всеки участък. За последният участък просто задаваме началната точка и така затваряме пътя. Създаваме наше си свойство ''pathMargin'', за да си помогнем да дефинираме геометрията на пътя. Използването на потребителски свойства е най-лесният начин за създаване на допълнителни променливи в Qt Quick, но трябва да внимавате, защото те винаги са с публичен достъп.


Може да искате да напишете:
Може да искате да напишете:
<code>
path: Path {
property int pathMargin: 50
startX: pathMargin
</code>


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


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


След като се научихме да създаваме правоъгълник, нека да опитаме нещо по-трудно – кръг. ''Path'' не поддържа кръгли криви, така че ще трябва да използваме приближение чрез някои от следните варианти: линии, квадратични или кубични криви ви Безие. Тъй като това не е урок по аналитична геометрия, нека директно да преминем на решението – 4 кубични криви, като използваме [http://www.tinaja.com/glib/ellipse4.pdf магическото число 0.551784] ''[tinaja.com]''. Погледнете кода:
<code>
// 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
}
}
</code>


Това ни дава перфектен кръг:<br />[[Image:Carousel2.png|Carousel2.png]]
Това ни дава перфектен кръг:
[[Image:http://www.gitorious.org/qt-training/qml-demos/blobs/raw/4ef3dccc2be296484845628880c5abcebbbceb1e/carousel/Carousel2.png|Carousel2.png]]


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


==Скриване на логиката==
== Скриване на логиката ==
 
QML файла [http://doc.qt.nokia.com/4.7/qml-extending-types.html#defining-new-components може да се дефинира като преизползваем компонент]. Когато кода ви расте, вие обикновено искате да го разделите на логически блокове в отделни файлове, за да може да се използва многократно и да е по-лесен за четене. В нашият пример ще го разделим на:
 
<code>
// Carousel3.qml
import QtQuick 1.0


<span class="caps">QML</span> файла [http://doc.qt.nokia.com/4.7/qml-extending-types.html#defining-new-components може да се дефинира като преизползваем компонент] ''[doc.qt.nokia.com]''. Когато кода ви расте, вие обикновено искате да го разделите на логически блокове в отделни файлове, за да може да се използва многократно и да е по-лесен за четене. В нашият пример ще го разделим на:
PathView {
id: view
width: 640
height: 360
model: 32
delegate: Text { text: index }
path: Ellipse {
width: view.width
height: view.height
}
}
</code>


Нашият ''Ellipse'' компонент скрива сложната логика за апроксимиране на кръга и скалиране на елементите. Когато дефинираме наши компоненти, поризлизащи от вече съществуващи, можем да дефинираме и нови свойства. Компонента ''Ellipse'' съдържа следният код, който е леко променена версия на предният:
Нашият ''Ellipse'' компонент скрива сложната логика за апроксимиране на кръга и скалиране на елементите. Когато дефинираме наши компоненти, поризлизащи от вече съществуващи, можем да дефинираме и нови свойства. Компонента ''Ellipse'' съдържа следният код, който е леко променена версия на предният:
<code>
// 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
}
}
</code>


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


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


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


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


Използваме [http://developer.qt.nokia.com/doc/qt-4.7/qml-listmodel.html ListModel] ''[developer.qt.nokia.com]'' и го пълним с примерни данни. Свободни сме да дефинираме каквито искаме свойства за елементите. Ще използваме ''iconSource'' за иконите в менюто и ''title'' за да добавим заглавие по-късно. Новият ни делегат е базиран на компонента ''Image'' и изглежда по следният начин:
<code>
// 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" }
}
</code>
 
Използваме [http://developer.qt.nokia.com/doc/qt-4.7/qml-listmodel.html ListModel] и го пълним с примерни данни. Свободни сме да дефинираме каквито искаме свойства за елементите. Ще използваме ''iconSource'' за иконите в менюто и ''title'' за да добавим заглавие по-късно. Новият ни делегат е базиран на компонента ''Image'' и изглежда по следният начин:
 
<code>
// 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
}
}
}
</code>


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


[[Image:Carousel4.png|Carousel4.png]]
[[Image:https://www.gitorious.org/qt-training/qml-demos/blobs/raw/b0cdec015684c0d2a7042f11ff53eca683c3dc52/carousel/Carousel4.png|Carousel4.png]]


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


Добаването на управление с клавиатурата е доста лесно. Първо добавяме следните три реда код, за да обработваме събития от клавиатурата:
<code>
// Carousel5.qml
PathView {
focus: true
Keys.onLeftPressed: decrementCurrentIndex()
Keys.onRightPressed: incrementCurrentIndex()
}
</code>


Всички визуални елемент има свойство ''focus''. Само един елемент в даден момент може да има това свойство сложено на ''true'' и той е този който ще получи съобщения от клавиатурата. Използваме [http://developer.qt.nokia.com/doc/qt-4.7/qml-keys.html Keys] ''[developer.qt.nokia.com]'' за да получаваме събития от клавиатурата. Можехме да използваме и по-сложният начин за обработка на съобщенията:<br />
Всички визуални елемент има свойство ''focus''. Само един елемент в даден момент може да има това свойство сложено на ''true'' и той е този който ще получи съобщения от клавиатурата. Използваме [http://developer.qt.nokia.com/doc/qt-4.7/qml-keys.html Keys] за да получаваме събития от клавиатурата. Можехме да използваме и по-сложният начин за обработка на съобщенията:
<code>
Keys.onPressed: {
if (event.key  Qt.Key_Left) decrementCurrentIndex()
    else if (event.key  Qt.Key_Right) incrementCurrentIndex()
event.accepted = true
}
</code>


Както виждате ние увеличаваме и намаляваме текущият индекс, когато се натисне бутон. Но кой точно е текущият елемент? Тъй като пътят може да приеме всякаква абстрактна форма, как може да знаем кой трябва да е тукещо активният елемент, ако изобщо има такъв? Чрез добавянето на следните редове код, можем да укажем на ''PathView'' да следи текущият елемент:
Както виждате ние увеличаваме и намаляваме текущият индекс, когато се натисне бутон. Но кой точно е текущият елемент? Тъй като пътят може да приеме всякаква абстрактна форма, как може да знаем кой трябва да е тукещо активният елемент, ако изобщо има такъв? Чрез добавянето на следните редове код, можем да укажем на ''PathView'' да следи текущият елемент:
<code>
PathView {
preferredHighlightBegin: 0
preferredHighlightEnd: 0
highlightRangeMode: PathView.StrictlyEnforceRange
}
</code>


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


==Донастройване==
== Донастройване ==
Накрая бихме желали да показваме и заглавието на текущият елемент. ''PathView'' има свойство ''highlightItem'', което бихме могли да използваме за подчертаване, но ние ще го използваме само за да изпишем [http://developer.qt.nokia.com/doc/qt-4.7/qml-text.html текст]. Тук също се вижда и как да свържете два компонента.
<code>
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
}
</code>
 
Qt Quick предоставя богат набор от възможности за оформление на текста. Цвета ''paleturquoise'' е един от [http://www.w3.org/TR/SVG/types.html#ColorKeywords имената за цветове в SVG].
Както може да видите, ние свързваме текста директно с заглавието от модела. Този начин на присвояване на стойности е бърз и лесен. Всеки път, когато ''currentIndex'' се промени, QML автоматично ще обнови текста с новата стойност. Но трябва да внимавате, може да възникне проблем. Не злоупотребявайте с директното свързване между различни обекти. На промер, когато решим да преименуваме ''title'' атрибута на модела на нещо друго, ще развалим всички свързвания, които включват ''title'' и няма да получим предупреждение, докато компонента не бъде създаден.
 
== Интернационализация ==
Вече говорихме по доста теми в този урок, който беше предназначен да бъде като бърза обиколка в Qt Quick, но ако започнем да говорим за неща като свързване със C++ код, пакетиране и разпространение към потребителите, това ще ни отклони от първоначалната ни цел да запазим нещата прости. Но има още една важна тема, която все още можем да включим- интернационализацията. Обикновено това е доста сложна тема, но Qt прави превода на приложения удивително лесен.
 
Qt включва [http://developer.qt.nokia.com/doc/qt-4.7/linguist-manual.html Qt Linguist], който е мощен инструмент за превод на приложения. Същите процедури, използвани в C++ кода важат и в QML с изключение на [http://developer.qt.nokia.com/doc/qt-4.7/qdeclarative.html няколко неща]


Накрая бихме желали да показваме и заглавието на текущият елемент. ''PathView'' има свойство ''highlightItem'', което бихме могли да използваме за подчертаване, но ние ще го използваме само за да изпишем [http://developer.qt.nokia.com/doc/qt-4.7/qml-text.html текст] ''[developer.qt.nokia.com]''. Тук също се вижда и как да свържете два компонента.<br />
Текстовете, които трябва да бъдат преведени в QML, трябва да са сложени във функцията ''qsTr()''. Така инструмента '''lupdate''' ще може да извади тези текстове и да генерира XML файлове за превод (с разширение .ts). След това преводача, може да добави превод като използва '''Qt Linguist''' и след като са готови .ts се компилират до .qm файлове като се използва програмата '''lrelease'''. За да проверите превода просто подайте .qm файла на '''qmlviewer''' с опцията -translation.


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


==Интернационализация==
<code>
ListModel {
ListElement { title: qsTr("Calendar"); iconSource: "icons/calendar.png" }
</code>


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


Qt включва [http://developer.qt.nokia.com/doc/qt-4.7/linguist-manual.html Qt Linguist] ''[developer.qt.nokia.com]'', който е мощен инструмент за превод на приложения. Същите процедури, използвани в C++ кода важат и в <span class="caps">QML</span> с изключение на [http://developer.qt.nokia.com/doc/qt-4.7/qdeclarative.html няколко неща] ''[developer.qt.nokia.com]''
<code>
// Menu1.qml
import QtQuick 1.0


Текстовете, които трябва да бъдат преведени в <span class="caps">QML</span>, трябва да са сложени във функцията ''qsTr()''. Така инструмента '''lupdate''' ще може да извади тези текстове и да генерира <span class="caps">XML</span> файлове за превод (с разширение .ts). След това преводача, може да добави превод като използва '''Qt Linguist''' и след като са готови .ts се компилират до .qm файлове като се използва програмата '''lrelease'''. За да проверите превода просто подайте .qm файла на '''qmlviewer''' с опцията -translation.
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]
}
}
</code>


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


Но това няма да проработи, защото не е позволено изрази да са стойности на елемнтите. Има няколко начина да се заобиколи този проблем. Тъй като JavaScript функциите са позволени почти навсякъде, решаваме да пренапишем ''title'' като функция:
<code>
text: view.model.title(view.currentIndex)
</code>


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


Извикваме '''lupdate''', за да генерираме <span class="caps">XML</span> файловете за превод:
<code>
lupdate . -ts Carousel_de.ts -codecfortr UTF-8
</code>


После отваряме файла с '''linguist''' и правим превода. След като сте съвршили, извиквате '''lrelease''':
После отваряме файла с '''linguist''' и правим превода. След като сте съвршили, извиквате '''lrelease''':
<code>
lrelease Carousel_de.ts
</code>


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


===Categories:===
<code>
 
usr/bin/qmlviewer -translation Carousel_de.qm Carousel7.qml
* [[:Category:Developing with Qt|Developing_with_Qt]]
</code>
** [[:Category:Developing with Qt::Qt Quick|Qt_Quick]]

Latest revision as of 12:30, 17 April 2015

This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine.
Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.

Български English


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

Въведение

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

Всичко, от което се нуждаете, за да изпълните инструкциите е qmlviewer. Ако използвате някоя от последните версии на Убунту, просто инсталирайте пакетите qt4-qmlviewer и libqt4-dev. Всички файлове от урока могат да бъдат намерени в gitorious .

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

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

PathView взима елементи от модел и ги разполага по определен път. Пътят е геометрично дефиниран като последователност от участъци. Има три вида участъци: линии, квадратични и кубични криви на Безие 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 започва от крайната точна на предният участък, така че ние трябва да зададем само крайните точни на всеки участък. За последният участък просто задаваме началната точка и така затваряме пътя. Създаваме наше си свойство pathMargin, за да си помогнем да дефинираме геометрията на пътя. Използването на потребителски свойства е най-лесният начин за създаване на допълнителни променливи в Qt Quick, но трябва да внимавате, защото те винаги са с публичен достъп.

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


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

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

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

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

// 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 файла може да се дефинира като преизползваем компонент. Когато кода ви расте, вие обикновено искате да го разделите на логически блокове в отделни файлове, за да може да се използва многократно и да е по-лесен за четене. В нашият пример ще го разделим на:

// 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
 }
}

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

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

Вече трябва да имате основни познания как се създават пътища. За това минаваме на следващата стъпка - графичното оформление. За целта ще използваме Трон подобни икони, които ще направим да изглеждат като 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 и го пълним с примерни данни. Свободни сме да дефинираме каквито искаме свойства за елементите. Ще използваме 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

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

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

// Carousel5.qml

PathView {
 
 focus: true
 Keys.onLeftPressed: decrementCurrentIndex()
 Keys.onRightPressed: incrementCurrentIndex()
 
}

Всички визуални елемент има свойство focus. Само един елемент в даден момент може да има това свойство сложено на true и той е този който ще получи съобщения от клавиатурата. Използваме Keys за да получаваме събития от клавиатурата. Можехме да използваме и по-сложният начин за обработка на съобщенията:

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.

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

Накрая бихме желали да показваме и заглавието на текущият елемент. PathView има свойство highlightItem, което бихме могли да използваме за подчертаване, но ние ще го използваме само за да изпишем текст. Тук също се вижда и как да свържете два компонента.


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. Както може да видите, ние свързваме текста директно с заглавието от модела. Този начин на присвояване на стойности е бърз и лесен. Всеки път, когато currentIndex се промени, QML автоматично ще обнови текста с новата стойност. Но трябва да внимавате, може да възникне проблем. Не злоупотребявайте с директното свързване между различни обекти. На промер, когато решим да преименуваме title атрибута на модела на нещо друго, ще развалим всички свързвания, които включват title и няма да получим предупреждение, докато компонента не бъде създаден.

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

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

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

Текстовете, които трябва да бъдат преведени в 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