QML 圆角矩形 radius clip 对子组件无效的问题解决方法

本文实现前后效果对比:

正文

根据官方的描述, 考虑到性能表现, 父组件的 radius, clip 对子组件是无效的, 也就是说如果外部矩形设置圆角矩形, 对内部矩形的裁剪是无效的, 如下图所示:

下面介绍一种最简单的方案, 使用 layer 属性来实现圆角区域的裁剪.

import QtQuick 2.0
import QtGraphicalEffects 1.0  // 导入这个模块

Rectangle {
    id: _rect
    width: 100
    height: 100
    
    // 在父组件中设置 layer 属性的 enabled 和 effect 子属性
    layer.enabled: true
    layer.effect: OpacityMask {
        maskSource: Rectangle {
            width: _rect.width
            height: _rect.height
            radius: _rect.radius
        }
    }
    
    Rectangle {
        id: _childRect
        width: parent.width
        height: 30
        color: 'blue'
    }
}

实现效果如下:

参考

• https://stackoverflow.com/questions/6090740/image-rounded-corners-in-qml
• https://dotnet9.com/2976.html
• https://tieba.baidu.com/p/3321003177?red_tag=1030095865