如何让由QML组件初始化生成的QWidget实现背景透明效果

解决方案 #

你只给QWidget容器设置透明属性是不够的，还需要同步调整QQuickView的渲染配置和属性设置顺序，具体修改如下：

1. C++端代码调整 #

你需要同时给QQuickView设置透明背景色，且注意属性设置顺序：必须先设置窗口flag，再设置透明属性，否则会出现内容全透明的异常：

QQuickView* view = new QQuickView;
// 新增：给QQuickView设置透明背景色
view->setColor(Qt::transparent);
view->setSource(QUrl("qrc:/impl/my.qml"));
        
QWidget* cont = QWidget::createWindowContainer(view,  nullptr);
        
cont->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowStaysOnTopHint | Qt::Tool);
// 先设窗口flag再设置透明属性
cont->setAttribute(Qt::WA_TranslucentBackground);
// 额外注意：不要给cont设置任何带背景色的QSS，否则会覆盖透明效果

2. QML端代码调整 #

你现有的QML结构基本没问题，只需要给DropShadow效果开启透明边框配置，避免阴影边缘出现硬边：

Item {
    id: control
    width: tipText.width + 5
    height: tipText.height + 5
    // Item本身无默认背景，不需要额外设置透明
    Rectangle {
        id: background
        height: tipText.height
        width: tipText.width
        // 这里可以根据需求设置背景色，比如你要白底黑字就设color: "white"，不会受全局透明影响
        Text {
            id: tipText
            // 文本配置保留即可
        }
    }

    Rectangle {
        id: shadow
        height: tipText.height - 3
        width: tipText.width - 3
        z: -1
        color: "white"
        anchors.bottom: background.bottom
        anchors.right: background.right
        layer.enabled: true
        layer.effect: DropShadow {
            // 新增：开启透明边框，避免阴影边缘异常
            transparentBorder: true
            // 其余阴影配置保留即可
        }
    }
}

修改完成后即可实现仅tooltip内容+阴影显示，窗口背景完全透明的效果。

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