Gradient QML Type

定义渐变填充。更多

• 所有成员（包括继承成员）的列表

属性

• orientation : enumeration
• stops : list<GradientStop>

详细说明

渐变是由两种或两种以上的颜色定义的，它们将被无缝混合。

这些颜色被指定为一组GradientStop 子项，每个子项都定义了梯度上从 0.0 到 1.0 的一个位置和一种颜色。每个GradientStop 的位置通过设置其position 属性来定义；其颜色通过color 属性来定义。

没有任何渐变止点的渐变将呈现为纯白填充。

请注意，该项并不是渐变的可视化表示。要显示渐变，请使用支持使用渐变的可视化项目（如Rectangle ）。

使用示例

下面的示例声明了一个Rectangle 项目，其渐变效果从红色开始，在矩形高度的三分之一处渐变为黄色，最后以绿色结束：

Rectangle {
    width: 100; height: 100
    gradient: Gradient {
        GradientStop { position: 0.0; color: "red" }
        GradientStop { position: 0.33; color: "yellow" }
        GradientStop { position: 1.0; color: "green" }
    }
}

性能和限制

与使用纯色填充或图像相比，计算渐变可能会耗费大量计算资源。请考虑将渐变用于用户界面中的静态项目。

自 Qt 5.12 起，垂直和水平线性渐变可应用于项目。如果需要应用角度渐变，可将旋转和剪切组合应用于相关项目。或者，也可以考虑使用QtQuick.Shapes::LinearGradient 或 QtGraphicalEffects::LinearGradient。这些方法都会为您的应用程序带来额外的性能要求。

使用涉及渐变止点的动画可能无法达到预期效果。另一种渐变动画方法是使用预生成的图像或包含渐变的 SVG 图形。

另请参阅 GradientStop 。

属性文档