Qt6中如何用MultiEffect实现子矩形按父矩形圆角裁剪？

你可以通过调整MultiEffect的层级、锚定方式以及隐藏原始子矩形来实现需求。以下是可行的代码示例：

import QtQuick
import QtQuick.Effects

Item {
    anchors.centerIn: parent
    width: 300
    height: 300

    // 蓝色父圆角矩形
    Rectangle {
        id: parentRect
        width: parent.width
        height: parent.height
        color: "blue"
        radius: 50
    }

    // 与父矩形同形状的遮罩（不可见）
    Rectangle {
        id: maskRect
        visible: false
        width: parentRect.width
        height: parentRect.height
        radius: parentRect.radius
    }

    // 经过圆角裁剪的绿色子矩形
    MultiEffect {
        anchors.bottom: parentRect.bottom
        width: parentRect.width
        height: parentRect.height * 0.1
        // 绿色矩形作为效果源
        source: Rectangle {
            color: "green"
            width: parentRect.width
            height: parentRect.height * 0.1
        }
        maskEnabled: true
        // 使用父矩形形状作为遮罩
        maskSource: maskRect
    }
}

为什么你的原始代码无效？ #

1. 层级问题：你直接显示了未裁剪的childRect，同时MultiEffect叠加在其上方，导致裁剪效果被原始矩形覆盖，需要将原始子矩形设为visible: false，仅通过MultiEffect显示裁剪后的版本。
2. 遮罩范围匹配：原始代码中MultiEffect的锚定和遮罩源的作用范围没有对齐，导致遮罩无法正确作用于目标区域。通过使用与父矩形同尺寸、同圆角的独立遮罩项，可以确保裁剪形状完全匹配。

其他Qt6原生方案 #

如果MultiEffect仍不符合需求，还可以使用Shape组件自定义裁剪路径：

import QtQuick
import QtQuick.Shapes

Item {
    anchors.centerIn: parent
    width: 300
    height: 300

    Rectangle {
        id: parentRect
        width: parent.width
        height: parent.height
        color: "blue"
        radius: 50
    }

    Shape {
        anchors.bottom: parentRect.bottom
        width: parentRect.width
        height: parentRect.height * 0.1

        ShapePath {
            fillColor: "green"
            // 复用父矩形的圆角路径
            path: parentRect.clipPath
        }
    }
}

内容的提问来源于stack exchange，提问作者joe.arbo