How to use QtQuick.Controls 2.xx with QtGraphicalEffects

Question

I have a little problem with QtQuick controls 2 and graphical effects: as soon as I use a graphical effect on an item which contains a control (for instance a simple Button), the controls stop displaying correctly. For instance with a Button, only the text shows, the background is not visible anymore. It happens only with the Material style.

See the following example:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Material 2.12
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.12

Pane {
    id: root

    width: 300
    height: 150

    Pane {
        id: content
        visible: false
        width: 200
        height: 50

        Button {
            anchors.fill: parent
            text: "I'm a Button too..."
        }
    }

    DropShadow {
        anchors.fill: content
        source: content
        radius: 10
        samples: 21
    }

    Button {
        anchors.top: content.bottom
        anchors.topMargin: 10
        text: "Button"
    }
}

If you run this through qmlscene using the Material style (qmlscene --style Material test.qml where test.qml contains the previous example) then this is what happen:

The second button displays as it should, but the first one only show the text... As soon as I remove the DropShadow, the first button displays fine again.

Has anyone encountered this problem before ? Is this a known bug, or am I doing something I shouldn't ? Is there any workaround ?

Dimitry Ernot Dimitry Ernot · Accepted Answer · 2019-06-05T21:39:15

You declared your button as flat with the property flat: true. So, your button doesn't have a background.

The second problem is that you set the shadow on the Pane element and not the button. So, you will get somehting like this:

You can make your button filling the whole pane by adding the property padding: 0. Or, your can also remove the Pane and apply the shadow on the Button.

How to use QtQuick.Controls 2.xx with QtGraphicalEffects

1 Answers