Qt Quick快速入门(上) 02

Qt Quick基本元素

前面我们已经接触了Qt Quick元素，例如Rectangle、Text、MouseArea等，这节就来看看它们吧。

1. Rectangle

Rectangle用来绘制一个填充矩形，可以带边框，也可以不带，可以使用纯色填充，也可以使用渐变色填充，甚至还可以不填充只提供边框… …
Rectangle有很多属性，下来来说下常见的几个属性，如果有兴趣的伙伴可以查看相关文档。

• width用来指定宽
• height用来指定高
• color用来指定填充颜色
• gradient属性则用来设置渐变色供填充使用
• radius设置圆角矩形
• border设置边框

简单来看个实例

Rectangle{
   width: 400;
   height: 300;
   color: "blue";
   border.color: "#808080";
   border.width: 2;
   radius: 12;
}

2. 颜色

关于颜色，在QML中有多种形式来表达，可以使用颜色名字表示（如blue,black）,也可以使用“#RRGGBB”或者“#AARRGGBB”来表示，还可以使用Qt.rgba()、Qt.lighter()等方式表达。详情参考Qt帮助文档进行查看。

// QML中颜色使用方式
Rectangle{
	width: 200;
	height: 200;
	color: "red";
	color: "#808980";
	color: "#FF908090";
	color: Qt.rgba(0.8, 0.9, 0.7, 1.0);
}

3. 渐变色

QML中的渐变色类型是Gradient，渐变色通过两种或多种颜色值指定，QML会自动在指定颜色值范围内插值，进行无缝填充。Gradient使用GradientStop来制定一个颜色值和它的位置(取值范围0.0至1.0)。
先来看一个简单的实例吧

Rectangle{
	width: 300;
	height: 200;
	gradient:Gradient {
		GradientShop {
			position: 0.0;
			color: "#404040";
		}
		GradientShop {
			position: 1.0;
			color: "#F0F0F0";
		}
	}
}

在Qt5.0中，只有垂直方向的线性渐变可以用于Item，不过其他方向的，可以给Rectangle指定rotation属性来实现，且看下面实例

Rectangle{
	width: 300;
	height: 200;
	rotation: 90;
	gradient:Gradient {
		GradientShop { position: 0.0; color: "#404040"; }
		GradientShop { position: 1.0; color: "#F0F0F0"; }
	}
}

上述代码中使用了rotation属性，其实它来自于rextangle的父类的Item，现在就来看看Item吧。

4. Item

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

Item除了x, y属性外，还有个z属性，用来制定土元在场景中的Z序。z属性的类型是real，数值越小，图元就越垫底（远离我们）；数值越大，图元就越靠近我们。

Item还有一个opacity属性，用来指定一个图元的透明度，取值范围0.0至1.0.

import QtQuick 2.1

Rectangle {
	width: 200;
	heght: 100;
	Rectangle {
		x: 20;
		y: 20;
		width: 80;
		height: 90;
		color: "blue";
		z: 0.6;
	}
	Rectangle {
		x: 20;
		y: 20;
		width: 80;
		height: 90;
		color: "red";
		z: 0.8;
	}
}

Item的clip属性是根据自己的位置和大小来裁切它自己以及孩子们的显示范围。如果clip为true，那么其孩子是逃不过它的手掌心的；如果clip为false，那么孩子可能手会伸到Item的框框外… …

Item除了上面说到的属性外，还有像scale、smooth、anchors、antialiasing、enabled、visible、state、states、childrentransition等属性。

可能上述代码你也注意到了，x、y、width、height四哥属性结合起来，可以完成Qt Quick应用的界面布局，不过这种采用绝对坐标的布局方式，不太容易适应多种多样的移动设备分辨率，也不太适应可变化的窗口。其实，QML提供了一种新的布局方式：锚布局(anchors) ，是通过Item的anchors属性实现的。

5. 锚布局

锚布局通过制定一个元素与其他元素的关系来确定元素在界面中的具体位置。一个元素有 6 个主要的锚点的定位线，如下图所示，

这 6 个定位线分别是：top、bottom、left、right、horizontalCenter和verticalCenter。对于Text元素，还有一个baseline锚点。每一个锚点定位线都可以结合一个偏移的数值。其中，top、bottom、left和right称为外边框；horizontalCenter、verticalCenter和baseline称为偏移量。

使用anchors布局时，除了对齐锚线，还可以指定上（topMargin）、下（bottomMargin）、左（leftMargin）、右（rightMargin）四个边的留白，见下图所示，

好了，基本介绍完毕，下面来看个实例

Rectangle{
	width: 300;
	height: 400;
	Rectangle {
		id: rectl;
		anchors.left: parent;
		anchors.topMargin: 20;
		anchors.leftMargin: parnet.top;
		width: 20;
		height: 20;
		gradient: Gradient {
			GradientShop { position: 0.0; color: "blue"; }
			GradientShop { position: 1.0; color: "green"; }
		}
	}
	
	Rectangle {
		anchors.left: rectl.right;
		anchors.leftMargin: 20;
		anchors.bottom: rectl.bottom;
		anchors.bottomMargin: 20;
		width: 20;
		height: 20;
		gradient: Gradient {
			GradientShop { position: 0.0; color: "blue"; }
			GradientShop { position: 1.0; color: "green"; }
		}
	}
}