Qt Quick Carousel/bg: Difference between revisions

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


<code><br />// Carousel0.qml<br />import QtQuick 1.0
<code>
// Carousel0.qml
import QtQuick 1.0


PathView {<br /> id: view<br /> width: 640<br /> height: 360<br /> model: 32<br /> delegate: Text { text: index }<br /> path: Path {<br /> startX: 0<br /> startY: 0<br /> PathLine { x: view.width; y: view.height }<br /> }<br />}<br /></code>
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''', трябва да получите подобен изход:<br />[[Image:http://www.gitorious.org/qt-training/qml-demos/blobs/raw/4ef3dccc2be296484845628880c5abcebbbceb1e/carousel/Carousel0.png|Carousel0.png]]
''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 29: Line 44:
Добре, нека да усложним малко примера и да нарисуваме цял правоъгълник. Заменете описанието на пътя от предният пример със следното:
Добре, нека да усложним малко примера и да нарисуваме цял правоъгълник. Заменете описанието на пътя от предният пример със следното:


<code><br />// Carousel1.qml<br /><br />property int pathMargin: 50<br />path: Path {<br /> startX: pathMargin<br /> startY: pathMargin<br /> PathLine { x: view.width - pathMargin; y: pathMargin }<br /> PathLine { x: view.width - pathMargin; y: view.height - pathMargin }<br /> PathLine { x: pathMargin; y: view.height - pathMargin }<br /> PathLine { x: path.startX; y: path.startY }<br />}<br /><br /></code>
<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>


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


<code><br /><br />path: Path {<br /> property int pathMargin: 50<br /> startX: pathMargin<br /><br /></code>
<code>
path: Path {
property int pathMargin: 50
startX: pathMargin
</code>


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


<code><br />// Carousel2.qml<br /><br />property int pathMargin: 50<br />property real rx: ry // view.width / 2 - pathMargin<br />property real ry: view.height / 2 - pathMargin<br />property real magic: 0.551784<br />property real mx: rx * magic<br />property real my: ry * magic<br />property real cx: view.width / 2<br />property real cy: view.height / 2<br />path: Path {<br /> startX: view.cx + view.rx; startY: view.cy<br /> PathCubic { // first quadrant arc<br /> control1X: view.cx + view.rx; control1Y: view.cy + view.my<br /> control2X: view.cx + view.mx; control2Y: view.cy + view.ry<br /> x: view.cx; y: view.cy + view.ry<br /> }<br /> PathCubic { // second quadrant arc<br /> control1X: view.cx - view.mx; control1Y: view.cy + view.ry<br /> control2X: view.cx - view.rx; control2Y: view.cy + view.my<br /> x: view.cx - view.rx; y: view.cy<br /> }<br /> PathCubic { // third quadrant arc<br /> control1X: view.cx - view.rx; control1Y: view.cy - view.my<br /> control2X: view.cx - view.mx; control2Y: view.cy - view.ry<br /> x: view.cx; y: view.cy - view.ry<br /> }<br /> PathCubic { // forth quadrant arc<br /> control1X: view.cx + view.mx; control1Y: view.cy - view.ry<br /> control2X: view.cx + view.rx; control2Y: view.cy - view.my<br /> x: view.cx + view.rx; y: view.cy<br /> }<br />}<br /><br /></code>
<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:http://www.gitorious.org/qt-training/qml-demos/blobs/raw/4ef3dccc2be296484845628880c5abcebbbceb1e/carousel/Carousel2.png|Carousel2.png]]
Това ни дава перфектен кръг:
[[Image:http://www.gitorious.org/qt-training/qml-demos/blobs/raw/4ef3dccc2be296484845628880c5abcebbbceb1e/carousel/Carousel2.png|Carousel2.png]]


Както може да видите, ние се нуждаем от по две контролни точки за всяка кубична крива. (Всички точки се дават в абсолютни координати.) Ако бяхме използвали квадратична крива, щяхме да се нуждаем само от една контролна точка. Контролните точки лежат извън кривата, но влияят на нейната форма. Може би сте запознати с концепцията от инструментите за работа с векторна графика.
Както може да видите, ние се нуждаем от по две контролни точки за всяка кубична крива. (Всички точки се дават в абсолютни координати.) Ако бяхме използвали квадратична крива, щяхме да се нуждаем само от една контролна точка. Контролните точки лежат извън кривата, но влияят на нейната форма. Може би сте запознати с концепцията от инструментите за работа с векторна графика.
Line 53: Line 123:
QML файла "може да се дефинира като преизползваем компонент":http://doc.qt.nokia.com/4.7/qml-extending-types.html#defining-new-components. Когато кода ви расте, вие обикновено искате да го разделите на логически блокове в отделни файлове, за да може да се използва многократно и да е по-лесен за четене. В нашият пример ще го разделим на:
QML файла "може да се дефинира като преизползваем компонент":http://doc.qt.nokia.com/4.7/qml-extending-types.html#defining-new-components. Когато кода ви расте, вие обикновено искате да го разделите на логически блокове в отделни файлове, за да може да се използва многократно и да е по-лесен за четене. В нашият пример ще го разделим на:


<code><br />// Carousel3.qml<br />import QtQuick 1.0
<code>
// Carousel3.qml
import QtQuick 1.0


PathView {<br /> id: view<br /> width: 640<br /> height: 360<br /> model: 32<br /> delegate: Text { text: index }<br /> path: Ellipse {<br /> width: view.width<br /> height: view.height<br /> }<br />}<br /></code>
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><br />// Ellipse.qml<br />import QtQuick 1.0
<code>
// Ellipse.qml
import QtQuick 1.0


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


Както може да видите, започваме пътя от втори квадрант. Целта е да първият елемент да е най-отдолу. Това е позицията и на текущият елелемнт.
Както може да видите, започваме пътя от втори квадрант. Целта е да първият елемент да е най-отдолу. Това е позицията и на текущият елелемнт.
Line 71: Line 190:
Първо, нека създаден необходимият модел. Започнахме с прост изкуствен модел и сега ще го заменим с истински. Това е кода за него:
Първо, нека създаден необходимият модел. Започнахме с прост изкуствен модел и сега ще го заменим с истински. Това е кода за него:


<code><br />// Model0.qml<br />import QtQuick 1.0
<code>
// Model0.qml
import QtQuick 1.0


ListModel {<br /> ListElement { title: "Calendar"; iconSource: "icons/calendar.png" }<br /> ListElement { title: "Setup"; iconSource: "icons/develop.png" }<br /> ListElement { title: "Internet"; iconSource: "icons/globe.png" }<br /> ListElement { title: "Messages"; iconSource: "icons/mail.png" }<br /> ListElement { title: "Music"; iconSource: "icons/music.png" }<br /> ListElement { title: "Call"; iconSource: "icons/phone.png" }<br />}<br /></code>
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>


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


<code><br />// Carouse5.qml<br />import QtQuick 1.0
<code>
// Carouse5.qml
import QtQuick 1.0


Rectangle {<br /> width: 640<br /> height: 360<br /> color: "black"<br /> PathView {<br /> id: view<br /> width: parent.width<br /> height: parent.height + y<br /> y: -33<br /> model: Menu0 {}<br /> delegate: Image {<br /> source: iconSource<br /> width: 64<br /> height: 64<br /> scale: 4. * y / parent.height<br /> z: y<br /> smooth: true<br /> opacity: scale / 2.<br /> }<br /> path: Ellipse {<br /> width: view.width<br /> height: view.height<br /> }<br /> }<br />}<br /></code>
Rectangle {
<br />Кода не е много, нали? Но вече си има всичко необходимо за разкошно 3D меню. Имитираме 3D като намаляваме размера на иконите когато отивам към горната част на екрана. Намаляването на прозрачността също спомага за този ефект. Ако отворите ''Carousel4.qml'' в '''qmlviewer''', трябва да видите:
width: 640
<br />[[Image:https://www.gitorious.org/qt-training/qml-demos/blobs/raw/b0cdec015684c0d2a7042f11ff53eca683c3dc52/carousel/Carousel4.png|Carousel4.png]]
height: 360
<br />h2. Добавяне на управление с клавиатурата
color: "black"
<br />Добаването на управление с клавиатурата е доста лесно. Първо добавяме следните три реда код, за да обработваме събития от клавиатурата:
PathView {
<br /><code><br />// Carousel5.qml<br /><br />PathView {<br /> <br /> focus: true<br /> Keys.onLeftPressed: decrementCurrentIndex()<br /> Keys.onRightPressed: incrementCurrentIndex()<br /> <br />}<br /><br /></code>
id: view
<br />Всички визуални елемент има свойство ''focus''. Само един елемент в даден момент може да има това свойство сложено на ''true'' и той е този който ще получи съобщения от клавиатурата. Използваме "Keys":http://developer.qt.nokia.com/doc/qt-4.7/qml-keys.html за да получаваме събития от клавиатурата. Можехме да използваме и по-сложният начин за обработка на съобщенията:<br /><code><br />Keys.onPressed: {<br /> if (event.key  Qt.Key_Left) decrementCurrentIndex()
width: parent.width
     else if (event.key  Qt.Key_Right) incrementCurrentIndex()<br /> event.accepted = true<br />}<br /></code>
height: parent.height + y
<br />Както виждате ние увеличаваме и намаляваме текущият индекс, когато се натисне бутон. Но кой точно е текущият елемент? Тъй като пътят може да приеме всякаква абстрактна форма, как може да знаем кой трябва да е тукещо активният елемент, ако изобщо има такъв? Чрез добавянето на следните редове код, можем да укажем на ''PathView'' да следи текущият елемент:
y: -33
<br /><code><br /><br />PathView {<br /> <br /> preferredHighlightBegin: 0<br /> preferredHighlightEnd: 0<br /> highlightRangeMode: PathView.StrictlyEnforceRange<br /> <br />}<br /><br /></code>
model: Menu0 {}
<br />В нашият случай, решихме да направим първият елемент на пътя текущ. Сега вече трябва да можем да навигираме с клавиатурата като увеличаваме и намаляваме текущият елемент. Опитайте като отворите ''Carousel5.qml'' в '''qmlviewer'''.
delegate: Image {
<br />h2. Донастройване
source: iconSource
<br />Накрая бихме желали да показваме и заглавието на текущият елемент. ''PathView'' има свойство ''highlightItem'', което бихме могли да използваме за подчертаване, но ние ще го използваме само за да изпишем "текст":http://developer.qt.nokia.com/doc/qt-4.7/qml-text.html. Тук също се вижда и как да свържете два компонента.<br /><code><br /><br />PathView {<br /> id: view<br /> <br />}<br />Text {<br /> id: label<br /> text: view.model.get(view.currentIndex).title<br /> color: "paleturquoise"<br /> font.pixelSize: 16<br /> font.bold: true<br /> anchors.horizontalCenter: parent.horizontalCenter<br /> anchors.bottom: parent.bottom<br />}<br /><br /></code>
width: 64
<br />Qt Quick предоставя богат набор от възможности за оформление на текста. Цвета ''paleturquoise'' е един от "имената за цветове в SVG":http://www.w3.org/TR/SVG/types.html#ColorKeywords.<br />Както може да видите, ние свързваме текста директно с заглавието от модела. Този начин на присвояване на стойности е бърз и лесен. Всеки път, когато ''currentIndex'' се промени, QML автоматично ще обнови текста с новата стойност. Но трябва да внимавате, може да възникне проблем. Не злоупотребявайте с директното свързване между различни обекти. На промер, когато решим да преименуваме ''title'' атрибута на модела на нещо друго, ще развалим всички свързвания, които включват ''title'' и няма да получим предупреждение, докато компонента не бъде създаден.
height: 64
<br />h2. Интернационализация
scale: 4. * y / parent.height
<br />Вече говорихме по доста теми в този урок, който беше предназначен да бъде като бърза обиколка в Qt Quick, но ако започнем да говорим за неща като свързване със C++ код, пакетиране и разпространение към потребителите, това ще ни отклони от първоначалната ни цел да запазим нещата прости. Но има още една важна тема, която все още можем да включим- интернационализацията. Обикновено това е доста сложна тема, но Qt прави превода на приложения удивително лесен.
z: y
smooth: true
opacity: scale / 2.
}
path: Ellipse {
width: view.width
height: view.height
}
}
}
</code>
 
Кода не е много, нали? Но вече си има всичко необходимо за разкошно 3D меню. Имитираме 3D като намаляваме размера на иконите когато отивам към горната част на екрана. Намаляването на прозрачността също спомага за този ефект. Ако отворите ''Carousel4.qml'' в '''qmlviewer''', трябва да видите:
 
[[Image:https://www.gitorious.org/qt-training/qml-demos/blobs/raw/b0cdec015684c0d2a7042f11ff53eca683c3dc52/carousel/Carousel4.png|Carousel4.png]]
 
h2. Добавяне на управление с клавиатурата
 
Добаването на управление с клавиатурата е доста лесно. Първо добавяме следните три реда код, за да обработваме събития от клавиатурата:
 
<code>
// Carousel5.qml
PathView {
focus: true
Keys.onLeftPressed: decrementCurrentIndex()
Keys.onRightPressed: incrementCurrentIndex()
}
</code>
 
Всички визуални елемент има свойство ''focus''. Само един елемент в даден момент може да има това свойство сложено на ''true'' и той е този който ще получи съобщения от клавиатурата. Използваме "Keys":http://developer.qt.nokia.com/doc/qt-4.7/qml-keys.html за да получаваме събития от клавиатурата. Можехме да използваме и по-сложният начин за обработка на съобщенията:
<code>
Keys.onPressed: {
if (event.key  Qt.Key_Left) decrementCurrentIndex()
     else if (event.key  Qt.Key_Right) incrementCurrentIndex()
event.accepted = true
}
</code>
 
Както виждате ние увеличаваме и намаляваме текущият индекс, когато се натисне бутон. Но кой точно е текущият елемент? Тъй като пътят може да приеме всякаква абстрактна форма, как може да знаем кой трябва да е тукещо активният елемент, ако изобщо има такъв? Чрез добавянето на следните редове код, можем да укажем на ''PathView'' да следи текущият елемент:
 
<code>
PathView {
preferredHighlightBegin: 0
preferredHighlightEnd: 0
highlightRangeMode: PathView.StrictlyEnforceRange
}
</code>
 
В нашият случай, решихме да направим първият елемент на пътя текущ. Сега вече трябва да можем да навигираме с клавиатурата като увеличаваме и намаляваме текущият елемент. Опитайте като отворите ''Carousel5.qml'' в '''qmlviewer'''.
 
h2. Донастройване
 
Накрая бихме желали да показваме и заглавието на текущият елемент. ''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'' е един от "имената за цветове в 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
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
Line 102: Line 317:
Има няколко проблема, за които трябва да знаете, така че нека да преведем заглавията на менюто. Може би си мислите, че можете просто да сложите ''title'' текста във функцията по този начин:
Има няколко проблема, за които трябва да знаете, така че нека да преведем заглавията на менюто. Може би си мислите, че можете просто да сложите ''title'' текста във функцията по този начин:


<code><br />ListModel {<br /> ListElement { title: qsTr("Calendar"); iconSource: "icons/calendar.png" }<br /> <br /></code>
<code>
ListModel {
ListElement { title: qsTr("Calendar"); iconSource: "icons/calendar.png" }
</code>


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


<code><br />// Menu1.qml<br />import QtQuick 1.0
<code>
// Menu1.qml
import QtQuick 1.0


ListModel {<br /> ListElement { iconSource: "icons/calendar.png" }<br /> ListElement { iconSource: "icons/develop.png" }<br /> ListElement { iconSource: "icons/globe.png" }<br /> ListElement { iconSource: "icons/mail.png" }<br /> ListElement { iconSource: "icons/music.png" }<br /> ListElement { iconSource: "icons/phone.png" }<br /> function title(index) {<br /> if (title["text"] === undefined) {<br /> title.text = [<br /> qsTr("Calendar"),<br /> qsTr("Setup"),<br /> qsTr("Internet"),<br /> qsTr("Messages"),<br /> qsTr("Music"),<br /> qsTr("Call")<br /> ]<br /> }<br /> return title.text[index]<br /> }<br />}<br /></code>
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>


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


<code><br />text: view.model.title(view.currentIndex)<br /></code>
<code>
text: view.model.title(view.currentIndex)
</code>


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


<code><br />lupdate . -ts Carousel_de.ts -codecfortr UTF-8<br /></code>
<code>
lupdate . -ts Carousel_de.ts -codecfortr UTF-8
</code>


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


<code><br />lrelease Carousel_de.ts<br /></code>
<code>
lrelease Carousel_de.ts
</code>


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


<code><br />usr/bin/qmlviewer -translation Carousel_de.qm Carousel7.qml<br /></code>
<code>
usr/bin/qmlviewer -translation Carousel_de.qm Carousel7.qml
</code>

Revision as of 12:22, 25 February 2015


Български 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