c++ - 不透明度不适用于 QWebEngineView 和半透明背景

Question

也许这是一个错误。有一个顶级小部件必须有阴影。在那个小部件中，我想显示一个浏览器(只能呈现 html)。顶级小部件的不透明度必须是可调的。为了使投影效果如预期(不显示黑色边框)，我们需要将 Qt::WA_TranslucentBackground 设置为 true。但是不透明度的改变不起作用。为什么？但真正困扰我的是，如果您将浏览器小部件替换为任何其他小部件，例如QTextEdit，不透明度更改始终有效，包括阴影。

我在 Windows 8.1 主机上使用 Qt5.8 和 msvc2015。这是一个最小的工作示例:

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QWidget>
#include <QWebEngineView>
#include <QWebEnginePage>
#include <QVBoxLayout>
#include <QSlider>
#include <QGraphicsDropShadowEffect>

class TestWidget : public QWidget
{
    Q_OBJECT
public:
    explicit TestWidget(QWidget *parent = 0){
        this->setStyleSheet(".QWidget{color: qlineargradient(spread:pad, x1:0 y1:0, x2:1 y2:0, stop:0 rgba(0, 0, 0, 255), stop:1 rgba(255, 255, 255, 255));"
                               "background: qlineargradient( x1:0 y1:0, x2:1 y2:0, stop:0 cyan, stop:1 blue);}");

        QWebEngineView *view = new QWebEngineView;
        view->setUrl( QUrl("https://www.google.de") );
        this->setLayout(new QVBoxLayout);

        view->page()->setBackgroundColor(QColor(Qt::transparent));

        QWidget *container = new QWidget;
        container->setLayout( new QVBoxLayout );
        container->layout()->setContentsMargins(0,0,0,0);
        container->layout()->addWidget( view );
        this->layout()->addWidget( container );

        QSlider *slider = new QSlider;
        slider->setOrientation(Qt::Horizontal);
        slider->setFixedWidth(200);
        slider->setMinimum(20);
        slider->setValue(20);
        slider->setMaximum(100);
        connect(slider,&QSlider::valueChanged,this,
                [this](int value){
            this->setWindowOpacity(1.0 * value / 100.0);
        });
        slider->show();

        this->setAttribute(Qt::WA_TranslucentBackground,true);
        Qt::WindowFlags flags = 0;
        flags |= Qt::SplashScreen;
        flags |= Qt::FramelessWindowHint;
        setWindowFlags(flags);

        QGraphicsDropShadowEffect *shadow = new QGraphicsDropShadowEffect;
        shadow->setBlurRadius(10);
        shadow->setOffset(0,2);
        shadow->setEnabled(true);
        setGraphicsEffect(shadow);
    }

    ~TestWidget(){}
};

#endif // MAINWINDOW_H

专业文件:

QT       += core gui webenginewidgets

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = transparent-webpage-over-widget
TEMPLATE = app

# The following define makes your compiler emit warnings if you use
# any feature of Qt which as been marked as deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
# deprecated API in order to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS

# You can also make your code fail to compile if you use 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

HEADERS  += mainwindow.h

Answer 1

如 https://bugreports.qt.io/browse/QTBUG-41960 中所述，现在只需使用这一行即可:

webEngineView->page()->setBackgroundColor(Qt::transparent);

我已经在 Qt 5.6 中试过了，效果很好。

为了让这个答案更有帮助，让我展示所有相关代码。

在 MainWindow 中，我设置了这个:

setAttribute(Qt::WA_TranslucentBackground);
setAutoFillBackground(true);
setWindowFlags(Qt::FramelessWindowHint);

对于 webEngineView 对象，我设置了这些属性:

webEngineView->setAttribute(Qt::WA_TranslucentBackground);
webEngineView->setStyleSheet("background:transparent");
webEnginePage = webEngineView->page();
// https://bugreports.qt.io/browse/QTBUG-41960
webEnginePage->setBackgroundColor(Qt::transparent);

在您的 HTML 中，在您的 CSS 中使用透明背景，如下所示:

body { 背景:透明；

否则，我认为默认情况下 HTML 会有白色背景

希望对你有帮助。