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 。

属性文档

orientation : enumeration

设置此属性以定义渐变的方向。

默认值为 Gradient.Vertical。

stops : list<GradientStop> [default read-only]

该属性存储描述渐变的渐变停点。

默认情况下，该属性包含一个空列表。

要设置渐变停点，请将其定义为“渐变”的子元素。