QML 毛玻璃模糊效果

TechTian

已于 2024-07-09 15:38:10 修改

阅读量1.2k

点赞数 12

CC 4.0 BY-SA版权

分类专栏： QML 文章标签： qt 用户界面

于 2024-07-09 14:49:28 首次发布

本文链接：https://blog.youkuaiyun.com/Techtian/article/details/140290382

文章目录

前言
一、效果
二、代码
总结

前言

通过QML的QtGraphicalEffects模块实现的透明，可以使用FastBlur或GaussianBlur。

一、效果

在这里插入图片描述

二、代码

1.模块代码

//Rect_blur.qml
import QtQuick 2.0
import QtGraphicalEffects 1.14
Rectangle {
   
    property Item m_source
    property bool m_dragable:  true //未使用
    property color border_color: "transparent"
    property int border_radius: 10
    property int blur_radius: 32
    id:blur_rect
    width: 100
    height: 100
    radius: border_radius
    clip: true
    MouseArea {
   
         anchors.fill: parent
         drag.target: parent
         drag.axis:  Drag.XAndYAxis
     }

    Rectangle{
   
        id:blur_1
        anchors.fill: parent
        clip: true
        visible:false
        FastBlur{
   
            id:blur
            width: m_source.width
            height

最低0.47元/天解锁文章