Since Qt4 was released in 2005, Qt has provided a framework for thousands of applications. Qt now supports almost all development platforms, including desktop and embedded platforms, Android, IOS, Windows Phone, and even the latest Ubuntu Phone.

Qt Quick is a UI technology group, Qt Quick itself mainly contains QML, JavaScript, Qt C++ three technologies. The main character is QML (Qt Declarative Module), which is the main object I intend to describe in this series. I understand that the main function of QML is to decouple the interface design from the program logic. Generally speaking, the change of front-end requirements is far more than that of background logic. Therefore, the separation of interface and logic is not only conducive to the division of labor between developers, but also provides the possibility of faster iteration speed, and will greatly reduce the maintenance cost of the program in the later stage.

The main framework of this technology is as follows

Review images

QML is a simple scripting language with a syntax similar to CSS, so it’s fairly easy to learn. QML first appeared in Qt4.7, and it took ten years to move from 4.x to 5.x. The latest QML is a big improvement over QML in the 4.x era (here are some features of Qt Quick 2.0) :

(1) Scene realization based on OpenGL(ES) to improve the efficiency of graphic drawing.

(2) QML and JavaScript dominate the creation of UI, and C++ is used for background graphics rendering. Efficient, flexible and scalable.

(3) Cross-platform: here can not be said to be a full sense of cross-platform, cross-platform refers to the compilation of cross-platform “write once, compile everywhere”

Here we start by creating a simple Qt Quick application to get an idea of QML.

Our goal is to create a mouse click on the picture of the windmill can be turned on the screen of the application, the following code can be looked at casually, do not understand, follow the steps I give you to experience the line.

Review images

Create a new QtQuick project:

Review images

Review images

Choose the Qt Quick2. X

Review images

Once created, it looks something like this. Click the green button and a simple window will appear:

Review images

Place the two images in the project directory

Review images

To add a resource to a Qt project, first create a resource prefix:

Review images

Review images

Review images

Add two pictures

Review images

Edit the main QML

Import QtQuick 2.0 import QtQuick.Window 2.0 Window {id:root; visible: true; width: 600; height: 400; Image { id: bg width: root.width; height:root.height; source: "qrc:///images/bg.png"; } Image {id: wheel; anchors.centerIn: parent; source: "qrc:///images/wheel.png"; Behavior on rotation {NumberAnimation {duration: 5000}} MouseArea {width: wheel.width; height: wheel.height; onClicked: { wheel.rotation = 360; }}}}Copy the code

Run, is not a beautiful window procedures appear in front of it? Click on the windmill in the middle and it will spin.

The source code download: download.csdn.net/detail/csul…

The basic syntax of QML will be introduced in this article, which starts with a simple example.

Join the 1KE Learning Club

1KE Learning Club is a private club for 1KE students only