[QML] Qt6/Qt5四大渐变效果实战指南

一、模块导入

复制代码

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" }
            }
        }
    }
}