Qt Quick里的图形效果——渐变（Gradient）

最新推荐文章于 2023-04-22 20:33:20 发布

应该是薰衣草

最新推荐文章于 2023-04-22 20:33:20 发布

阅读量376

点赞数

本文链接：https://blog.csdn.net/jfdfhh/article/details/84194507

版权

本文详细介绍了Qt Quick中的三种渐变效果：LinearGradient、ConicalGradient和RadialGradient，包括它们的属性和使用示例。通过示例代码展示了如何创建和应用这些渐变，帮助读者理解如何在Qt Quick中实现丰富的图形效果。

摘要由CSDN通过智能技术生成

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

Qt Quick提供了三种渐变图形效果：

ConicalGradient，锥形渐变
LinearGradient，线性渐变
RadialGradient，径向渐变

效果

下图是我设计的示例效果：

图 1 渐变图形效果

如图所示，第一行为线性渐变，第二行为锥形渐变，第三行为径向渐变。

渐变元素与其他图形效果元素不同之处在于：渐变元素既可以用来改变一个已有的元素（如Image），也有可以独立使用。如你在示例效果图中看到的那样，每一行前两个是独立使用渐变元素的效果，后两个是讲渐变效果应用到其它元素上的效果。

源码

渐变效果较为简单，所有的示例都放在一个 qml 文档—— GradientExample.qml ——中，内容如下：

import QtQuick 2.2import QtGraphicalEffects 1.0import QtQuick.Controls 1.2Rectangle {    id: example;    anchors.fill: parent;    signal back();    Button {        anchors.right: parent.right;        anchors.top: parent.top;        anchors.margins: 4;        text: "Back";        onClicked: example.back();    }    Text {        id: linearLabel;        anchors.left: parent.left;        anchors.top: parent.top;        anchors.margins: 4;        text: "LinearGradient";        font.bold: true;    }    Row {        id: linears;        anchors.left: parent.left;        anchors.top: linearLabel.bottom;        anchors.margins: 4;        spacing: 8;        LinearGradient {            width: 100;            height: 180;            gradient: Gradient {                GradientStop{ position: 0.0; color: "#80222222";}                GradientStop{ position: 0.9; color: "#FFFFFFFF";}            }            start: Qt.point(0, 0);            end: Qt.point(0, 180);        }        LinearGradient {            width: 100;            height: 180;            gradient: Gradient {                GradientStop{ position: 0.0; color: "#FFFF0000";}                GradientStop{ position: 0.3; color: "#FFFFA000";}                GradientStop{ position: 0.5; color: "#A0FF4000";}                GradientStop{ position: 1.0; color: "#FF800FFF";}            }            start: Qt.point(0, 0);            end: Qt.point(80, 180);        }        Image {            id: butterfly;            so