After I implemented infinite scrolling in uReadIt 2.0, I found that after a couple of page loads the UI would start to be sluggish. It’s not surprising, considering the number of components it kept adding to the ListView. But in order to keep the UI consistent, I couldn’t get rid of those items, because I wanted to be able to scroll back through old ones. What I needed was a way to make QML ignore them when they weren’t actually being displayed.
Today I found myself reading about the QML Scene Graph, which led me to realize that QML wouldn’t spend time and resources trying to render an item if it knew ahead of time that there wasn’t anything to render. So I made a 1 line change to my MultiColumnListView to set the opacity of off-screen components to 0.
One line change to make off-screen items transparent
I also found these cool ways to visualize what QML is doing in terms of drawing, which are very helpful when it comes to optimizing, and let me verify that my change was doing what I expected. I’m pretty sure Florian Boucault has shown me this before, but I had forgotten how he did it.
After change, only visible items rendered
Before change, all items being rendered