qml6实现图片圆角效果

最新推荐文章于 2025-01-15 18:00:00 发布

原创

最新推荐文章于 2025-01-15 18:00:00 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#qml #qt6 #图片圆角效果 #Image #BorderImage

在Qt5中，实现图片圆角效果相对简单，但在Qt6中，这些便利的类型被移除，取而代之的是使用shader。本文提供了一种简单的方法，通过遮挡方式实现图片圆角，无需编写复杂的shader。该方法适用于大多数场景，且介绍了具体实现步骤和代码示例。

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

效果

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

ColumnLayout {

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

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