是否可以在 QML 中将颜色渐变应用于文本？

Question

是否可以在 QML 中对文本应用颜色渐变？如果是这样，如何？如果不是，达到相同效果的可接受方法是什么？

Answer 1

可以使用 Item layers 例如：

import QtQuick 2.3
import QtQuick.Window 2.0
import QtGraphicalEffects 1.0

Window {
    width: 400
    height: 300
    visible: true
    Rectangle {
        id: gradientRect;
        width: 10
        height: 10
        gradient: Gradient {
            GradientStop { position: 0; color: "yellow" }
            GradientStop { position: 1; color: "red" }
        }
        visible: false;
        layer.enabled: true;
        layer.smooth: true
    }

    Text {
        id: txt
        anchors.centerIn: parent
        text: "Hello, world"
        font.pixelSize: 64
        layer.enabled: true
        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;
                        }
                    "
        }
    }
}

查找 here 以获取更多示例。

Answer 2

您可以使用 LinearGradient QML 类型。

import QtQuick 2.4
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

Window
{
    visible: true
    height: 500
    width: 500
    Text {
        id: text
        font.pointSize: 55
        anchors.centerIn: parent
        text: "Hello World!"
        visible: false
    }
    LinearGradient  {
        anchors.fill: text
        source: text
        gradient: Gradient {
            GradientStop { position: 0; color: "yellow" }
            GradientStop { position: 1; color: "red" }
        }
    }
}

是否可以在 QML 中将颜色渐变应用于文本？

Is it possible to apply a color Gradient to Text in QML?

qt

gradient

styling

qml