QML Rectangle 组件

byxdaz2025-04-20 18:28

基本属性

属性	类型	默认值	描述
`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.15

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

圆角矩形示例

qml

复制代码

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

带阴影的矩形

qml

复制代码

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

复制代码