QML Rectangle 组件
基本属性
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
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"}
}