CODEWITHSUNDEEP
qtqmlqt6
Kamichanw
Kamichanw

Reputation: 23

How to make the background of a QWidget initialized from a qml component transparent?

I'm writing a customizing tooltip. In order to display DropShadow, the actual size of control should be larger.

Item {
    id: control
    width: tipText.width + 5
    height: tipText.height + 5
    ...
    Rectangle {
        id: background
        height: tipText.height
        width: tipText.width
        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 {
            ...
        }
    }
}

In the cpp file:

QQuickView* view = new QQuickView;
view->setSource(QUrl("qrc:/impl/my.qml"));
        
QWidget* cont = QWidget::createWindowContainer(view,  nullptr);
        
cont->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowStaysOnTopHint | Qt::Tool);

It looks like this now:

I wonder how to make the background transparent. (Moreover, I've tried cont->setAttribute(Qt::WA_TranslucentBackground), it just made everything transparent)

Upvotes: 1

Views: 133

Answers (1)

folibis
folibis

Reputation: 12874

I guess that you have to set the window color to transparent too. Actually, that works for me:

Window {
    visible: true
    id: window
    flags: Qt.ToolTip | Qt.FramelessWindowHint | Qt.WA_TranslucentBackground
    width: background.width + 40
    height: background.height + 40
    color: "#00000000"
    x: (Screen.width - window.width) / 2
    y: (Screen.height - window.height) / 2

    Rectangle {
        id: background
        height: 40
        width: 100
        anchors.centerIn: parent
        layer.enabled: true
        layer.effect: DropShadow {
            anchors.fill: background
            horizontalOffset: 2
            verticalOffset:2
            radius: 10.0
            samples: 10
            color: "lightgrey"
            source: background
        }
    }

    Rectangle {
        anchors.fill: parent
        anchors.margins: 20
        color: "white"
        anchors.centerIn: parent

        Text {
            anchors.fill: parent
            text: "Hello, world!"
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
        }

        MouseArea {
            anchors.fill: parent
            onClicked: window.close();
        }
    }
}

Upvotes: 1

Related Questions