Forums

OverviewV-Play 2 Support (Qt 5) › Auto size grid cells on resolution

Tagged: ,

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

    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

    #18751

    Alex
    V-Play Team

    Hi,

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

    import VPlayApps 1.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

    #19077

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

     

    #19082

    Günther
    V-Play 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

     

     

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

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support