QML-堆叠元素的不透明度

goocreations 发表于 Dev

职位

我有两个被堆放的物品。两项均具有半透明的背景。圆圈现在显示下面的圆角矩形。

有什么办法可以隐藏长圆形矩形与圆交叠的部分吗？也许要更改父级，将圆的背景从祖先拉到更高的位置，从而忽略正下方的矩形？

这是代码：

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"
        }
    }
}

来自Quivillic的Yoann Quenach

一个解决方案，尽管有点棘手，但它是实现您自己的QMLMultiRectangle组件，该组件允许设置不透明度并围绕一堆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)
                })

    }
}

这将在添加到MultiRectangle项的矩形后面动态创建伪边框。

例子

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
        }
    }
}