QML做渐变色字体

前言

渐变色字体就不多说了，在开发应用中用得很多，之前用LinearGradient来实现，但是一直效果不太理想，在桌面端运行时没有问题，但是在android上表现不一样。后来查看官方文档，找到一种比较好的方法，分享一下。

正文

这里用到的是ShaderEffect类，来看看效果

来看源代码

Item{
    width: 200
    height: 100
    Rectangle {
      id: gradientRect;
      width: 10
      height: 10
      gradient: Gradient {
          GradientStop { position: 0; color: "white" }
          GradientStop { position: 1; color: "steelblue" }
      }
      visible: false; // should not be visible on screen.
      layer.enabled: true;
      layer.smooth: true
  }

  Text {
      id: textItem
      font.pixelSize: 48
      text: "Gradient Text"
      anchors.centerIn: parent
      layer.enabled: true
      // This item should be used as the 'mask'
      layer.samplerName: "maskSource"
      layer.effect: ShaderEffect {
          property var colorSource: gradientRect;
          fragmentShader: "
                    uniform lowp sampler2D colorSource;
                    uniform lowp sampler2D maskSource;
                    uniform lowp float qt_Opacity;
                    varying highp vec2 qt_TexCoord0;
                    void main() {
                        gl_FragColor =
                            texture2D(colorSource, qt_TexCoord0)
                            * texture2D(maskSource, qt_TexCoord0).a
                            * qt_Opacity;
                    }
                "