一、模块导入
import QtQuick import QtQuick.Shapes 1.8 as QT6Style // Qt6 Shape渐变 import Qt5Compat.GraphicalEffects as QT5Style // Qt5兼容效果渐变
二、四种渐变对比
| 渐变类型 | 模块 | 效果 | 适用场景 |
|---|
| Gradient | QtQuick | 线性（水平/垂直） | 简单背景 |
| LinearGradient | QT6Style / QT5Style | 任意方向线性 | 对角线渐变 |
| ConicalGradient | QT5Style | 锥形旋转 | 雷达、光盘 |
| RadialGradient | QT5Style | 径向扩散 | 光晕、按钮 |
三、Gradient（基础线性渐变）
Rectangle { gradient: Gradient { orientation: Gradient.Horizontal // 或 Vertical GradientStop { position: 0.0; color: "red" } GradientStop { position: 0.5; color: "yellow" } GradientStop { position: 1.0; color: "green" } } }
限制：只能水平或垂直，不能对角线
四、LinearGradient（高级线性渐变）
QT6Style 版本（配合 Shape）
QT6Style.Shape { width: 400; height: 400 QT6Style.ShapePath { PathRectangle { x: 0; y: 0; width: 400; height: 400 } fillGradient: QT6Style.LinearGradient { x1: 0; y1: 0 // 起点 x2: 400; y2: 400 // 终点（对角线） // x2: 0; y2: 400 // 垂直渐变 GradientStop { position: 0.0; color: "#ff0000" } GradientStop { position: 0.5; color: "#00ff00" } GradientStop { position: 1.0; color: "#0000ff" } } } }
QT5Style 版本（更灵活）
QT5Style.LinearGradient { anchors.fill: parent start: Qt.point(0, 0) // 起点 end: Qt.point(400, 400) // 终点 gradient: Gradient { GradientStop { position: 0.0; color: Qt.rgba(1, 0, 0, 1) } GradientStop { position: 0.5; color: Qt.rgba(0, 1, 0, 1) } GradientStop { position: 1.0; color: Qt.rgba(0, 0, 1, 1) } } }
五、ConicalGradient（锥形渐变）
坐标轴图示
270° ↑ | 180° ←---+--→ 0° / 360° | ↓ 90°
属性说明
| 属性 | 说明 | 示例 |
|---|
angle | 起始角度 | 0=右,90=下,180=左,270=上 |
gradient | 颜色渐变 | 从 angle 位置开始顺时针渐变 |
完整代码
QT5Style.ConicalGradient { anchors.fill: parent angle: 45 // 从右下45°方向开始 gradient: Gradient { GradientStop { position: 0.0; color: "white" } GradientStop { position: 1.0; color: "black" } } // 旋转动画 RotationAnimation on angle { from: 0 to: 360 duration: 2000 // 2秒转一圈 loops: Animation.Infinite } }
六、RadialGradient（径向渐变）
效果图示
中心点 ● ← 白色 (position: 0.0) /|\ / | \ / | \ ~~~~~~~~~ ← 渐变过渡 / \ ●───────────● ← 黑色 (position: 1.0) 水平半径: horizontalRadius 垂直半径: verticalRadius
属性说明
| 属性 | 说明 |
|---|
horizontalRadius | 水平方向辐射半径 |
verticalRadius | 垂直方向辐射半径 |
angle | 旋转角度（配合椭圆使用） |
gradient | 从中心向外的颜色渐变 |
完整代码
QT5Style.RadialGradient { anchors.fill: parent // 椭圆控制 horizontalRadius: 100 // 水平半径 verticalRadius: 300 // 垂直半径（椭圆效果） angle: 45 // 旋转45度 gradient: Gradient { GradientStop { position: 0.0; color: "white" } // 中心 GradientStop { position: 1.0; color: "black" } // 边缘 } }
常用效果
| 效果 | horizontalRadius | verticalRadius |
|---|
| 正圆 | 相同值 | 相同值 |
| 横向椭圆 | 较大 | 较小 |
| 纵向椭圆 | 较小 | 较大 |
七、颜色格式
#AARRGGBB 格式
| 格式 | 说明 |
|---|
#FF000000 | 不透明黑色 |
#80000000 | 50%透明黑色 |
#00000000 | 完全透明 |
Qt.rgba(r, g, b, a) | 函数写法，a=0~1 |
八、快速选择指南
需要简单水平/垂直渐变？ → Gradient 需要对角线或任意方向？ → LinearGradient 需要旋转扫描效果？ → ConicalGradient + RotationAnimation 需要光晕/球体/按钮？ → RadialGradient
九、完整示例代码（可直接运行）
import QtQuick import QtQuick.Shapes 1.8 as QT6Style import Qt5Compat.GraphicalEffects as QT5Style Window { width: 640; height: 480 visible: true Rectangle { id: btn width: 400; height: 400 anchors.centerIn: parent // 切换下面四种效果查看 // === 1. 基础渐变 === // gradient: Gradient { // GradientStop { position: 0.0; color: "red" } // GradientStop { position: 1.0; color: "blue" } // } // === 2. 线性渐变 === // QT5Style.LinearGradient { // anchors.fill: parent // start: Qt.point(0, 0) // end: Qt.point(400, 400) // gradient: Gradient { // GradientStop { position: 0.0; color: "red" } // GradientStop { position: 1.0; color: "blue" } // } // } // === 3. 锥形渐变 === // QT5Style.ConicalGradient { // anchors.fill: parent // angle: 0 // gradient: Gradient { // GradientStop { position: 0.0; color: "white" } // GradientStop { position: 1.0; color: "black" } // } // RotationAnimation on angle { // from: 0; to: 360; duration: 2000; loops: Animation.Infinite // } // } // === 4. 径向渐变 === QT5Style.RadialGradient { anchors.fill: parent horizontalRadius: 200 verticalRadius: 200 gradient: Gradient { GradientStop { position: 0.0; color: "white" } GradientStop { position: 1.0; color: "black" } } } } }
