qml components disappearing after enabeling layers

Question

I have a Component for an sddm theme. At the moment I use the theme dark sugar as the base theme. The component looks like the following:

Item {
        id: hexagon
        property color color:"yellow"
        property int radius: 30

        //layer.enabled: true
        //layer.samples: 8

        Shape {
        //... Here some Positioning and other Stuff
                ShapePath {
                //... Here some Options and Pathlines
                }
        }
}

This works fine, but as soon as I uncomment both layer settings the component disappears. Does this happen, because I load the component like this:

Pane {
...
    Item {
    ...
       MyComponent {
            z: 1
        }
    }
}

Nor the Pane or the Item use layer but most Components in the Item use the z: 1 property.

You probably need to share a bit more code to get a proper answer. What is the parent of `MyComponent` ? Have a look at the answer here https://stackoverflow.com/questions/28964725/how-does-opacity-work-in-qml They are mentioning layer (and also have a link to another question about layer property) in relation to an Image parent not being visible. — iam_peter, Oct 10 '22 at 09:39
You are right about more code, but because I did not wrote any line into the Main.qml, only `MyComponent` I am not really sure, which part may trouble me. I updated the Question so the parents are listed. — MaKaNu, Oct 10 '22 at 18:05
The first thing we will do to help you is to copy and paste your code to try it out. However, if you do not supply minimal reproducible code, then, you are putting that task/work to people who want to help you. Please, help us by putting more effort into the question. — Stephen Quan, Oct 11 '22 at 08:06

score 2 · Accepted Answer · answered Oct 11 '22 at 10:59

As iam_peter says, the default width and height properties of any Item are 0, and layer.enabled sets the size of the offscreen texture to the item size. By default, the scene graph doesn't do any clipping: a child item can populate scene graph nodes outside its parent's bounds. But when you confine the children's rendering to a specific offscreen texture, anything that doesn't fit is clipped. Here's a more interactive example to play with this:

import QtQuick
import QtQuick.Controls

Rectangle {
    width: 640
    height: 480

    Column {
        CheckBox {
            id: cbLE
            text: "layer enabled"
        }

        Row {
            spacing: 6
            TextField {
                id: widthField
                text: layerItem.width
                onEditingFinished: layerItem.width = text
            }

            Label {
                text: "x"
                anchors.verticalCenter: parent.verticalCenter
            }

            TextField {
                id: heightField
                text: layerItem.height
                onEditingFinished: layerItem.height = text
            }
        }
    }

    Rectangle {
        id: layerItem
        x: 100; y: 100
        border.color: "black"; border.width: 2

        layer.enabled: cbLE.checked

        Rectangle {
            width: 100
            height: 100
            color: "tomato"
            opacity: 0.5
        }

        Text {
            text: "this text will get clipped even when layer size is defined"
        }
    }
}

You can use renderdoc to see how the rendering is done; for example you can see the texture that is created by enabling the layer.

iam_peter · Answer 2 · 2022-10-11T10:16:50.347

This is a small reproducible example:

import QtQuick

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

    Item {
        //width: 200
        //height: 200

        //layer.enabled: true

        Rectangle {
            width: 100
            height: 100
            color: "red"
        }
    }
}

I suspect that if you don't set a size on the Item on which you want to enable the layer (layer.enabled: true), it will have a size of 0. Hence the offscreen buffer has a size of 0.

As a side note, this works without layer, because the clip property of an Item by default is set to false. So it won't clip to the bounds of its parent.

Sorry about the not provided minimal example. Normally I try to provide MWE, I wasn't really sure if I could just use the `Main.qml` to write a MWE. I know this now better for the next time. — MaKaNu, Oct 12 '22 at 17:39

qml components disappearing after enabeling layers

2 Answers2