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

本文主要是介绍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.0Window {visible: truewidth: 1080height: 480color: "black"title:  "Hands-On Mobile and Embedded"Flow{Item{width: 250; height: 250anchors.verticalCenterOffset:  -100anchors.horizontalCenterOffset: -100ConicalGradient{anchors.fill: parentgradient: 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: elementx: 203y: 245width: 250; height: 250RadialGradient{anchors.fill: parentgradient: 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: element2x: 300y: 89width: 250; height: 250LinearGradient{anchors.fill: parentgradient: 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")}}}}