QT Quick是QT提供的一种高级用户界面工具包，包含对QML完美支持.

Qt Quick 就是使用 QML 构建的一套类库。

Qml模块本身并没有涉及图形显示，所有的图形处理都由Qt Quick模块完成。
QMl是一种高效的开发UI 的语言。QML（Qt Meta-Object Language，Qt元对象语言）是一种声明式编程语言，并且它是Qt框架的一个组成部分。 

单纯创建QML项目

 创建Qt Quick项目

这个是结合qt quick 和qt qml，使用empty.结合了c++的语法

#include <QGuiApplication>
#include <QQmlApplicationEngine>

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

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}


import QtQuick 2.9
import QtQuick.Window 2.2

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

quick 的组件

ApplicationWindow    对应QMainWindow，提供顶层应用程序窗口
MenuBar    对应QMenuBar，提供窗口顶部横向的菜单栏
StatusBar    对应QStatusBar，提供状态栏
ToolBar    对应QToolBar，提供工具栏，可以添加ToolButton和其它组件
Action    对应QAction，提供能够绑定到导航和视图的抽象的用户界面动作
ScrollView    对应QScrollView，提供滚动视图
SplitView    对应QSplitter，提供可拖动的分割视图布局
StackView    对应QStackedWidget，提供基于栈的层叠布局
TabView    对应QTabWidget，提供带有标签的基于栈的层叠布局
TableView    对应QTableWidget，提供带有滚动条、样式和表头的表格
Button    对应QPushButton，提供按钮组件
CheckBox    对应QCheckBox，提供复选框
ComboBox    对应QComboBox，提供下拉框
TabView    对应QTabWidget，提供带有标签的基于栈的层叠布局
GroupBox    对应QGroupBox，提供带有标题、边框的容器
Label    对应QLabel，提供标签组件
ProgressBar    对应QProgressBar，提供进度条组件
RadioButton    对应QRadioButton，提供单选按钮
Slider    对应QSlider，提供滑动组件
SpinBox    对应QSpinBox，提供微调组件
Switch    提供类似单选按钮的开关组件
TextArea    对应QTextEdit，提供能够显示多行文本的富文本编辑框
TextField    对应QTextLine，提供显示单行文本的纯文本编辑框
ToolButton    对应QToolButton，提供在工具栏上显示的工具按钮

例子

import QtQuick 2.9
import QtQuick.Window 2.2

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

    Text {

              text: "Hello, World!"
              color: "red"
              font.bold: true
              x:300;y:300
              width: root.width/3; height: 200
              font.pixelSize: 20
          }
    Image {
        id: name
        source: "./res/font.png"
        x:100;y:100
        width: 50; height:50

    }
}

id:是每个元素的标识，每个元素的id属性是唯一。子元素可以通过访问parent的id关键字访问父元素。
列表属性

如果只有一个元素，“[]”可以省略

Item {
    id: itemroot
    children:
    [
        Text{
            text: "aa"
        },
        Button {
            x:50;y:30
            id:bt1
            text: "bt"
        }
    ]
}

分组属性

Item {
    id: itemroot   
    Text{
        text: "aa"
    }
    Button {
        x:50;y:30
        id:bt1
        text: "bt"
    }        
}

附加属性

Item {
    id: itemroot
    Text{
        text: "aa"
        focus: true
        Keys.onPressed:{                  //附加属性
        console.log("TEST")}
    }
}