QML类型说明-Gradient

Gradient

ImportStatement:   import QtQuick 2.2

 

Properties

stops :list<GradientStop>

 

DetailedDescription

渐变定义为两个或两个以上的颜色无缝连接。GradientStop定义了渐变每个梯度的颜色和位置。位置用0.0到1.0表示，定义在position属性中，颜色定义在color属性中。渐变如果没有任何梯度，则填充为纯白色。

注意这个组件本身不是可视化的，要显示渐变，使用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" }

    }

}

 

Performanceand Limitations

计算渐变比填充颜色或图片昂贵得多。所以在用户接口上考虑使用静态的渐变组件。在Qt 5.0版本，垂直的，线性的渐变能被应用到组件。如果我们需要使用其它方向的渐变，可考虑旋转和剪切的方式处理相关组件。不过这使我们的应用需要消耗更多的执行资源。

动画渐变可能产生非预期的结果，一个可以选择的动画渐变的方法是使用预生成的图片或使用SVG画包含渐变的图。

 

Property Documentation

defaultstops: list<GradientStop>

GradientStop的列表，用来描述渐变。默认为空。