QML study notes 1: QML basic grammar

---

1. Load the QML file

Here is a basic example of loading a QML file as follows:

#include <QGuiApplication>
#include <QQuickView>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQuickView view;
    view.setSource(QUrl(QStringLiteral("qrc:/main.qml")));
    view.show();

    return app.exec();
}

2. QML file

import QtQuick 2.3
import QtQuick.Controls 1.4

Rectangle {
    id: rootRect
    width: 800
    height: 600
    color: '#808080'

    MouseArea {
        anchors.fill: parent
        onClicked: {
            testText.color = 'red'
        }
    }

    Text {
        id: testText
        anchors.centerIn: parent

        text: qsTr("Helle QML!")
        color: 'white'
    }
}

• Represents a QML object
• Expressions that can embed JS in QML
• Use // or /**/ to indicate comments in QML files
• Lowercase +: Indicates property
• The id attribute of an object is unique, and the value of the id attribute in the same QML file cannot be repeated. When an id is assigned to an object, it can be used in other objects and scripts to reference the object.