第一章：快速入门

参考 qmlbook

1、重点知识

1. 通过 setContextProperty 向 qml中注册 对象，此对象是上下文可访问
   QQuickView* view = new QQuickView();
   view->rootContext()->setContextProperty(“cityModel”, m_model);
2. 语法：没什么好讲的，遵循es标准。唯一要注意的，是尽量少使用javascript去处理数据
3. 基本元素（Basic Elements） 基础的可视化元素，例如Item（基础元素对象），Rectangle（矩形框），Text（文本），Image（图像）和MouseArea（鼠标区域）。
4. 侧重 掌握下状态机，State definition（状态定义）states（状态列表属性）提供了元素当前所支持的状态列表，当前属性的改变也可以使用transitions（转变）属性列表来定义状态转变动画。

2、状态机

为什么状态机很重要。这是一个编程思想的问题。一般做后端的编程思想就是，if else 这种方式去进行逻辑组织。但是前端，要改变下思想。就是尽量使用状态机器。
举个例子：比如要做一个按钮，按钮按下后，需要改变文本、背景等。这时候，就离不开条件判断语句了。这样写出来的代码，就很复杂。
但是如果采用状态机的方式去实现，就会相对简单。另外状态之间也可以嵌入很多过度动画

3、 简单的 Qt Quick应用程序

在现代的软件开发中有一个内在的冲突，用户界面的改变速度远远高于我们的后端服务。在传统的技术中我们开发的前端需要与后端保持相同的步调。当一个项目在开发时用户想要改变用户界面，或者在一个项目中开发一个用户界面的想法就会引发这个冲突。敏捷项目需要敏捷的方法。

Qt Quick 提供了一个类似HTML声明语言的环境应用程序作为你的用户界面前端（the front-end），在你的后端使用本地的c++代码。这样允许你在两端都游刃有余。

下面是一个简单的Qt Quick UI的例子。

import QtQuick 2.0Rectangle {width: 240; height: 1230Rectangle {width: 40; height: 40anchors.centerIn: parentcolor: '#FFBB33'}
}

这种声明语言被称作QML，它需要在运行时启动。Qt提供了一个典型的运行环境叫做qmlscene，但是想要写一个自定义的允许环境也不是很困难，我们需要一个快速视图（quick view）并且将QML文档作为它的资源。剩下的事情就只是展示我们的用户界面了。

QQuickView* view = new QQuickView();
QUrl source = Qurl::fromLocalUrl("main.qml");
view->setSource(source);
view.show();

回到我们之前的例子，在一个例子中我们使用了一个c++的城市数据模型。如果我们能够在QML代码中使用它将会更加的好。

为了实现它我们首先要编写前端代码怎样展示我们需要使用的城市数据模型。在这一个例子中前端指定了一个对象叫做cityModel，我们可以在链表视图（list view）中使用它。

import QtQuick 2.0Rectangle {width: 240; height: 120ListView {width: 180; height: 120anchors.centerIn: parentmodel: cityModeldelegate: Text { text: model.city }}
}

为了使用cityModel，我们通常需要重复使用我们以前的数据模型，给我们的根环境（root context）加上一个内容属性（context property）。（root context是在另一个文档的根元素中）。

m_model = QSqlTableModel(this);
... // some magic code
QHash<int, QByteArray> roles;
roles[Qt::UserRole+1] = "city";
roles[Qt::UserRole+2] = "country";
m_model->setRoleNames(roles);
view->rootContext()->setContextProperty("cityModel", m_model);