西宁专业网站制作公司网络推广营销

基本属性

属性	类型	默认值	描述
color	color	"white"	矩形填充颜色
border.color	color	"transparent"	边框颜色
border.width	int	0	边框宽度
radius	real	0	圆角半径
gradient	Gradient	null	渐变填充
antialiasing	bool	true	是否抗锯齿

几何属性 (继承自Item)

属性	类型	默认值	描述
x	real	0	X坐标位置
y	real	0	Y坐标位置
width	real	0	宽度
height	real	0	高度
z	real	0	Z轴堆叠顺序
rotation	real	0	旋转角度(度)
scale	real	1.0	缩放比例
opacity	real	1.0	透明度(0.0-1.0)

方法 (继承自Item)

方法	参数	返回值	描述
mapToItem(Item item, real x, real y)	item: 目标项目 x,y: 坐标	point	坐标转换到另一个item
mapFromItem(Item item, real x, real y)	item: 源项目 x,y: 坐标	point	从另一个item转换坐标
contains(point)	point: 要检查的点	bool	检查点是否在矩形内
forceActiveFocus()	-	-	强制获取键盘焦点

信号 (继承自Item)

信号	参数	描述
xChanged()	-	X位置改变时触发
yChanged()	-	Y位置改变时触发
widthChanged()	-	宽度改变时触发
heightChanged()	-	高度改变时触发
colorChanged()	-	颜色改变时触发
borderChanged()	-	边框属性改变时触发

基本用法示例

qml

import QtQuick 2.15Rectangle {id: rectwidth: 100height: 100color: "blue"border.color: "black"border.width: 2radius: 10// 渐变填充gradient: Gradient {GradientStop { position: 0.0; color: "blue" }GradientStop { position: 1.0; color: "lightblue" }}// 旋转动画RotationAnimation on rotation {from: 0to: 360duration: 2000loops: Animation.Infinite}
}

圆角矩形示例

qml

Rectangle {width: 150height: 80color: "#3498db"radius: height/2  // 完全圆角(胶囊形状)border {color: "#2980b9"width: 2}
}

带阴影的矩形

qml

Rectangle {id: shadowRectwidth: 120height: 120color: "white"radius: 8// 阴影效果layer.enabled: truelayer.effect: DropShadow {transparentBorder: truehorizontalOffset: 3verticalOffset: 3radius: 8.0samples: 16color: "#80000000"}
}