Qt：使用ShaderEffectSource对Item拍摄"UI快照"，提升渲染效率

最新推荐文章于 2022-02-21 11:17:21 发布

Jason188080501

最新推荐文章于 2022-02-21 11:17:21 发布

阅读量2.5k

点赞数 2

分类专栏： Qt 文章标签： qt 性能

本文链接：https://blog.csdn.net/wsj18808050/article/details/63685359

版权

本文介绍如何使用Qt的ShaderEffectSource优化UI性能。通过为静态但复杂的图像拍摄“UI快照”，减少渲染开销，解决界面卡顿问题。作者提供了一个实例，展示了ShaderEffectSource如何将240个带旋转动画的Item渲染时间从5毫秒降低到90微秒，提高了渲染效率。

摘要由CSDN通过智能技术生成

在上一篇中，提到了如何使用QML Profiler对程序性能问题进行分析
http://blog.csdn.net/wsj18808050/article/details/62226574

而这片文章，就开始我们第一个实战。

这个实战，对应一个很简单并且很常见的需求，就是我们有一个静态（固定内容）的图像，但是这个图像需要一直显示在那里，也许我们还需要对这个图像进行动画。这时候，根据这个图像本身的复杂程度，会给我们整体渲染带来不同程度的渲染开销，当图像足够复杂时，带来的开销可能会大到导致界面卡顿。而既然这是一个静态的图像，照道理就不应该带来过多的开销。所以本次文章的思路就是利用ShaderEffectSource对复杂的Item拍摄一个”UI快照”，代替其本体显示，提升整体渲染效率。

在我写的Demo里，我有一个GridView并且里面创建了240个Item（就是下图中的小方块），每个Item都有一个子Rectangle并且做了旋转等各种操作，同时Item本身也开启了clip（这个clip会给渲染带来很高的负担，因为每个clip都会开启一个渲染批次）。

代码如下：

GridView {
    id:gridView
    width: parent.width
    height: parent.height
    cellWidth: 50
    cellHeight: 50

    delegate: Item {
        width: 50
        height: 50
        clip: true

        Rectangle {
            anchors.centerIn: parent
            width: 32
            height: 32
            color: Qt.rgba( Math.random(), Math.random(), Math.random(), 1 ).toString()
            rotation: Mat