Qt on Android: Qt Quick 简单教程

  上一篇《Qt on Android: Qt Quick 之 Hello World 图文详解》我们已经分别在电脑和 Android 手机上运行了第一个 Qt Quick 示例—— HelloQtQuickApp ，这篇呢，我们就来介绍 Qt Quick 编程的一些基本概念，为创建复杂的 Qt Quick 应用奠定基础。

    版权所有 foruok ，如需转载请注明来自博客 http://blog.csdn.net/foruok 。

    首先看一下《Qt on Android: Qt Quick 之 Hello World 图文详解》中的 main.qml 文件：

    现在我们结合 main.qml 文件来讲解。

import 语句

    main.qml 文件第一行代码：import QtQuick 2.0 。这行代码引入了 QtQuick 模块， import 语句的作用与 C++ 中的 #include 类似，与 Java 中的 import 效果一样。不再啰嗦了。

Qt Quick 基本元素

    Qt Quick 作为 QML 的标准库，提供了很多基本元素和控件来帮助我们构建 Qt Quick 应用。如果拿 C++ 来比拟， QML 就相当于 C++ 语言本身，而 Qt Quick 相当于 STL 。好吧，你可能觉得有点驴头不对马嘴，没关系，有这么点儿意思就成。

Rectangle

    main.qml 的第三行代码，定义了一个 Rectangle 类型的对象作为 QML 文档的根对象。关于对象在 qml 文件中的描述，《Qt on Android：QML 语言基础》一文中已经讲解，这里不再赘述。下面咱们看看 Rectangle 到底是什么。

    Rectangle 用来绘制一个填充矩形，可以带边框，也可以不带，可以使用纯色填充，也可以使用渐变色填充，甚至还可以不填充而只提供边框……

    Rectangle 有很多属性。

    width 用来指定宽， height 用来指定高，我们已经见识过了。 

    color 属性可以指定填充颜色，而 gradient 属性则用来设置渐变色供填充使用，如果你同时指定了 color 和 gradient ，那么 gradient 生效；如果你设置 color 属性为 transparent ，那么就可以达到只绘制边框不填充的效果。

    border.width 指定边框的宽度， border.color 指定边框颜色。

    Rectangle 还可以绘制圆角矩形，你只要设置 radius 属性就行了。

    下面我们来看一个简单的示例：

[javascript]  view plain copy

1. Rectangle {  
2.     width: 320;  
3.     height: 480;  
4.     color: "blue";  
5.     border.color: "#808080";  
6.     border.width: 2;  
7.     radius: 12;  
8. }  

    你可以修改 HelloQtQuickApp 的 main.qml 文件来查看效果，也可以建立一个新的工程。

    上面的 Rectangle 对象，我们

颜色

    关于颜色值， QML 中可以使用颜色名字，如 blue / red / green / transparent 等，也可以使用 "#RRGGBB" 或者 "#AARRGGBB" 来指定，还可以使用 Qt.rgba() / Qt.lighter() 等等方法来构造。详情请参考 Qt SDK 中 "QML Basic Type: color" 页面。

    color 类型有 r 、 g 、 b 、 a 四个属性，分别表示一个颜色值的 red 、 green 、 blue 、 alpha 四个成分。你可以这样使用它们：

[javascript]  view plain copy

1. Text {  
2.     color: "red"  
3.   
4.     // prints "1 0 0 1"  
5.     Component.onCompleted: console.log(color.r, color.g, color.b, color.a)  
6. }  

渐变色

    QML 中渐变色的类型是 Gradient ，渐变色通过两个或多个颜色值来指定， QML 会自动在你指定的颜色之间插值，进行无缝填充。Gradient 使用 GradientStop 来指定一个颜色值和它的位置（取值在 0.0 与 1.0 之间）。

    好吧，无码不欢，快快看一个示例：

[javascript]  view plain copy

1. Rectangle {  
2.     width: 100;   
3.     height: 100;  
4.     gradient: Gradient {  
5.         GradientStop { position: 0.0; color: "#202020"; }  
6.         GradientStop { position: 0.33; color: "blue"; }  
7.         GradientStop { position: 1.0; color: "#FFFFFF"; }  
8.     }  
9. }  

    Gradient 只能用来创建垂直方向的渐变，不过其它方向的，可以通过给 Rectangle 指定 rotation 属性来实现。下面是示例：

[javascript]  view plain copy

1. Rectangle {  
2.     width: 100;   
3.     height: 100;  
4.     rotation: 90;  
5.     gradient: Gradient {  
6.         GradientStop { position: 0.0; color: "#202020"; }  
7.         GradientStop { position: 1.0; color: "#A0A0A0"; }  
8.     }  
9. }  

    刚刚我们使用了 rotation 属性，其实它来自 Rectangle 的父类 Item 。

Item

    Item 是 Qt Quick 中所有可视元素的基类，虽然它自己什么也不绘制，但是它定义了绘制图元所需要的大部分通用属性，比如 x 、 y 、 width 、 height 、 锚定（ anchoring ）和按键处理。

    Item 的属性特别多，除了前面提到的，还有 scale / smooth / anchors / antialiasing / enabled / visible / state / states / children 等等，详情参考 Qt 帮助文档。

    你可以使用 Item 来分组其它的可视图元。如：

[javascript]  view plain copy

1. import QtQuick 2.0  
2.   
3. Rectangle {  
4.     width: 300;  
5.     height: 200;  
6.     Item {  
7.         id: gradientGroup;  
8.         Rectangle {  
9.             x: 20;  
10.             y: 20;  
11.             width: 120;  
12.             height: 120;  
13.             gradient: Gradient {  
14.                 GradientStop { position: 0.0; color: "#202020"; }  
15.                 GradientStop { position: 1.0; color: "#A0A0A0"; }  
16.             }  
17.         }  
18.   
19.         Rectangle {  
20.             x: 160;  
21.             y: 20;  
22.             width: 120;  
23.             height: 120;  
24.             rotation: 90;  
25.             gradient: Gradient {  
26.                 GradientStop { position: 0.0; color: "#202020"; }  
27.                 GradientStop { position: 1.0; color: "#A0A0A0"; }  
28.             }  
29.         }  
30.     }  
31.   
32.     Component.onCompleted: {  
33.         console.log("visible children: " ,gradientGroup.visibleChildren.length);  
34.         console.log("visible children: " ,gradientGroup.children.length);  
35.         for(var i = 0; i < gradientGroup.children.length; i++){  
36.             console.log("child " , i, " x = "