How to react on a change of visibility of children?

I have different container items and I would like to make not visible when all of their children are not visible.

Dynamically, some code is parsing all the items recursively and set them visible or not visible depending on some filter (like a search input). The container items are ignored by this filtering.

After that filtering, how can I detect the visibility has changed and update my container items accordingly ?

So far I have this code but I need this to be executed every time the children visibility is changed :

visible: visibleChildren.size > 0

Try this instead:

visible: visibleChildren.length > 0

In fact, only visible: visibleChildren.length will do as well.

visibleChildren.size is undefined - there is no size member.

Keep in mind you will have problems setting items back to visible, judging by the behavior of the following code:

  MouseArea {
    anchors.fill: parent
    onClicked: inner.visible = !inner.visible
  }

  Rectangle {
    id: outer
    anchors.fill: parent
    color: "blue"
    visible: visibleChildren.length
    Rectangle {
      id: inner
      width: 50
      height: 50      
      color: "red"
    }
  }

Once the parent becomes invisible, the inner item's visibility is always false, even if explicitly set to true.

What happens is that a child cannot be set to visible if its parent is not visible, so once visibleChildren is empty there is no way to populate it back by setting a child to visible. A child cannot be set to visible while the parent is invisible, and the parent is invisible if there are not visible children.

So if that kind of behavior is your requirement, you will have to implement some other visibility tracking mechanism instead of using visibleChildren.