2.1.1 QML grammar foundation I

import QtQuick 2.9
Rectangle{
    id:root
    width:400
    height:400
    color:"blue"
    Image{
        source:"img/hi.png"
        anchor.centerIn:parent
    }
}

1. Import statement

import QtQuick 2.9 ： Imported QtQuick modular , Including all kinds of QML type , If not used import sentence ,Rectangle and Image Types cannot be used

2. Objects and properties

In the above code , We created Rectangle Root object and Image Sub object .QML Objects start with a capital letter , There is a pair of curly braces behind it , The brackets contain the... Of the object id、 Attribute value or sub object .

An object usually specifies a at the beginning id, This id It's here qml It has to be the only one . We can go through id Value identifies and references this object in other objects , but id The property of a value is not an attribute .

except id Set up , stay Rectangle It also sets width、height and color Equal attribute , Property through “ attribute : value ” Syntax to initialize , Property and its value are separated by colons .

When attributes can be written separately , No semicolon at the end ; Attribute values are written on one line , Must be separated by semicolons .

3. Layout

anchor.centerIn It belongs to anchor layout

4. expression

Item{
     id：root
     width:text1.width+30
     Text{
          id:text1
          width:30
     }
}

Include references to other objects or attributes in the expression , When the value of the expression changes is , Properties that take this expression as a value are automatically updated to the new value .

5. Printout

console.log() and console.debug() To output debugging information , similar qt C++ Medium qDebug()

6.import Import statement

import QtQuick 2.9 as CoreItems
import "../textwidgets" as Mymodule
CoreItems.Rectangle{
width:100;height:100
MyMudule.Text{ text:"Hello Qt!"}
CoreItems.Text{text:"Hello from Qt Quick"}
}

（1） If QtQuick And custom Mymodule There are Text type , In the same Qml These two modules are used in , You need to add as Qualifier after

（2） Add the upper bound qualifier , Use any object preceded by a qualifier