Learn qt Quick from scratch (1)--Experience the fast build dynamic effect interface

Since the release of Qt4 in 2005, QT has provided framework services for tens of thousands of applications, and now QT has basically supported all development platforms, including desktop, embedded, Android, IOS, WP and other mobile operating platforms. Even support the latest Ubuntu Phone.

QT Quick is a UI technology group, the QT quick itself mainly contains qml, JavaScript, QT C + + three technology. The protagonist is QML (Qt declarative Module), which is the main object I intend to describe in this series. The main role of QML I understand is that the interface design and program logic decoupling, usually the front-end requirements change far beyond the background logic, so interface and logic separation is not only conducive to the division of labor between developers, but also provides a faster iterative speed of the possibility, but also greatly reduce the late maintenance costs of the program.

The main framework for this set of technologies is as follows

QML is a simple scripting language, and syntax is close to CSS, so it's quite simple to learn. QML first appeared in the Qt4.7 version, from 4.x over to 5.x counted up altogether after 10 years. The latest QML has improved considerably compared to the 4.x era of QML (the features of QT Quick 2.0 are listed below):

(1) The realization of the scene based on OpenGL (ES), improve the efficiency of drawing.

(2) Qml and JavaScript dominate the creation of UI, background graphics drawing using C + +. Efficient, flexible and scalable.

(3) Cross-platform: here is not the full sense of cross-platform, where the cross-platform refers to the compilation of cross-platform "write once, compile everywhere"

Here we first create a simple QT quick application that has a preliminary impression on QML.

Our goal is to create a mouse click on the windmill picture can be turned on the screen after the program, the following code can be casually looked at, do not understand it's OK, follow the steps I gave to experience the line.

Create a new Qtquick project:

Choose QT quick2.x

After the creation is about this, the green button will appear a simple window:

Put two picture material in the project directory

To add resources to the QT project, first create a resource prefix:

Put two pictures in

Edit MAIN.QML

import QtQuick 2.0import qtquick.window 2.0Window{ID:Root;Visible:true;width: -;Height: -;Image {ID:BG Width:root.width;Height:Root.height;Source:"Qrc:///images/bg.png";//path based on your own set of modifications}Image{ID:Wheel;Anchors.centerin:Parent;Source:"Qrc:///images/wheel.png";//path changes according to your own settings Behavior on rotation {numberanimation {duration: the}} Mousearea{width:Wheel.width;Height:Wheel.height;onclicked:{wheel.rotation =; }        }    }}

Run, is not a beautiful window program appearing in front of it? Tap the middle of the windmill and it will turn up.

Source code Download: http://download.csdn.net/detail/csulennon/8670283

The basic syntax for QML is described in the next article.

Learn qt Quick from scratch (1)--Experience the fast build dynamic effect interface