Qt-在WIN10上实现毛玻璃效果(Aero效果，QML实现的，并不是C++语法)

相关资料：

https://blog.csdn.net/qq_40194498/article/details/79849807   怎么创建一个QML工程

https://blog.csdn.net/robertkun/article/details/42007901     QML设置背景图片

https://www.cnblogs.com/surfsky/p/4275346.html   毛玻璃原文章

https://download.csdn.net/download/zhujianqiangqq/13092324  代码包下载

 

PS:使用C++语法的IsCompositionEnabled函数实现的都是利用系统函数实现的，IsCompositionEnabled中对系统版本做了判断，开启条件必须是WIN8以下系统。具体可查看QT自代实例“Music Player”。

 

.pro

QT += quick

CONFIG += c++11

# The following define makes your compiler emit warnings if you use
# any Qt feature that has been marked deprecated (the exact warnings
# depend on your compiler). Refer to the documentation for the
# deprecated API to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS

# You can also make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0

SOURCES += \
        main.cpp

RESOURCES += qml.qrc

# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =

# Additional import path used to resolve QML modules just for Qt Quick Designer
QML_DESIGNER_IMPORT_PATH =

# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Image {
            id: rocket
            fillMode: Image.TileHorizontally
            smooth: true
            source: 'file:///D:/Image/12954363.jpg'
        }


    FuzzyPanel{
            id: panel
            width: 200;
            height: 200;
            x: 200
            y: 200
            target: rocket
        }
}

FuzzPanel.qml

import QtQuick 2.0
import QtGraphicalEffects 1.0

/**
具有毛玻璃效果的视图
    属性target：目标控件。要求与本控件位于同一坐标系
    若本视图遮盖住目标控件，遮盖部分显示毛玻璃效果

思路
    放置一个Blur控件
    计算本视图与目标视图的重叠部分
    移动Blur控件到合适的位置
    依据同样思路，可作出各种不同效果

Lisence: MIT
Author: surfsky.cnblogs.com 2015-01
请保留此声明
*/
Rectangle{
    id: panelFg
    color: 'lightblue'
    width: 200
    height: 200
    clip: true

    // 属性
    property Item target : panelBg  // 模糊源
    property bool dragable : true   // 是否可拖动

    // 毛玻璃效果
    FastBlur {
        id: blur
        source: parent.target
        width: source.width;
        height: source.height
        radius: 64
    }

    // 可拖移
    MouseArea {
        id: dragArea
        anchors.fill: parent
        drag.target: dragable ? parent : null
    }

    // 设置模糊组件的位置
    onXChanged: setBlurPosition();
    onYChanged: setBlurPosition();
    Component.onCompleted: setBlurPosition();
    function setBlurPosition(){
        blur.x = target.x - x;
        blur.y = target.y - y;
    }
}

TestFuzzPanel.qml

import QtQuick 2.0
import QtQuick.Controls 1.2

/**
Fuzzy Panel test
*/
Rectangle {
    id: root
    width: 600
    height: 600

    //
    Row{
        width:parent.width
        height: 100
        Button{text: 'actionSheet'; onClicked: {animActionSheet.start();}}
        Button{text: 'reset'; onClicked: {animReset.start();}}
    }

    // 背景
    Rectangle{
        id: panelBg
        width: 400
        height: 400
        anchors.centerIn: parent
        color: 'lightgreen'
        Image{
            id: img
            source: "bug.png"
            anchors.centerIn: parent
        }
    }

    // 毛玻璃面板
    FuzzyPanel{
        id: panel
        width: 200;
        height: 200;
        x: 200
        y: 200
        target: panelBg
    }

    //--------------------------------------------
    // Animations
    //--------------------------------------------
    SequentialAnimation{
        id: animReset
        ScriptAction{script:{
            panel.width = 200;
            panel.height = 200;
            panel.x = 100;
            panel.y = 100;
            panel.dragable = true;
        }}
    }

    SequentialAnimation{
        id: animActionSheet
        ScriptAction{script:{
            panel.width = parent.width;
            panel.height = 400;
            panel.x = 0;
            panel.y = root.height;
            panel.dragable = false;
        }}
        PropertyAnimation{
            target: panel
            properties: 'y'
            from: root.height
            to: root.height - panel.height
        }
    }

}