当前位置：首页 > news >正文

QML图形效果之阴影效果（DropShadow与InnerShadow）

news 2025/7/26 8:38:53

引言

Qt的QML为开发者提供了丰富的图形特效模块，其中DropShadow（投影）和InnerShadow（内阴影），让我们可以轻松为界面元素添加柔和、自然的阴影效果。本文将结合官方文档和工程示例，展示这两种阴影特效的基本用法及实际效果。

基础知识

DropShadow（投影）

DropShadow 是 QML 提供的一个图形特效，用于在元素下方生成投影。它常用于图片、按钮等控件，增强立体感。主要属性包括：

source：需要添加阴影的源对象。
horizontalOffset / verticalOffset：阴影的水平/垂直偏移量。
radius：阴影的模糊半径，数值越大阴影越柔和。
color：阴影颜色及透明度。

详细用法可参考官方文档。

InnerShadow（内阴影）

InnerShadow 则是在元素内部生成阴影，常用于表现凹陷、内嵌等效果。主要属性与 DropShadow 类似，此外还包括：

samples：采样点数量，影响阴影的平滑度。
其余属性如 source、horizontalOffset、verticalOffset、radius、color等用法一致。

详细用法可参考官方文档。

工程完整示例展示

DropShadowEffect.qml

import QtQuick
import QtQuick.Controls
import Qt5Compat.GraphicalEffectsItem {Flow {anchors.fill: parentspacing: 10padding: 10Rectangle {width: 280height: 280color: "white"Image {id: butterflysource: "qrc:/images/butterfly.png"sourceSize: Qt.size(parent.width, parent.height)smooth: truevisible: false}DropShadow {anchors.fill: butterflyhorizontalOffset: 3verticalOffset: 3radius: 8.0color: "#80000000"source: butterfly}}Rectangle {width: 280height: 280color: "white"Image {id: butterfly2source: "qrc:/images/butterfly.png"sourceSize: Qt.size(parent.width, parent.height)smooth: truevisible: false}InnerShadow {anchors.fill: butterfly2horizontalOffset: -3verticalOffset: 3radius: 8.0samples: 16color: "#b0000000"source: butterfly2}}}
}

代码说明

整体结构
使用 Item 作为根元素，内部通过 Flow 布局，横向排列两个带阴影效果的图片区域。
第一个 Rectangle（展示DropShadow用法）
- Rectangle 作为背景，Image 加载蝴蝶图片，visible: false 让图片本身不显示，仅作为阴影源。
- DropShadow 绑定到图片，设置偏移（3,3）、模糊半径8、半透明黑色，生成柔和的投影效果。
第二个 Rectangle（展示InnerShadow用法）
- 同样的背景和图片设置。
- InnerShadow 绑定到图片，设置偏移（-3,3）、模糊半径8、采样点16，生成内嵌阴影效果。