Hands-On Mobile and Embedded Development with Qt 5 学习笔记- Gradient

Gradient

Qt Graphical Effects 内置了对三种渐变类型的支持——锥形、线性和径向。RadialGradient 或任何与此相关的 QML 渐变由一系列 GradientStop 项目组成，这些项目指定颜色以及在渐变循环中从何处开始，数字 0 位于开头，数字 0 位于终点。

import QtQuick 2.11
import QtQuick.Window 2.11
import QtGraphicalEffects 1.0


Window {
    visible: true
    width: 1080
    height: 480
    color: "black"
    title:  "Hands-On Mobile and Embedded"
    Flow
    {
        Item
        {
            width: 250; height: 250
            anchors.verticalCenterOffset:  -100
            anchors.horizontalCenterOffset: -100
            ConicalGradient
            {
                anchors.fill: parent
                gradient: Gradient
                {

                    GradientStop { position: 0.0; color: "green" }
                    GradientStop { position: 0.3; color: "white" }
                    GradientStop { position: 0.6; color: "blue" }
                    GradientStop { position: 0.9; color: "red" }
                    GradientStop { position: 0.1; color: "yellow" }
                }

            }
            Text
            {
                color: "black"
                text: qsTr("ConicalGradient")
            }
        }
        Item
        {
            id: element
            x: 203
            y: 245
            width: 250; height: 250
            RadialGradient
            {
                anchors.fill: parent
                gradient: Gradient
                {
                    GradientStop { position: 0.0; color: "green" }
                    GradientStop { position: 0.3; color: "white" }
                    GradientStop { position: 0.6; color: "blue" }
                    GradientStop { position: 0.9; color: "red" }
                    GradientStop { position: 0.1; color: "yellow" }
                }

            }
            Text
            {
                color: "black"
                text: qsTr("RadialGradient")
            }
        }

        Item
        {
            id: element2
            x: 300
            y: 89
            width: 250; height: 250
            LinearGradient
            {
                anchors.fill: parent
                gradient: Gradient
                {
                    GradientStop { position: 0.0; color: "green" }
                    GradientStop { position: 0.3; color: "white" }
                    GradientStop { position: 0.6; color: "blue" }
                    GradientStop { position: 0.9; color: "red" }
                    GradientStop { position: 0.1; color: "yellow" }
                }

            }
            Text
            {
                color: "black"
                text: qsTr("LinearGradient")
            }
        }

    }

}