上一篇《Qt Quick 之 Hello World 图文详解》我们已经分别在电脑和 Android 手机上运行了第一个 Qt Quick 示例—— HelloQtQuickApp ,这篇呢,我们就来介绍 Qt Quick 编程的一些基本概念,为创建复杂的 Qt Quick 应用奠定基础。
版权所有 foruok ,如需转载请注明来自博客 http://blog.csdn.net/foruok 。
首先看一下《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 属性就行了。
下面我们来看一个简单的示例:
Rectangle {
width: 320;
height: 480;
color: "blue";
border.color: "#808080";
border.width: 2;
radius: 12;
}
上面的 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 四个成分。你可以这样使用它们:
Text {
color: "red"
// prints "1 0 0 1"
Component.onCompleted: console.log(color.r, color.g, color.b, color.a)
}
渐变色
QML 中渐变色的类型是 Gradient ,渐变色通过两个或多个颜色值来指定, QML 会自动在你指定的颜色之间插值,进行无缝填充。Gradient 使用 GradientStop 来指定一个颜色值和它的位置(取值在 0.0 与 1.0 之间)。好吧,无码不欢,快快看一个示例:
Rectangle {
width: 100;
height: 100;
gradient: Gradient {
GradientStop { position: 0.0; color: "#202020"; }
GradientStop { position: 0.33; color: "blue"; }
GradientStop { position: 1.0; color: "#FFFFFF"; }
}
}
Gradient 只能用来创建垂直方向的渐变,不过其它方向的,可以通过给 Rectangle 指定 rotation 属性来实现。下面是示例:
Rectangle {
width: 100;
height: 100;
rotation: 90;
gradient: Gradient {
GradientStop { position: 0.0; color: "#202020"; }
GradientStop { position: 1.0; color: "#A0A0A0"; }
}
}
刚刚我们使用了 rotation 属性,其实它来自 Rectangle 的父类 Item 。
Item
Item 是 Qt Quick 中所有可视元素的基类,虽然它自己什么也不绘制,但是它定义了绘制图元所需要的大部分通用属性,比如 x 、 y 、 width 、 height 、 锚定( anchoring )和按键处理。
Item 的属性特别多,除了前面提到的,还有 scale / smooth / anchors / antialiasing / enabled / visible / state / states / children 等等,详情参考 Qt 帮助文档。
你可以使用 Item 来分组其它的可视图元。如:
import QtQuick 2.0
Rectangle {
width: 300;
height: 200;
Item {
id: gradientGroup;
Rectangle {
x: 20;
y: 20;
width: 120;
height: 120;
gradient: Gradient {
GradientStop { position: 0.0; color: "#202020"; }
GradientStop { position: 1.0; color: "#A0A0A0"; }
}
}
Rectangle {
x: 160;
y: 20;