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，运行界面 以下

        各个控件怎么放呢，这就涉及到布局，能够使用锚点相对布局，也能够 用绝对布局，在后面的文章中介绍。