[Qt進階]qml的第一個項目—輸出hello world

一、本文所包含的qml技能

在Qt中，使用qml開發在新建項目界面需選擇qt quick，如圖

接下來的創建流程與widget的過程是一樣的，我就不再多說了。

qml的基本圖形是矩形，能明白這一點，接下來的學習會很輕鬆。

在.pro中我們可以看到Qt+=quick，這是添加了quick模塊，我們在寫quick程序時必須要加入此模塊。

Rectangle：qml中基本圖形

組件：qml爲我們提供的類似於控件的東西，也可以自己創建組件

parent：區域或者組件所在的父類，其中包含父類的屬性

Text：用於顯示字符串的組件

id：qml組件唯一標識，不可以大寫字母開頭命名

MouseArea：qml中的鼠標區域，區域大小自行定義。

 

二、界面中顯示hello world

在主函數中，我們可以看到一些qt爲我們創建好的代碼，此處是加載了qml界面，從下面的代碼中我們可以看到，這是加載了main.qml界面，所以我們打開軟件的主窗口就是main.qml界面

    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

在main.qml中我們寫入了以下代碼。

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle//自定義區域
    {
        id: textArea //唯一標識的id
        x: 0 //起始座標
        y: 0
        width: parent.width //區域大小
        height: parent.height
        Text { //顯示字符串
            id: textStr
            x: parent.width/2
            y: parent.height/2
            text: qsTr("Hello World!!")
        }
    }
}

要首先在qml界面中創建一個窗口window，在這裏面我們可以完成一些對窗口操作的功能，比如窗口大小、窗口標題等。

我前面說過，qml是一個以矩形爲基本圖形的界面，所以接下來的一個區域我們使用矩形來創建Rectangle，在這之中我們可以規定這個區域的大小以及位置等信息，最重要的一個是id的概念，id是作爲qml中標識區域或者組件的唯一標識，可以使用字母但是不可以以大寫字母開頭，不然會報錯。在這之中我們可以看到parent，顧名思義就是父類的一些性能集合，可以將它想象成一個結構體，其中包含着父類的一些信息（大小、位置等）。

在這個區域中我們包含了一個Text的組件，用來顯示我們的文字。

依靠以上代碼我們可以實現hello world顯示在界面中。

 

三、鼠標點擊輸出hello world

qml中的鼠標點擊事件是通過MouseArea實現的，通過在區域內定義鼠標事件，來使鼠標在此區域內實現效果。以下代碼通過點擊Rectangle的區域（id爲textArea），來在輸出窗口輸出hello world。

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle//自定義區域
    {
        id: textArea//唯一標識的id
        x: 0 //起始座標
        y: 0
        width: parent.width //區域大小
        height: parent.height
        Text { //顯示字符串
            id: textStr
            x: parent.width/2
            y: parent.height/2
            text: qsTr("Hello World!!")
        }
        MouseArea //鼠標區域
        {
            id: mouseTest
            width: parent.width
            height: parent.height
            onClicked: console.debug("Hello World!!!") //單擊實現輸出字符串
        }
    }
}

通過點擊鼠標區域，輸出hello world