QML Glow Inside a RowLayout

Question

I am using Qt 5.15 Quick 2 QML to create a row of custom buttons in a window. When I have a standalone custom button things appear to work fine, but when I put them in a RowLayout there appears to be severe clipping and artifacting issues.

A minimum reproducible example might look like:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    RowLayout
    {

        anchors.fill:parent
        anchors.margins: 25
        Button
        {
            text: "Click Me"
            Layout.fillWidth: true
        }

        CustomButton
        {
            text: "That Boy Don't Glow Right"
        }

        Button
        {
            x: 100; y:100
            text: "Click Me"
            Layout.fillWidth: true
        }
    }
}

with the custom control

import QtQuick 2.0
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15

Button {
    id: control
    text: "Click Me"

    Glow {
        anchors.fill: control
        radius: 64
        spread: 0
        samples: 128
        color: "red"
        source: control
        visible: true
    }
}

with example output:

One potential fix is to add change the Glow to

Glow {
        anchors.fill: control
        width: parent.width
        height:parent.height
        x:control.x
        y:control.y
        parent: control.parent
       ...

But this doesn't seem right. First, it's not obvious to me where parent.width and control.x and control.parent are bound from and what happens in single and multiple nesting. If a CustomButton is placed inside another control with id control, would it rebind the property? And it appears if a RowLayout is placed inside a RowLayout, then it would require parent: control.parent.parent. In my actual code there is some non-trivial positioning to allow margins for a drop shadow, too, and the CustomButton is in another container so the actual code that works is: x:control.x + parent.pad/2 and parent:control.parent.parent.parent which is, frankly, ridiculous and assumes that non-standard fields in the parent are always available.

Is there a better way? Was hoping I could keep the button's ability to glow itself.

JarMan JarMan · Accepted Answer · 2020-09-14T18:01:11

According to the docs:

"Note: It is not supported to let the effect include itself, for instance by setting source to the effect's parent."

So it's fortunate that you were able to get your example to work at all. One way to avoid using the parent as a source is to point the Glow object at the Button's background object:

Button {
    id: control

    Glow {
        source: control.background
    }
}

QML Glow Inside a RowLayout

1 Answers