概述

前面写过一篇文章介绍如何使用 QML 做渐变色字体,​​文章在这里​​​,还写过一篇文章是用 QML 实现发光呼吸动画字体,​​文章在这里​​。今天介绍一种关于字体的新的效果,用 QML 实现阴影效果字体。

正文

废话不多说,先看效果:

Qt QML实现阴影字体_渐变色

其中字体颜色和阴影颜色都可以自定义,已经封装起来了。
直接看代码吧:

Item {
id: root
implicitHeight: labelTextMetrics.tightBoundingRect.height
implicitWidth: label.implicitWidth

property alias text: label.text
property alias font: label.font
property alias horizontalAlignment: label.horizontalAlignment
property alias verticalAlignment: label.verticalAlignment
property bool glowEnabled: true
property color glowColor: "#1d6d64"

Label {
id: label
anchors.baseline: root.baseline
color: root.color

layer.enabled: root.glowEnabled
layer.effect: Glow {
color: glowColor
samples: 20
spread: 0.3
}

TextMetrics {
id: labelTextMetrics
text: label.text

直接拿来用就可以了。
​​​示例代码在这里​