qml6实现图片圆角效果

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

效果

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

ColumnLayout {

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

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

遮挡

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

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

拆解来

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值