QT Development (51)--qtquick Basics

QT Development (51)-- QtQuickBasicFirst, QtQuick Introduction

QT provides two separate ways to create a user interface.

QtQuick The module provides a markup language for creating a smooth, fresh user interface. the QtQuick module is suitable for interfaces that require animated elements, as well as scenarios where applications run primarily on small screens and multi-touch devices.

qtwidgets The module provides more support for traditional desktops and more integration with the target platform, regardless of the target platform MacOSX,Windows,KDE,GNome. qtwidgets is a very efficient C + + based class library that contains many common user interface components that can easily extend new functionality for these existing assemblies.

The QtQuick module is the standard library for writing applications using the QML language. The Qt QML module provides the QML engine and language architecture, and the QtQuick module provides all the underlying types of user interface creation using the QML language.

The QtQuick module provides two sets of interfaces,the QML API provides a QML type for creating a user interface using QML language , andthe C + + API provides an extension of the QML application interface using C + + code .

QT4.7 began introducing the QML,QML (Qt meta-object language,qt Meta Object language), a declarative programming language used to describe the user interface of an application. QML uses a number of visual components and interactions between these components to describe the user interface , which is a highly readable language that enables components to interact dynamically and allows components to be easily reused and customized in the user interface. QML allows developers and designers to create high-performance, smooth animated, visually appealing applications in a similar way. QML provides a highly readable, JSON-like declarative syntax and provides support for the necessary JavaScript statements and dynamic property bindings.

Second, Qt Quick Engineering Examples 1. Create Qt Quick Application

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/8B/0A/wKiom1hCekjS-AxfAACEXyjUcx0044.png "title=" Picture 28.png "alt=" Wkiom1hcekjs-axfaacexyjucx0044.png "/>

Select Qt Quick application.

once the project is created, The Qt Quick project contains qml files, source files,

2. QML file

MAIN.QML file:

Import QtQuick 2.6import Qtquick.window 2.2 window{visible:true width:640 height:480 title:qstr ("Hello Wo        Rld ") mainform {anchors.fill:parent mousearea.onclicked: {qt.quit (); }    }}

The QML document defines a Qml object tree, which consists of two parts: an Import Importer section and an object declaration section.

Import imports statements are similar to # include in C + +, and only the relevant modules are imported to use the types and features in them. The imported module QtQuick module is the set of components that are selected when the project is created, contains the basic types and functions required to create the user interface, and the window type is available in the Qtquick.window module to create a top-level window for the QT quick scene.

Object declaration section, the object declaration in the QML document defines what is to be displayed in the visual scene. The project created two objects: the Window object and its sub-object mainform. Objects (object) are specified by their type (type), begin with an uppercase letter, followed by a pair of curly braces, and enclose the attribute definition of an object, such as the object's property value or its child object. The outermost object is called the root object, such as window, the object defined within the root object, called the child object of the root object, such as MainForm is the child of the window. Visible in window is the property of window, which sets whether or not Windows are displayed, and you can view all the properties and usages of a type in the Help document.

MainForm is not a type in the Qtquick module, but a custom user interface form (QT Quick UI forms), a concept introduced after QT 5.4, similar to the UI file in QT C + + programming, MAINFORM.UI.QML Files can only be edited in design mode.

import qtquick 2.6rectangle {     property alias mousearea: mousearea    width: 360     height: 360    MouseArea {         id: mousearea        anchors.fill: parent     }    text {        anchors.centerin:  parent        text:  "Hello world"      }} 

in the main.qml file, MainForm is an instance of MAINFORM.UI.QML, and MainForm internally calls the Mousearea event handler for the OnClicked property. Equivalent to the OnClicked event handler that invokes the Mousearea object in MainForm.ui.qml, Qt.quit () indicates that the command to execute when the mouse is clicked across the rectangle is to exit the program.

all the QML files are placed in a. qrc file in the form of a resource, QML files do not need to be compiled, similar to footage.

