Qt Quick里的图形效果：阴影（Drop Shadow）

最新推荐文章于 2024-09-14 17:57:00 发布

foruok

最新推荐文章于 2024-09-14 17:57:00 发布

阅读量1.3w

点赞数 3

分类专栏： Qt Qt Quick简明教程文章标签： Qt Quick QML Graphical Effects DropShadow InnerShadow

本文链接：https://blog.csdn.net/foruok/article/details/44732981

版权

本文介绍了Qt Quick中的DropShadow和InnerShadow效果，展示了如何创建阴影和内阴影，包括源码分析和实际应用示例。通过调整属性如horizontalOffset、verticalOffset、radius等，可以实现不同视觉效果。

摘要由CSDN通过智能技术生成

Qt Quick提供了两种阴影效果：

DropShow，阴影。这个元素会根据源图像，产生一个彩色的、模糊的新图像，把这个新图像放在源图像后面，给人一种源图像从背景上凸出来的效果。
InnerShadow，内阴影。这个元素会根据源图像，产生一个彩色的、模糊的新图像，与 DropShadow不同的是，新图像会放在源图像里面。

效果

下面是我设计的示例效果。

首先是 DropShadow ：

图1 阴影效果

然后是内阴影效果：

图2 内阴影效果

源码分析

如图1所示，界面被分为三部分。

最上面的是源图像。

源图像下面（即中间）是一个列表，你可以点击 DropShadow 和 InnerShadow 两个子项，切换不同的阴影效果。每种阴影效果都对应一个 qml 文档，当你点击这些子项时，对应的 qml 文档动态加载。

阴影示例界面

这个示例界面框架其实与“Qt Quick里的图形效果——颜色（Color）”是一致的，只是我把 ListView 从原来的竖向改为了横向。对应的 DropShadowExample.qml 内容如下：

import QtQuick 2.2
import QtQuick.Controls 1.2

Rectangle {
    id: example;
    signal back();
    anchors.fill: parent;

    Text {
        id: origLabel;
        x: 10;
        y: 4;
        font.pointSize: 20;
        text: "Original Image";
    }

    Button {
        anchors.right: parent.right;
        anchors.top: parent.top;
        anchors.margins: 4;
        text: "Back";
        onClicked: example.back();
    }


    Image {
        id: origImage;
        width: 240;
        height: 240;
        anchors.left: parent.left;
        anchors.top: origLabel.bottom;
        anchors.margins: 4;
        source: "butterfly.png";
        sourceSize: Qt.size(240, 240);
        smooth: true;
    }

    Rectangle{
        anchors.left: parent.left;
        anchors.leftMargin: 4;
        anchors.right: parent.right;
        anchors.rightMargin: 4;
        anchors.top: origImage.bottom;
        height: 2;
        border.width: 1;
        border.color: "darkgray";
    }

    Text {
        id: effectsLabel;
        anchors.top: origImage.bottom;
        anchors.margins: 4;
        anchors.left: parent.left;
        font.pointSize: 20;
        font.bold: true;
        text: "Shadow Effects:";
        color: "blue";
    }

    Rectangle {
        id: shadowEffects;
        anchors.left: effectsLabel.right;
        anchors.leftMargin: 4;
        anchors.top: effectsLabel.top;
        anchors.right: parent.right;
        anchors.rightMargin: 4;
        height: 40;
        color: "gray";

        ListView {
            anchors.fill: parent;
            clip: true;
            focus: true;
            orientation: ListView.Horizontal;
            spacing: 20;
            delegate: Text {
                id: wrapper;
                height: 40;
                verticalAlignment: Text.AlignVCenter;
                text: name;
                font.pointSize: 18;
                Keys.onEnterPressed: {
                    event.accepted = true;
                    effectControl.source = example;
                }

                Keys.onReturnPressed: {
                    event.accepted = true;
                    effectControl.source = example;
                }

                MouseArea {
                    anchors.fill: parent;