Apply QML DropShadow invalid, error hint and hint for “QML DropShadow: Cannot anchor to an item that isn't a parent or sibling.”

Question

Codes show as below:

import QtQuick 2.12
import QtGraphicalEffects 1.12
import QtQuick.Controls 2.12

Item {
    width: 300
    height: 300

    TabBar {
        id: bar
        width: parent.width
        contentHeight: 38

        background: Rectangle {
            color: "#477aa0"
        }

        TabButton {
            id: tabBtn1
            width: 129
            height: 36
            text: qsTr("Plate Layout")
            anchors.top: parent.top
            background: Rectangle {
                color: "#ffffff"
            }
        }

        //is tabBtn1's sibling!
        DropShadow {
            anchors.fill: tabBtn1
            horizontalOffset: 3
            verticalOffset: 4
            radius: 5
            samples: 11
            color: "#000"
            opacity: 0.75
            source: tabBtn1
        }
    }
}

If TabBar change to Rectangle and TabButton change to Button, it works.As far as I know，qml included in brackets by Menu. I guess it is bug of Qt lib, maybe I am wrong.

Mitch Mitch · Accepted Answer · 2019-01-28T13:22:07

This is because a DropShadow is not a TabButton, which causes this function to return false and it is not parented to the effective contentItem like the TabButton is. Note that the contentItem is a ListView, so making the DropShadow a child of it and trying to make it then fill the TabButton probably wouldn't work anyway.

An easier solution is to use layers:

    TabButton {
        id: tabBtn1
        width: 129
        height: 36
        text: qsTr("Plate Layout")
        anchors.top: parent.top
        background: Rectangle {
            color: "#ffffff"
        }

        layer.enabled: true
        layer.effect: DropShadow {
            anchors.fill: tabBtn1
            horizontalOffset: 3
            verticalOffset: 4
            radius: 5
            samples: 11
            color: "#000"
            opacity: 0.75
        }
    }

Apply QML DropShadow invalid, error hint and hint for “QML DropShadow: Cannot anchor to an item that isn't a parent or sibling.”

1 Answers