Image 默认是没有圆角的,但是为了让ui看起来美观,有时需要加上圆角,这里分享一种利用遮罩实现的方法。
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
import Movie 1.0
Card {
id:root
width: 325
height: 226
property var curMovieData
Movie{
onMovieData: {
root.curMovieData = data
var imgStr = curMovieData[0][1]
preview.source = imgStr.replace(/^https:\/\//i, "http://");
}
}
// 原始图片
Image {
id: preview
anchors.fill: parent
anchors.margins: 5
fillMode: Image.PreserveAspectCrop
visible: false // 隐藏原始图片
}
// 圆角遮罩
Rectangle {
id: mask
anchors.fill: parent
radius: 20
visible: false // 隐藏遮罩
}
// 应用遮罩
OpacityMask {
anchors.fill: parent
source: preview
maskSource: mask
}
}
整体效果: