QML type system

We all know ,Qt Quick It provides another way of interface development , differ Widget and Graphics Use C++ Development ,Qt Quick It's using QML.QML Is a descriptive scripting language , The file format is .qml ending , The syntax format is very similar to CSS, Support javascript Form of programming control .

What we know C++ Basic data types for ,int、bool、double etc. , Composite type structure 、 Class etc. , Relative QML Since it's a programming language , Naturally, it also has its own set of data types .

QML There are mainly the following types of sources ：

• QML Its own basic data type
• Registered C++ type
• qml The custom type provided by the file
• JS data type

Basic data type

QML Basic data types supported by itself

bool	Binary true/false value
double	Number with a decimal point, stored in double precision
enumeration	Named enumeration value
int	Whole number, e.g. 0, 10, or -20
list	List of QML objects
real	Number with a decimal point
string	Free form text string
url	Resource locator
var	Generic property type

among bool、double、int、real、string and C++ The basic types in are basically the same , There's no need to introduce it too much

enumeration（ enumeration ）

Enumeration and C++ The enumeration type in is the same , Is a set containing several constants , Often used to indicate status , Improve code readability , Support conversion int type

The following is a rectangle of the package , Use enum Express 2 The medium state corresponds to different colors

import QtQuick 2.0

Rectangle {
    width: 100
    height: 100

    enum RectType {
        Type1,
        Type2
    }

    property int testType: MyRect.RectType.Type1

    color: testType === MyRect.RectType.Type1 ? "red" : "blue"
}

MyRect {
    testType: MyRect.RectType.Type1
}

url

url Type refers to a resource locator ( for example , Like a file name ). It can be absolute , for example “http://qt-project.org”, It can also be relative , for example “pics/logo.png”. relative URL Is relative to containing components URL To analyze

Image { source: "pics/logo.png" }

At first glance , I thought source yes string Type? , In fact, there are still differences , You can see the following examples and explanations

 Image {
     source: "pics/logo.png"

     Component.onCompleted: {         
         // source Type cannot match string Compare 
         console.log(source == "pics/logo.png")

         //  practical Qt.resovledUrl()  hold string Turn into source type 
         console.log(source == Qt.resolvedUrl("pics/logo.png"))

         //  Print absolute path  "file:///path/to/pics/logo.png"
         console.log(source.toString())
     }
 }

var（ Generic type ）

Same as js equally , Support var Common types of , The definition of type in scripting language is relatively loose , Generally, dynamic type checking is automatically performed at runtime . and C++ Such compiled languages are strongly typed or statically defined , The type of variable needs to be specified in the program .

    property var aNumber: 100
    property var aBool: false
    property var aString: "Hello world!"
    property var anotherString: String("#FF008800")
    property var aColor: Qt.rgba(0.2, 0.3, 0.4, 0.5)
    property var aRect: Qt.rect(10, 10, 10, 10)
    property var aPoint: Qt.point(10, 10)
    property var aSize: Qt.size(10, 10)
    property var aVector3d: Qt.vector3d(100, 100, 100)
    property var anArray: [1, 2, 3, "four", "five", (function() { return "six"; })]
    property var anObject: { "foo": 10, "bar": 20 }
    property var aFunction: (function() { return "one"; })

You can see ,var Many data types can be referenced

But in use Qt Creator When , Many types will report warnings , Warning it is recommended to specify the type instead of var, Specifically, I don't know why , Of course, it's OK to use , It is annoying to prompt various warnings

 QML The composite type provided by the module

QML The module provides a pair of composite types , It's basically benchmarking Qt Supported built-in types , Such as size、rect、color、font、point、rect etc.

date	Date value
point	Value with x and y attributes
rect	Value with x, y, width and height attributes
size	Value with width and height attributes

Qt The composite type provided can be through Qt Construct global objects

    property var aColor: Qt.rgba(0.2, 0.3, 0.4, 0.5)
    property var aRect: Qt.rect(10, 10, 10, 10)
    property var aPoint: Qt.point(10, 10)
    property var aSize: Qt.size(10, 10)

QML object type

QML An object type is one that can be instantiated QML Type of object , As we know Rectangle.QML Object types can be registered C++ type , You can also create a new .qml File generation

adopt qml File defines QML object type

This is a very common usage , This is the way that controls are encapsulated , The file name is the type name , The file name defined in the above enumerated type example is MyRect.qml, When used, the type is MyRect

The naming of files should follow certain rules ：

• Must consist of alphanumeric characters or underscores
• Must start with a capital letter

The engine will automatically recognize this document as QML The definition of type , When the engine is parsing QML When searching for a type name in the sibling directory , Types defined in this way can be used by others in the same directory QML file .

from C++ Define object types

This method is the registration introduced before C++ type , Inherited from QObject Class registered to QML In the system , It can be like ordinary QML The same type is used , To be specific, see here

JS type

QML Engine support JavaScript Objects and arrays . Any standard JavaScript All types can use general var Type to create and store .

import QtQuick 2.0

Item {
    property var theArray: []
    property var theDate: new Date()

    Component.onCompleted: {
        for (var i = 0; i < 10; i++)
            theArray.push("Item " + i)
        console.log("There are", theArray.length, "items in the array")
        console.log("The time is", theDate.toUTCString())
    }
}

Property change behavior of basic types

When the data changes , Use on+ name +Changed The slot function of can listen for data changes , This feature is very practical ,QML no C++ That's convenient for debugging , With this method, it is more convenient to track the changes of data , Convenient debugging .

property int aNumber: 100
onANumberChanged: {
    console.log("aNumber changed")
}

We need to pay attention to , Whenever any attribute of the basic type changes and the attribute itself changes , Will send a basic type of property change signal . Take the following code for example :

Text {
    onFontChanged: console.log("font changed")

    Text { id: otherText }

    focus: true

    // as long as font Any change in the value of an attribute of will trigger onFontChanged
    Keys.onDigit1Pressed: font.pixelSize += 1
    Keys.onDigit2Pressed: font.b = !font.b
    Keys.onDigit3Pressed: font = otherText.font
}

Reference resources ：

The QML Type System

QML Basic Types

QML Object Types