在開發Qt應用程式時，不論其目標執行環境是Desktop (Windows/macOS/Linux) 或 embedded，我都建議採用QML來開發GUI的部分。其主要的原因之一是，在程式架構上可以很容易地把畫面跟商業邏輯的部分拆開。如此一來，在UI改版的情況下，幾乎不需要修改到商業邏輯的部分，這提高了在開發及維護上的彈性和效率。

這邊提供一個簡單的範例程式，來示範一下如何從以QML撰寫的GUI來呼叫C++層所定義的class function。先講解一下畫面的部分(如下圖)，視窗中間有一個按鈕，當按鈕被點擊時，等待三秒後將應用程式關閉。這邊提到的「等待三秒將應用程式關閉」，其實使用QML撰寫就可以很快速的實作出來，但因為這一篇文章主要是要示範如何呼叫C++的class function，所以我們用C++來實作這個功能。

Qt C++部分

首先，依據MVC的設計概念，我習慣會在C++這邊定義一個class名為Controller，它就是負責實作上面提到的商業邏輯部分，而UI跟商業邏輯間的溝通和交互，主要都是透過這個類別來進行。我們在Controller裡定義了一個public function，名為quitApp()，其input參數為一個int資料型態，表示在seconds秒後，將應用程式關閉。

要讓QML可以呼叫C++類別function的話，有兩種方式，第一種是我比較建議的方式，在宣告function時標記Q_INVOKABLE這個marco。

Q_INVOKABLE void quitApp(int seconds);

或是，將該function歸類為public slot

public slots:
    void quitApp(int seconds);

要讓QML操作C++ class function，概念上很容易懂，就是讓其class所產生的instance作為QML裡的一個property，在UI層就可以操作這個instance。

QQmlApplicationEngine engine;
Controller *pController = new Controller();
QQmlContext *pRootContext = engine.rootContext();
pRootContext->setContextProperty("ctrl", pController);

以上面這段程式碼為例，在QML裡就可以把ctrl視為一個可操作的物件。

Qt QML部分

QML的部分就很單純，在Button click事件發生時，呼叫ctrl的quitApp()，帶入值設定為整數3。

    Button {
        id: btnQuitApp
        anchors.centerIn: parent
        text: qsTr("Quit app after 3 seconds")
        onClicked: {
            ctrl.quitApp(3);
        }
    }

以上就是一個簡單了範例介紹如何從QML端呼叫C++的function，下一篇我再介紹反過來如何從C++呼叫QML的function。