二十四、QML——Gradient、LinearGradient、ConicalGradient、RadialGradient

首先要区分 Gradient 和 LinearGradient、ConicalGradient、RadialGradient 的两种情况。

1. 非Item项的 Gradient,该类型的Gradient不能直接使用，必须是给属性赋值。比如：Gradient 给 Rectangle 的属性 gradient 赋值。ShapeGradient 给 ShapePath 的属性 fillGradient 赋值。使用 import QtQuick.Shapes 1.8 导入这三种渐变。

   

2. 继承 Item 可以独立使用的渐变 LinearGradient、ConicalGradient、RadialGradient。使用 import QtQuick.Qt5Compat.GraphicalEffects） 导入这三种渐变。

   

1 Gradient

• 渐变色需要两种或多种颜色来定义，这些颜色将无缝混合。需要导入 import QtQuick 模块，从而使用该组件。

• 颜色通过一组 GradientStop 子项来指定，每个子项定义了从 0.0 到 1.0 梯度位置以及颜色。没有任何梯度停止点的梯度将渲染为纯白色填充。

• 注意：Gradient 并不是视觉的表现，也就是不是一个Item，它只能给支持视觉项Item赋值（比如：Rectangle、ConicalGradient、LinearGradient、RadialGradient）

1.1 属性

1.1.1 orientation : enumeration

该属性决定渐变色方向

• Gradient.Vertical: 垂直方向

• Gradient.Horizontal 水平方向

1.1.2 stops : list

一组 GradientStop，通过 GradientStop 的 color 和 position 描述渐变色的颜色和（0.0，1.0）范围内，每个颜色在哪里停止。

1.2 例子

2 QtGraphicalEffects渐变色

这是继承 Item 的渐变色，可以独立使用。

2.1 LinearGradient

关于属性gradient中的orientation，尽量使用默认的方向（垂直方向）

因为线性渐变是起点和终点间，颜色线性变化，如果设置gradient中的orientation，就会调转九十度。

2.1.1 属性

• start：这个属性定义了 GradientStop 位置point为0.0的起点。默认值为 Qt.point(0, 0)。

• end：这个属性定义了 GradientStop 位置point为1.0的终点。默认值为 Qt.point(0, height)。

2.2 RadialGradient

2.2.1 属性

• angle：径向渐变的角度，顺时针方向变化。

• horizontalOffset：水平方向的偏移

• horizontalRadius：水平方向的渲染大小

• verticalOffset：竖直方向的偏移

• verticalRadius：竖直方向的渲染大小

2.3 ConicalGradient

2.3.1 属性

• angle：顺时针方向角度变化。

• horizontalOffset：水平方向偏移

• verticalOffset：竖直方向的偏移

3 继承ShapeGradient渐变色

3.1 LinearGradient

其实 x1、x2、y1、y2 类似于 QtGraphicalEffects 中 LinearGradient 的开始和停止点。

3.2 RadialGradient

• centerRadius： 第二层圆的大小

• centerX：第二层圆的坐标x

• centerY：第二层圆的坐标y

• focalRadius： 最里层圆（焦点圆）的大小

• focalX： 最里层圆（焦点圆）的坐标x

• focalY： 最里层圆（焦点圆）的坐标y

3.3 ConicalGradient

• angle : 角度

• centerX : 中心点坐标x

• centerY : 中心点坐标y