如何使用Qt实现带模糊背景的UI界面？

当然可以实现这种半透明带模糊背景的UI效果，Qt结合平台原生API或自身的图形效果组件就能做到，下面分平台说明实现思路，并提供C++和Python示例。

核心实现思路 #

模糊背景效果的实现依赖平台原生能力（跨平台的Qt内置效果性能稍弱），整体步骤分为两步：

1. 设置窗口/部件的半透明底色
2. 为背景添加模糊效果

平台适配细节 #

• Windows: 利用系统的Acrylic毛玻璃效果，通过Win32 API调用实现
• macOS: 使用系统的Vibrancy效果，通过Objective-C桥接调用原生组件
• Linux: 部分桌面环境（如KDE）支持Qt的QGraphicsBlurEffect，或通过窗口管理器的模糊协议实现

C++ 示例代码 #

1. Windows Acrylic模糊效果实现 #

#include <QWidget>
#include <Windows.h>
#include <dwmapi.h>

#pragma comment(lib, "dwmapi.lib")

class BlurWindow : public QWidget {
    Q_OBJECT
public:
    BlurWindow(QWidget *parent = nullptr) : QWidget(parent) {
        // 设置窗口半透明
        setWindowOpacity(0.9);
        setAttribute(Qt::WA_TranslucentBackground);
        setWindowFlags(Qt::FramelessWindowHint | Qt::WindowStaysOnTopHint);

        // 启用Acrylic效果
        HWND hwnd = (HWND)winId();
        DWORD attr = DWMSBT_MAINWINDOW;
        DwmSetWindowAttribute(hwnd, DWMWA_SYSTEMBACKDROP_TYPE, &attr, sizeof(attr));

        // 设置窗口圆角（可选）
        MARGINS margins = {-1};
        DwmExtendFrameIntoClientArea(hwnd, &margins);
    }
};

2. 跨平台基础模糊效果（性能稍弱） #

如果不需要原生系统级的模糊质感，可以用Qt内置的QGraphicsBlurEffect：

#include <QWidget>
#include <QGraphicsBlurEffect>
#include <QLabel>

class BlurWidget : public QWidget {
    Q_OBJECT
public:
    BlurWidget(QWidget *parent = nullptr) : QWidget(parent) {
        // 设置半透明底色
        setStyleSheet("background-color: rgba(255,255,255,180);");
        
        // 创建模糊效果并应用到背景
        QGraphicsBlurEffect *blurEffect = new QGraphicsBlurEffect(this);
        blurEffect->setBlurRadius(10);
        QLabel *bgLabel = new QLabel(this);
        bgLabel->setGeometry(rect());
        bgLabel->setGraphicsEffect(blurEffect);
        
        // 确保前景部件在模糊层上方
        QLabel *contentLabel = new QLabel("半透明模糊背景示例", this);
        contentLabel->setAlignment(Qt::AlignCenter);
        contentLabel->setStyleSheet("color: #333; font-size: 16px;");
        contentLabel->raise();
    }
};

Python 示例代码（PyQt6） #

1. Windows Acrylic效果实现 #

import sys
from PyQt6.QtWidgets import QWidget, QApplication
import ctypes
from ctypes import wintypes

# 加载Win32 API
dwmapi = ctypes.WinDLL("dwmapi")
DWMWA_SYSTEMBACKDROP_TYPE = 38
DWMSBT_MAINWINDOW = 2

class BlurWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowOpacity(0.9)
        self.setAttribute(Qt.WidgetAttribute.WA_TranslucentBackground)
        self.setWindowFlags(Qt.WindowType.FramelessWindowHint | Qt.WindowType.WindowStaysOnTopHint)
        
        # 启用Acrylic效果
        hwnd = self.winId()
        attr = ctypes.c_int(DWMSBT_MAINWINDOW)
        dwmapi.DwmSetWindowAttribute(wintypes.HWND(hwnd), wintypes.DWORD(DWMWA_SYSTEMBACKDROP_TYPE), ctypes.byref(attr), ctypes.sizeof(attr))

if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = BlurWindow()
    window.resize(400, 300)
    window.show()
    sys.exit(app.exec())

2. 跨平台基础模糊效果 #

import sys
from PyQt6.QtWidgets import QWidget, QLabel, QApplication
from PyQt6.QtGui import QGraphicsBlurEffect

class BlurWidget(QWidget):
    def __init__(self):
        super().__init__()
        self.resize(400, 300)
        # 设置半透明底色
        self.setStyleSheet("background-color: rgba(255,255,255,180);")
        
        # 创建模糊背景层
        blur_effect = QGraphicsBlurEffect()
        blur_effect.setBlurRadius(10)
        bg_label = QLabel(self)
        bg_label.setGeometry(self.rect())
        bg_label.setGraphicsEffect(blur_effect)
        
        # 添加前景内容
        content_label = QLabel("半透明模糊背景示例", self)
        content_label.setAlignment(Qt.AlignmentFlag.AlignCenter)
        content_label.setStyleSheet("color: #333; font-size: 16px;")
        content_label.raise_()

if __name__ == "__main__":
    app = QApplication(sys.argv)
    widget = BlurWidget()
    widget.show()
    sys.exit(app.exec())

注意事项 #

• 原生系统模糊效果（Acrylic/Vibrancy）的视觉表现更贴合系统风格，但需要针对不同平台编写适配代码
• QGraphicsBlurEffect是跨平台的，但会增加渲染开销，不适合复杂UI或高性能场景
• 半透明效果和模糊效果叠加时，注意调整透明度值，避免内容可读性下降

内容的提问来源于stack exchange，提问作者Mr User