002_qml矩阵的使用方式

学习内容：

1. 学习Rectangle（矩形）的用法
   基础属性：x,y,width,height,color
   显示优先级：
   z: 默认为0，数字越大优先级越高
2. 鼠标点击事件：

	MouseArea{
   
		//设置鼠标填充该Rectangle
		anchors.fill : parent 
		onClicked: {
   
			console.log("onClicked")
		}
	}

3. 键盘事件

	//按下回车， 当前事件获取到焦点才可以操作
	Keys.onReturnPressed: {
   
		console.log("onReturnPressed")
	}

4. 控件锚点（通过锚点的方式来设置控件的相对位置）

例如：
	// 设置一个控件
	Rectangle {
   
		id: rect1
		width: 200
		height: 100
		color: "blue"
	}
	// 控件2的位置
	方式1：直接在1的基础上进行操作
		x: rect1.width + 20
	方式2：
	在1的基础上设置间距
		anchors.left: rect1.right
		anchors.leftMargin: 20
		anchors.top: rect1.bottom
        anchors.topMargin: 20
		//居中于整个界面
        anchors.centerIn: parent

5. 旋转和缩放

	// 旋转 顺时针 旋转30度
	rotation: 30
	//缩放倍数
	scale: 2

6. 圆弧和渐变色

	//圆角弧度
	radius: 50
	//渐变颜色
	gradient: Gradient{
   
		GradientStop {
    position: 0.0 ; color: "lightsteelblue"}
		GradientStop {
    position: 0.5 ; color: "green"}
		GradientStop {
    position: 1.0 ; color: "blue"}
	}