QML 文本阴影

Question

在 QML 中，有没有合适的方法给文本对象添加外阴影？我尝试使用 DropShadow，但它用黑色填充了整个文本字段。

Text {
    id: textId
    font.pixelSize: 36
    font.letterSpacing: 0.9
    color: "red"
    text: "Hello World"

    DropShadow {
        anchors.fill: parent
        verticalOffset: 2
        color: "#80000000"
        radius: 1
        samples: 3
    }
}

我也尝试用源代码替换 anchors.fill 并设置文本 ID。同样在 Text 对象之外使用 DropShadow。没有影子。

我的目标是获得 css 风格的等价物

text-shadow: 0 2px 4px

Answer 1

最简单的方法是使用 item layers:

import QtQuick 2.9
import QtQuick.Window 2.3
import QtGraphicalEffects 1.0

Window {
    id: window
    width: 800
    height: 600
    visible: true

    Text {
        id: textId
        font.pixelSize: 36
        font.letterSpacing: 0.9
        color: "red"
        text: "Hello World"

        layer.enabled: true
        layer.effect: DropShadow {
            verticalOffset: 2
            color: "#80000000"
            radius: 1
            samples: 3
        }
    }
}

您也可以像在 DropShadow docs 中那样进行操作，其中 DropShadow 是同级项：

import QtQuick 2.9
import QtQuick.Window 2.3
import QtGraphicalEffects 1.0

Window {
    id: window
    width: 800
    height: 600
    visible: true

    Text {
        id: textId
        font.pixelSize: 36
        font.letterSpacing: 0.9
        color: "red"
        text: "Hello World"
    }

    DropShadow {
        anchors.fill: textId
        source: textId
        verticalOffset: 2
        color: "#80000000"
        radius: 1
        samples: 3
    }
}

在您的案例中您缺少 source 赋值，但是如果您尝试将阴影作为 Text 的子项，您也会收到有关递归渲染的错误：

ShaderEffectSource: 'recursive' must be set to true when rendering recursively.

QML 文本阴影

QML Text Drop Shadow

qt

dropshadow

qml