【QML】Rectangle边框添加阴影

-凌凌漆-

已于 2024-08-09 08:30:57 修改

阅读量83

点赞数 1

分类专栏： QML 文章标签： qt

于 2024-08-08 16:23:57 首次发布

本文链接：https://blog.csdn.net/yangshuoSB/article/details/141030077

版权

QML 专栏收录该内容

51 篇文章 1 订阅

订阅专栏

1. 原始效果

在这里插入图片描述

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15

Rectangle{
    id: root
    color: "grey"

    Rectangle{
        id: rect
        width: 200
        height: 200
        radius: 5
        anchors.centerIn: parent
        color: "white"
        opacity: 0.5
    }
}

2. 阴影效果1

在这里插入图片描述


import QtQuick 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15

Rectangle{
    id: root
    color: "grey"

    Rectangle{
        id: rect
        width: 200
        height: 200
        radius: 5
        anchors.centerIn: parent
        color: "white"
        opacity: 0.5

		//效果1代码
        layer.enabled: true
        layer.effect: DropShadow {
            color: "#80000000"
            samples: 17
            horizontalOffset: 10
            verticalOffset: 10
            radius: 8
            spread: 0.4
        }
    }
}

3. 阴影效果2

在这里插入图片描述


import QtQuick 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15

Rectangle{
    id: root
    color: "grey"

    Rectangle{
        id: rect
        width: 200
        height: 200
        radius: 5
        anchors.centerIn: parent
        color: "white"
        opacity: 0.5
    }
	//效果2代码
    DropShadow {
        anchors.fill: rect
        horizontalOffset: 10
        verticalOffset: 10
        radius: 8.0
        samples: 17
        color: "#80000000"
        source: rect
        opacity: 0.5
    }
}