Hello,
Qt Quick makes fluid UI creation much easier than ever before and allows one to seamlessly let UX designer and C++ developers work together on the same source code. With release 4.7.0, Qt Quick provides the fundamental UI primatives to create fluid UIs.
The cornerstone of Qt Quick is QML. It is a declarative language which extends Javascript. It is designed for writing UI. In this post, let's look at some code which simply animates some text to get a feel for the syntax and structure. Consider this code.
Rectangle {
id: rectangle1
width: 360
height: 640
color: "brown"
Text {
color: "green"
text: "Hello World"
anchors.top: parent.top
font.pointSize: 24
font.bold: true
}
}
Here we define a brown Rectangle which will define the background. Text simple defines green text element which says "Hello World". Since the text is anchored to the top of the Rectangle, it will appear at the top of the screen.
Let's animate the text, so that, it will move to the bottom of the screen. To do this we will define another state for the text. By declaring the Text element, we have already defined an implicit state. In addition, we will need to define a Transition element. This tells the Qt runtime how to move between these states. Here is the updated Text element.
Text {
id: helloText
color: "green"
text: "Hello World"
font.pointSize: 24
font.bold: true MouseArea { id: mouseArea; anchors.fill: parent } states: State {
name: "down"; when: mouseArea.pressed == true
PropertyChanges { target: helloText; y: 555; rotation: 180; color: "yellow" }
} transitions: Transition {
from: ""; to: "down"; reversible: true
ParallelAnimation {
NumberAnimation { properties: "y,rotation"; duration: 500; easing.type: Easing.InOutQuad }
ColorAnimation { duration: 500 }
}
}
}
The state "down" changes three properties: the y coordinate, rotations the text 180 degrees and changes the color to yellow. This is simply a declaration. Without a transtion, nothing happens. This transition goes from the implicit state, represented by an empty string, to the "down" state. It applies to animates in parallel. The first modifies the y value by rotating it and moving it down to the y coordinate defined by the "down" state. The other amiation changes the color from green to yellow.
-jk