qml6实现图片圆角效果

qt5有一些方便的qml类型来实现图片圆角，qt6里把这些都移除了，换成更强大的shader，代价是一个小的需求都要写shader文件，用qsb编译成qml可用的二进制格式，另外肯定会涉及到开销问题。
这里用一个BorderImage来做遮挡，实现图片圆角效果，这种方式不是很灵活，但足够简单，大多数情况下也挺有用，更关键的是不用学各种shader方言。

效果

上面卡片中的结构用qml可以简单概括成：

ColumnLayout {

	Image {
		。。。
	}
	
	Text {
		。。。
	}
	
	RowLayout {
		
		Label {
			visible: ...
			。。。	
		}
	
		Text {
			。。。
		}
	
		Item {
			 Layout.fillWidth: true  // spacer
		}
	}
}

我们要处理的是Image类型的左上和右上两个角。

遮挡

构造圆角的思路是这样，用一张BorderImage圆角边框来覆盖在Image类型的上面。要实现无缝的效果，需要满足两个要求：

• BorderImage圆角边框的颜色要跟背景色一致
• BorderImage边框图片的宽度要跟Image图片的宽度一致(针对我现在想实现的上边框圆角的情况来考虑)

拆解来看非常