3. source File

Main.cpp file:

#include <QGuiApplication> #include <QQmlApplicationEngine> int main (int argc, char *argv[]) {Qguiapplicati     On app (argc, argv);    Qqmlapplicationengine engine;     Engine.load (Qurl (qstringliteral ("qrc:/main.qml")); return app.exec ();}

The main function defines a Qqmlapplicationengine object and uses it to load the main.qml file. The Qqmlapplicationengine class combines the functions of the Qqmlengine and qqmlcomponent two classes, providing a convenient way to load a qml file, However, all visual content of the Qml file must be placed in the Window object in order to eventually display it.

4. PRI Project subsidiary documents

Deployment.pri file:

unix:!android{IsEmpty (target.path) {qnx {target.path =/tmp/$${target}/bin} else {Target.path =/opt/$${target}/bin} export (Target.path)} Installs + = Targ ET} export (Installs)

5. Create a QML file

to create in the project QML file, create qml file qml template can choose qt Quick 1,qt Quick 2 and Qtquickui file three kinds,qt Quick 1 the QtQuick 1.1 module is imported for qt version4, QtQuick 2 import QtQuick 2.0 module for QT 5 the QtQuick UI file is built by default using the designer.

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/8B/0A/wKiom1hCem_RPx1SAABgqfS0rW4628.png "title=" Picture 29.png "alt=" Wkiom1hcem_rpx1saabgqfs0rw4628.png "/>

The QML file does not need to be compiled and can be run directly. QT provides two tools for running QML files Qmlviewer and Qmlscene, theformer is the product of the Qt 4 era, mainly used to show the import The QML file for The 1.1 module is QtQuick , and Qmlscene is used to display QtQuick files that have been imported 2.0 QML later . Select the tools → external →qtquick→qt Quick 2Preview menu item to display the contents of the QML document that is now open in Qmlscene .

Third, Extended QML Program 1. Add text display

Import QtQuick 2.0 Rectangle {width:100 height:62 text {text: "Hello World"}}

The text object is used to display a piece of text whose Text property is used to specify the textual content to display

2. Anchor Layout

Each component in the QML has an invisible set of anchors, in the upper, lower, left, right, center, etc., to define the relative position of the component itself and other components. Centerin refers to the text component at the center of the parent component, andthe parent refers to the Rectangle of the text.

Import QtQuick 2.0 Rectangle {width:100 height:62 text {anchors.centerIn:parent text: "Hell O World "}}

3. Mouse Interaction

Import QtQuick 2.0 Rectangle {width:100 height:62 text {anchors.centerIn:parent text: "Hell O World "} mousearea {anchors.fill:parent onclicked: {qt.quit ()}}}

Mousearea Sub-object is the mouse area, is an invisible component, through the Mousearea object can achieve mouse interaction. The Anchors.fill is populated with the mouse area covering the entire rectangle window. OnClicked is a signal processing function in QT C + +, the signal processor, whose syntax is on<signal>,onclicked is the processing of the clicked Click Signal, The Qt.quit () global function executes when the mouse is clicked on the window , and the result is to exit the program.

4. ID attributes and attribute aliases

The ID attribute is the name of an object that uniquely identifies an object that can be referenced in other objects by ID .

import qtquick 2.0 rectangle {     width: 100    height: 62    property  alias  mArea:mouseArea    Text    {         anchors.centerIn: parent        text:  "Hello  world "    }    MouseArea    {         id:mousearea        anchors.fill:  parent    }} 

The Mousearea object, set with its ID of mousearea, can be accessed through Mouseareain Rectangle Mousearea object. In other QML files that access Rectangle within a child object, you need to customize the property in Rectangle, and the property needs to be a property alias for the child object, such as the declared MArea property ,alias indicates that mArea is the alias of Mousearea.

marea.onclicked:{qt.quit ()}

This article from "Life is endless, struggle not only" blog, declined reprint!

Qt Development (51)--qtquick Basics