Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business


OverviewFelgo 3 Support (Qt 5) › Auto size grid cells on resolution

Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #18723


    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?



    Felgo Team


    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!




    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 {
        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))



    Felgo 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.




Viewing 4 posts - 1 through 4 (of 4 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded