002_qml矩阵的使用方式

轩宇^_^2023-12-03 21:14

学习内容：

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

cpp 复制代码

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

键盘事件

cpp 复制代码

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

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

cpp 复制代码

例如：
	// 设置一个控件
	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

旋转和缩放

cpp 复制代码

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

圆弧和渐变色

cpp 复制代码

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