[Edward]

I would then to height: width to make the items square as they should be,

I have been looking online and seen things such as width: parent.width/4 but this is not working for me? how would I do this?

Thanks

[AlexFelgo Team]

Hi,

this would be an example for square grid cells in an app:

import Felgo 3.0
import QtQuick 2.0

App {

  NavigationStack {
  
    Page {
      title: "Square Grid"
      
      Grid {
        id: 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
        width: parent.width
        columns: 2
        
        Repeater {
          // 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
          Rectangle {
            border.width: px(1)
            border.color: Theme.colors.tintColor
            // 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
            height: width
            
            Icon {
              // the modelData is the current element of the model, so IconType.heart for the first element and so on
              icon: modelData
              // the icon is centered in the rectangle
              anchors.centerIn: parent
              color: Theme.colors.tintColor
              size: sp(40)
            }
          }  
        }
      }
    }
  }
}

I hope my comments are clear, if not, just ask!

Cheers,
Alex

[Edward]

Hi Alex!

Sorry it’s taken so long to respond!

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!!!

 

Thanks a million, Edward.

Page {
id:page
    GridView {
        id: gridView
        anchors.horizontalCenter: parent.horizontalCenter
        width: parent.width
        height: 450
        anchors.top: slideshow.bottom
        anchors.topMargin: dp(10)
        cellWidth: page.width / 2
        cellHeight: cellWidth

        model: ListModel {
            ListElement {
                name: "Browse/Shop"
                icon: "../assets/Icons/Basket.png"
                page: "Pages/Store.qml"
            }
            ListElement {
                name: "News&Offers"
                icon: "../assets/Icons/News.png"
                page: "Pages/NewsOffers.qml"
            }
            ListElement {
                name: "Live Chat"
                icon: "../assets/Icons/Group.png"
                page: "Pages/LiveChat.qml"
            }
            ListElement {
                name: "Help"
                icon: "../assets/Icons/Help.png"
                page: "Pages/Help.qml"
            }
        }

        delegate: Item {
            width: gridView.cellWidth
            height: gridView.cellHeight
            scale: 0.8
            Rectangle {
                anchors.fill: parent
                radius: dp(12)
                border.color: "black"
                border.width: dp(3)

                Text { text: name; fontSizeMode: Text.Fit; font.family: Theme.normalFont.name; font.pixelSize: 24; color: "black"; anchors.horizontalCenter: parent.horizontalCenter;anchors.top: parent.top; anchors.topMargin: dp(5)}
                Image {
                    id: myIcon
                    anchors.fill: parent
                    scale: 0.4
                    y: 20; anchors.horizontalCenter: parent.horizontalCenter
                    source: icon
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: navigationStack.push(Qt.resolvedUrl(page))
                }
            }
        }
    }
}

 

[GüntherFelgo Team]

Hi Edward,

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.

Best,
Günther