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邊界的子項邊界將被剪切。