本文实现前后效果对比:
正文
根据官方的描述, 考虑到性能表现, 父组件的 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://*.com/questions/6090740/image-rounded-corners-in-qml
- https://dotnet9.com/2976.html
- https://tieba.baidu.com/p/3321003177?red_tag=1030095865