QML - 堆叠元素的不透明度

Question

我有两个堆叠的项目。这两个项目都有一个半透明的背景。圆圈现在显示下面的圆角矩形。

有什么方法可以让我隐藏了长长的圆角的矩形与圆形重叠的部分？也许改变父母，圆圈的背景是从更高的祖先中拔出来的，因此忽略它下面的矩形？

下面是代码：

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

解决办法，虽然有点哈克将实现自己的QML MultiRectangle组件，它允许设置不透明度和周围画了一堆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 
     } 
    } 
} 

结果

注意，由于layer.enabled设置为true，夹子也被设置为真。因此，太靠近MultiRectangle边界的子项边界将被剪切。