QtQuick 基础教程（一）

最近需要将一个C++编写的软件移植到手机上，首先适配Android。要学习Anroid开发是一件很痛苦的事，于是我看了Qt，官方推荐QtQuick。试了几个例子，确实不错，那么就它了。
QtQuick本质是Qt为适应移动开发而做的一个取舍。经过一些了解后，我学习QtQuick之路就这么愉快地开始了。

QtQuick简介

先简单科普QtQuick。QtQuick是Qt公司专门为移动开发设计的解决方案，自Qt5引入，目前已经发展到2.6版本。其实现基础是Qt公司设计的一种语言QML。QML类似于CSS，这让UI设计人员非常适应，可以非常快速开发界面模型。此外，QtQuick可以使用Javascript代码，这让移动开发人员很开心啊，每天和后台做交流时方便多了。最后对于需要复杂计算的内容，可以使用C++来扩展。所以说QtQuick可以说是Qt公司为移动开发苦心经营地产品。
如此简单的代码就能创建下图所示代码，想想也动心啊。如果看到QtQuick的官方示例的话，相信会信心更足。

import QtQuick 2.0
Rectangle { width: 100 height: 100 color: "red" }

QtQuick基本原理

QtQuick本质上仍然是Qt库的一个子模块。所以说到底，它还是靠C++实现的。换句话说，QML语言就是给C++代码穿一个马甲，QtQuick是单独为移动开发设计一套模块。大家可以把QML代码运行理解为类似浏览器解析网页(html语言)的方式。实际用QML编码时，大家就倒发现在QML代码中用的所有元素都是用C++封装好的。所以理解成把QML转换为C++代码再运行，可能更合适。
官方介绍：

The Qt Quick module is the standard library for writing QML applications. While the Qt QML module provides the QML engine and language infrastructure, the Qt Quick module provides all the basic types necessary for creating user interfaces with QML. It provides a visual canvas and includes types for creating and animating visual components, receiving user input, creating data models and views and delayed object instantiation.
QtQuick模块是写QML应用的标准库。QML模块提供QML引擎和语言框架，QtQuick模块提供所有创建QML界面的基本类型：画面（canvas）、基本元素、可作用于基本元素动画元素、用户输入、数据模型、窗口和延迟实例化功能。

QtQuick重要概念

QtQuick有几大重要概念：绘图区域、用户输入、元素定位、状态、动画模拟、模型、视图及数据存储、粒子效应和视觉效果、简化操作的类型。本文简单介绍绘图区域和元素定位，其他日后再讲。
基本语法请参照QtQuick基础教程（二）—QML基本语法

绘图区域

坐标规定

QtQuick提供的绘图区域是二维的，但有Z坐标。
QtQuick左上角的坐标是（0，0）。
和QtWidgets模块类似，子元素使用的坐标是相对于父坐标的。详情请见Coordinate System

可视元素的父元素

QtQuick有两种父类关系。第一种是我们常说的QObject的Parent，表示拥有关系，用于控制元素生命周期。第二种是可视化上的父子关系（父组件不可见是，子组件也不可见）。一般来说，这两者在QML应用中是一致的。详情请见Visual Parent

场景图

场景图(Scene Graph)是QtQuick要采用全新设计模块的关键。简单来讲，QtQuick中不再使用平台定义绘图元素来绘制界面，而是统一交由OpenGL来绘制。我在另一篇博文中详细介绍QtQuick基础教程（四）—场景渲染(Scene Graph)

元素定位

QtQuick中有4种给元素定位的方式：绝对坐标(包括关联坐标)、锚(Anchors)、定位器(Poisitioners)、布局(Layout)。详情请见我另一篇博文QtQuick基础教程（三）—界面元素布局。

绝对坐标

绝对坐标就是直接给出x、y值。关联坐标是一个元素的的坐标是通过另一个元素的值计算出来的（有一定性能损耗）。如：

Item{ x: 100 Rectangle {x: parent.x/2}
}

锚（Anchors）

锚是一种很方便的方式，它也需要计算位置，但不需开发人员自己写计算坐标的代码了。

定位器（Positioners）

定位器是布局的一种退化实现，常用的有:Column、Row、Grid三种。

布局（Layout）

布局就是Qt开发最常见的了，常用的有：ColumnLayout、RowLayout、GridLayout三种。

C++扩展要点

有空再写，先留坑。C++ Extension Points

参考文档

有空再写，先留坑。
QtQuick C++ Classes
QtQuick QML Types
QtQuick Examples

小节

QtQuick非常适合于以下几个情况：
（1）已经用Qt开发过想关软件，但需要移植到新平台；
（2）开发全新小应用（复杂软件还是不要用QML做控制）；
（3）编程水平较初级，且需快速开发（QtQuick开发环境很好搭建的）。
（4）开发可移植移动平台应用，且不需要平台全新特性（如iPhone的Force Touch支持）。