QML - Opacity of stacked elements

Question

I have two items that are stacked. Both items have a semi-transparent background. The circle now shows the the rounded rect below.

Is there any way I can hide the part of the long rounded rect that overlaps with the circle? Maybe changing the parent, that the background of the circle is pulled from the ancestor higher up, and therefore ignoring the rect immediately below it?

Here is the code:

Item
{
    id: choice1
    width: 300
    height: 100

    Rectangle
    {
        id: choiceLabel1
        width: 0
        height: parent.height / 1.5
        radius: parent.height * 0.5
        color: "#88808080"
        anchors
        {
            verticalCenter: choice1.verticalCenter
            left: choice1.left
            leftMargin: choiceIcon1.width / 2
        }
        border
        {
            width: 2
            color: "red"
        }
    }
    Rectangle
    {
        id: choiceIcon1
        width: choice1.height
        height: choice1.height
        radius: width * 0.5
        color: "#88808080"
        anchors
        {
            verticalCenter: choice1.verticalCenter
            left: choice1.left
        }
        border
        {
            width: 2
            color: "red"
        }
    }
}

Answer 1

A solution, albeit a bit hacky would be to implement your own QML MultiRectangle component, which allow to set an opacity and draw a border around a bunch of QML Rectangle

MultiRectangle.qml

import QtQuick 2.0

Item
{
    id: root
    layer.enabled: true

    property int borderWidth: 2
    property color borderColor

    Component
    {
        id: rectangle
        Rectangle{}
    }

    Component.onCompleted:{
        var temp = children.length
        for(var i=0; i<temp; i++)
            rectangle.createObject(this,
                {
                    "z":-100,
                    "anchors.centerIn": children[i],
                    "color": borderColor,
                    "width": children[i].width+borderWidth*2,
                    "height": children[i].height+borderWidth*2,
                    "radius": Math.max((children[i].height+borderWidth*2)
                                       /children[i].height*children[i].radius,
                                     (children[i].height+borderWidth*2)
                                       /children[i].height*children[i].radius)
                })

    }
}

This will dynamically create a pseudo border behind the rectangles added to a MultiRectangle item.

Example

import QtQuick 2.5
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

Window {
    id: root
    visible: true
    height: 200
    width: 400

    RadialGradient {
        anchors.fill: parent
        gradient: Gradient {
            GradientStop { position: 0.0; color: "white"}
            GradientStop { position: 0.3; color: "#444"}
            GradientStop { position: 1; color: "white"}
        }
    }

    MultiRectangle {
        anchors.centerIn: parent
        width: 300
        height: 100
        borderWidth: 2
        borderColor: "red"
        opacity: 0.5

        Rectangle {
            color: "cyan"
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            anchors.leftMargin: parent.borderWidth
            height: parent.height - 2 * parent.borderWidth
            width: height
            radius: height / 2
        }

        Rectangle {
            color: "cyan"
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.margins: parent.borderWidth
            anchors.top: parent.top
            height: 10
            width: height
            radius: height / 2
        }

        Rectangle {
            color: "cyan"
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.horizontalCenterOffset: 30
            anchors.margins: parent.borderWidth
            anchors.top: parent.top
            height: 30
            width: height
            radius: height / 2
        }

        Rectangle {
            color: "cyan"
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            anchors.leftMargin: 50
            height: parent.height * 0.6
            anchors.right: parent.right
            anchors.margins: parent.borderWidth
            radius: height / 2
        }
    }
}

Result

Note that since layer.enabled is set to true, clip is also set to true. Therefore, the border of child items too close to the MultiRectangle bounds will be clipped.