QML - 堆叠元素的不透明度
问题描述:
我有两个堆叠的项目。这两个项目都有一个半透明的背景。圆圈现在显示下面的圆角矩形。QML - 堆叠元素的不透明度
有什么方法可以让我隐藏了长长的圆角的矩形与圆形重叠的部分?也许改变父母,圆圈的背景是从更高的祖先中拔出来的,因此忽略它下面的矩形?
下面是代码:
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"
}
}
}
答
解决办法,虽然有点哈克将实现自己的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边界的子项边界将被剪切。
使用这种方式时,不让用户看到不透明的最终目的是什么? – skypjack
长矩形不显示,并且由于缺少类型,您的代码无法运行。 – Mitch
[QML Opacity Inheritance]的可能重复(http://*.com/questions/9204226/qml-opacity-inheritance) – peppe