01 Relevant knowledge points derived from the first Qml program example

    QML is part of the Qt Quick technology launched by Qt, and it is a new easy-to-learn language.

    QML is a descriptive language used to describe a program's user interface: what it looks like, and how it behaves.

    In QML, a user interface is specified as a tree of objects with properties. This makes Qt more accessible to people with little or no programming experience.
    QML is a new core component of Qt Quick in Qt4.7.0: it is a markup language, which consists of the markup of QtQuick encapsulated in the Item {} element. It has been designed from the ground up to create a user interface that is quick and easy for developers to understand. The user interface can use JavaScript code to provide and enhance additional functionality. Qt Quick can easily and quickly expand its capabilities using the existing local Qt C++. The simple declarative UI is called the front end, and the native part is called the back end. This separates the computationally intensive parts of the program from the parts that come from the application user interface.
    In the project, the front-end development uses QML/JaveScript, and the back-end code development uses Qt C++ to complete the system interface and calculation work, which can naturally separate the developers who design the interface from the function developers.
    Create a simple HelloWorld, which can be implemented step by step in QtCreator. You can refer to the relevant steps on the Internet. The code is as follows:

import QtQuick 2.12

Rectangle {
    id: myRectangle;

    width: 360; height: 360;
    color: "lightgray";

    Text {
        text: "Hello World"; color: "darkgreen";
        x: 100; y:100;
        anchors.centerIn: parent;
    }
}

import QtQuick 2.12

Rectangle {
    id: myRectangle;

    width: 360; height: 360;
    color: "lightgray";

    Text {
        text: "<h2>Hello World</h2>"; color: "darkgreen";
        x: 100; y:100;
        anchors.centerIn: parent;
    }
}

      The knowledge points that need to be highlighted here are the Item object and anchors:

Item

1. The Item type is the basic type of all visual items in Qt Quick;
2. All visual items in Qt Quick inherit from Item. Note that  the Item object has no visual appearance , but it defines the common properties of all visual items.
3. The Item type can be used as the root element to contain visual items.

anchors

        The anchors attribute of Item includes the following conditions:

// 4个边：
anchors.top : AnchorLine
anchors.bottom : AnchorLine
anchors.left : AnchorLine
anchors.right : AnchorLine

// 2个居中
anchors.horizontalCenter : AnchorLine
anchors.verticalCenter : AnchorLine

// 基线
anchors.baseline : AnchorLine

// 填充与居中
anchors.fill : Item
anchors.centerIn : Item

// 1+4个边界
anchors.margins : real
anchors.topMargin : real
anchors.bottomMargin : real
anchors.leftMargin : real
anchors.rightMargin : real

// 2个居中的偏移值+基线的偏移值
anchors.horizontalCenterOffset : real
anchors.verticalCenterOffset : real
anchors.baselineOffset : real

// 居中时对齐属性          强制居中,默认为true, 假如宽或者高为奇数时,如果中心对齐, 就可以保证绝对对齐。
anchors.alignWhenCentered : bool