在上一篇中,提到了如何使用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