this would be an example for square grid cells in an app:
import Felgo 3.0
import QtQuick 2.0
title: "Square Grid"
// setting the width of the grid is important if we want to reference it in the children
// in this example the grid has the width of the page
// the repeater creates an item for each element in the model
model: [IconType.heart, IconType.circle, IconType.cogs, IconType.list]
// this is the item that is created by the repeater
// we set the width to the parent width (grid is the parent) divided by the number of colums our grid has (2 in our case)
// the repeater is not an actual item, it is just used to repeat this rectangle, so parent actually refers to the grid here
width: parent.width / grid.columns
// to make it square, the height equals the width
// the modelData is the current element of the model, so IconType.heart for the first element and so on
// the icon is centered in the rectangle
I originally set the page of my app needing this with GridView – where each list element had its own custom icon from image source etc,
I was told originally that to do this I would need to link it to the columns in the Grid (as you’ve done above)
I am a bit of a newbie and repeaters still make little to no sense to me especially adding custom text/images to one repeater object,
Thanks for your help, I managed to adapt it too function in GridView where I can’t specify columns by the following code below:
P.S For anyone else looking at what I’ve done, the key factor was giving my Page an ‘id’ and linking the gridview cell width to this, then dividing by 2, or how ever many ‘columns’ you wish to create! As I didn’t want my items displayed to be too the edge, like they were when I did this, I used the scale ability to bring them in a touch! (or however much you want)
Alex, please let me know if this would be considered a viable option haha!!!
looks good. It is common practice to use identifiers and property bindings like cellWidth: page.width / 2 for creating responsive layouts, which adapt to the actual page width.
A Repeater is actually not that complex. Similar to a ListView or GridView, a Repeater allows to dynamically show multiple Items based on a model and a delegate, which defines the looks of each item.
The only difference is, that a GridView or ListView also layouts the created child elements in a List or Grid. The Repeater on the other hand does no layout and is also not visible by itself. It simple takes care of creating Items based on your model and delegate. These items are created as neighbours of the Repeater in your QML, so the Repeater and all created Items share the same parent.
Want to find out if Felgo is a good fit for your company?
As part of the free Business evaluation, we offer a free welcome call for companies, to talk about your requirements, and how the Felgo SDK & Services can help you. Just sign up and schedule your call.
Sign up now to start your free Business evaluation: