QQuickView (QML) transparent for mouse events

Question

I have a big rectangle with a button centered. I would like that my rectangle is transparent to mouse events except for the button, which must be clickable. I mean, I would like to be able to select code under my rectangle with the mouse, exactly as if no Rectangle was displayed.

I have added a MouseArea for all the big Rect, trying to ignore mouse events, but it does not work.

I read that 'Qt::WA_TransparentForMouseEvents' is used for that purpose, but in Qt windows as fasr as I know, not available in my case.

Thanks in advance

My QML is loaded from main.cpp:

   QQuickView* pView = new QQuickView();

    pView->setSource(QUrl("qrc:/MyRect.qml"));
    pView->setFlags(Qt::Tool | Qt::FramelessWindowHint | Qt::WindowStaysOnTopHint);
    pView->setColor("transparent");
    pView->show();

MyRect.qml:

import QtQuick 2.0
import QtQuick.Controls 1.4

Rectangle {
    width: 500
    height: 500

    color: "green" // it would be transparent
    opacity: 0.5

    Button {
        anchors.centerIn: parent
        height: 50; width: 50
        onClicked: console.log("clicked");
    }

    MouseArea {
        anchors.fill: parent
        enabled: false
        propagateComposedEvents: true
        hoverEnabled: false

        // All this code I think is useless...
        onClicked: mouse.accepted = false
        onReleased: mouse.accepted = false
        onEntered: mouse.accepted = false
        onExited:  mouse.accepted = false
        onWheel:  mouse.accepted = false
    }
}

This seems related to: http://stackoverflow.com/questions/40833624/how-to-make-a-true-transparent-window-to-cursor-preferably-on-a-pure-qml-qt - Appart that the `Rectangle` should be drawn half-transparent, and there is only one `Button` involved — derM - not here for BOT dreams, Nov 29 '16 at 21:07
And what you try to do with this `MouseArea`, I totaly do not get. — derM - not here for BOT dreams, Nov 29 '16 at 21:12

Ross Rogers · Answer 1 · 2016-11-30T00:12:44.967

0

The Rectangle is transparent to mouse clicks by default. If you take away that MouseArea, the Button will receive clicks, and all clicks on the Rectangle will pass through to its enclosing parent:

import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtQuick 2.7
import QtQuick.Controls 1.5
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.3


ApplicationWindow {
    width: 200; height: 150; visible: true
    property string status;

    ColumnLayout {
      Rectangle {
        width:100;height:100;

        MouseArea {
            anchors.fill: parent
            onClicked: status = "Enclosing Rectangle Clicked";    
        }

        Rectangle {
            width: 75
            height: 75
            color: "green" // it would be transparent
            opacity: 0.5
            Button {
                anchors.centerIn: parent
                height: 25; width: 25
                onClicked: status = "Button clicked";
            }
        }
      }
      Text{ text: status}
    }
}

In action:

edited Nov 30 '16 at 00:12

answered Nov 30 '16 at 00:07

Ross Rogers

23,523
27
108
164

Thanks for your reply. I understand when you say "all clicks on the Rectangle will pass through to its enclosing parent", but I suppose it means 'parent' in my application (another part of the same app). In my case I have this standalone window in my application, and I would like that other Windows applications behind my RECT receive the mouse events when clicked in my RECT. Is it possible? Thanks again!! – Diego Nov 30 '16 at 09:48
Please see the link I posted in the comment under your question. This is a quite similar question. The solution has been, to create multiple windows, one would hold your green `Rectangle` and another on your `Button`. Only the latter handels MouseEvents. Take the example and just add a green `Rectangle` to the top-level `ApplicationWindow` – derM - not here for BOT dreams Nov 30 '16 at 13:11
@deigo , I think your problem is then that the `QQuickView` itself is catching the mouse click. If you provide a full [S.S.C.C.E.](http://sscce.org/), then perhaps it can be figured out. – Ross Rogers Nov 30 '16 at 14:44

QQuickView (QML) transparent for mouse events

1 Answers1

Linked