Qt Quick入門教程(1): Qt Quick與QML介紹

1 什麼是Qt Qucik?        

        Qt Quick是QtSDK4.7中引入的一種新的界面開發框架，使用QtQuick,你能夠快速、 輕鬆地建立供移動和嵌入式設備使用的動態觸摸式界面和輕最級應用程序，這也是它被命名 爲Quick的緣由.

        Qt Quick包括描述性語言QML、語言運行時、 大量的用戶界面元素、Qt Creator對QML的完美支持、Qt Quick設計器、QML與C++混合 編程支持等衆多技術，使用它你能夠輕鬆、快速地爲移動和嵌入式設備建立流暢的用戶界面. 在Android等移動設備上，Qt Quick應用默認使用0penGLES,渲染效率很高，你能夠 用它建立很是炫、很是酷、很是迷人的界面.QML能夠擴展示有的應用程序，也能夠稱之爲「二次開發」。說實話在畢業剛入職時接觸了相似的項目，當時也是一臉懵逼，怎麼會有這種形式的開發，在別人作好的軟件上直接修改。其實相似的二次開發有CAD, Catia等，不過它們是dll, com組件這種插件的模式。

        QtQuick可以與C++，JS有機結合混合編程，開發者能夠使用已有的Qt技術結合Qt Quick, 建立更好的應用程序。

        相對於QWidget, MFC等，qml建立應用程序可能會更簡單一些。

2 新建Qt Quick項目

       打開QtCreator，我所用的版本是Qt5.12, Qt Quick默認提供了四種基礎項目：

（1）空項目Empty

（2）Scroll

（3）頁面切換Stack

（4）多頁面切換Swipe

       下面建立一個空的qml項目，QtCreator會給咱們建立好，默認的兩個文件main.cpp,  main.qml 

       main.qml代碼

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    color:"gray"
}

    我加了個屬性color, 修改窗口背景顏色。

    一個qml文件主要由兩部分組成：

•     import語句 ：這個就像C++中的頭文件， 
•     QML對象樹 ：根對象是Window,  而後能夠在Window中添加各類控件，例如按鈕，文本，菜單等

         main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    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);

    return app.exec();
}

       該文件是C++代碼，用QML引擎加載main.qml文件，顯示窗口，如主循環。

       該程序的界面以下：

       例以下面是在Window中加了一個按鈕和矩形

       代碼以下：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    color:"gray"

    Button
    {
        id:quit
        text:"tuichu"
        anchors.left:parent.left
        anchors.leftMargin:4
        anchors.bottom:parent.bottom
        anchors.bottomMargin:4

        onClicked:{
            Qt.quit()
        }
    }

    Rectangle
    {
        x:100
        y:70
        width:100
        height:50
        color:"#00C0CC"
        z:1
        opacity:0.6
    }
}

     由於引入了按鈕，那麼就得導入它的頭文件   import QtQuick.Controls 2.5，運行界面 以下

        各個控件怎麼放呢，這就涉及到佈局，能夠使用錨點相對佈局，也能夠 用絕對佈局，在後面的文章中介紹。