[Interest] QML Performance Discussion

[Nuno Santos]

Hi,

I’m being faced with a performance problem.

The app i’m building displays rows of tracks. Each track can contains a list a cells. This combination of columns and rows and easily go beyond 50x50;

The problem is that every track has a lot of buttons and sliders. Each cell by it’s turn has inside some elements to provide additional cosmetics.

I was testing my prototype with only a few tracks and cells on each track (4x8). I started realising my problems when I added 50 tracks and 50 cells on each one and started scrolling. On a PC this is easy and doesn’t give any problems, but when doing it on a iPad 2… things are quite different. 

The way I was doing this was:

ListView {
	id: tracks
	model: controller.tracks
	delegate: TrackView {
			cells: model.cells
		...
		}
	}
}

TrackView {
	property alias cells: cells.model
	ListView {
		id: cells
	}
	...
}

I need to have a really good performance so I started analysing other options. My next idea was to replace the list on each track by a grid view which received the model as a list of cells. The cells should then be arranged in a single array. The problem here is that grid view will start laying out the cells at the end of its bounds. I cannot specify when it should start switching rows. For example. I have 10 tracks but I can only 5. I have 1 cell on each track. I want to see cells in the following way:

(Pipes define my viewport)

|   0,  1 ,   2,  3,   4|,   5,   6,   7,   8,  9
| 10, 11, 12, 13, 14|, 15, 16, 17, 18, 19

The way GridView is done doesn’t allow me this. 

Obviously, I start to think that my only option here is to go to scene graph implementation of a custom element.

Question:

Is there anyway to easily customise the way GridView chooses the cells to render? 

I would love to have an advise from more experienced developers before starting to code like a mad.

Thanks,

With my best regards,

Nuno Santos