Forums

OverviewV-Play 2 Support (Qt 5) › GridView items to open new qml page?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #17258

    Edward

    Hey guys,

     

    I have a grid view built off a list model, how would I go about linking each delegate to it’s own individual page?

    I have over 200 pages, see below a sample of my code! what would I add to make them clickable to new pages? each page has a custom icon set as you can also see!

    Thanks :)

    import VPlayApps 1.0
    import QtQuick 2.0
    import QtQuick 2.7
    
    
    
    ListPage {
    
        GridView {
            id: gridView
            anchors.rightMargin: -50
            anchors.leftMargin: 80
            anchors.topMargin: 15
            anchors.fill: parent
            contentHeight: 450
            cellWidth: 120
            cellHeight: 150
    
        model: ListModel {
    
            ListElement {
                name: "name1"
                type1: "section1"
                icon: "../assets/Sprites/001.png"
            }
            ListElement {
                name: "name2"
                type1: "section1"
                icon: "../assets/Sprites/002.png"
            }
            ListElement {
                name: "name3"
                type1: "section1"
                icon: "../assets/Sprites/003.png"
            }
            ListElement {
                name: "name4"
                type1: "section1"
                icon: "../assets/Sprites/004.png"
            }
            ListElement {
                name: "name5"
                type1: "section1"
                icon: "../assets/Sprites/005.png"
            }
            ListElement {
                name: "name6"
                type1: "section1"
                icon: "../assets/Sprites/006.png"
            }

     

     

     

     delegate: Item {
            Text { text: name; color: "black"; anchors.horizontalCenter: parent.horizontalCenter }
            Image {
                id: myIcon
                y: 20; anchors.horizontalCenter: parent.horizontalCenter
                source: icon
                }
            }
        }
    }

     

    #17259

    Günther
    V-Play Team

    Hi,

    you can extend your list model to include the target page you want to load when the delegate is clicked.

    For example like this:

    ListPage {
          title: "List"
          model: ListModel {
    
            ListElement {
              name: "name1"
              type1: "section1"
              icon: "../assets/Sprites/001.png"
              page: "Page1.qml"
            }
            ListElement {
              name: "name2"
              type1: "section1"
              icon: "../assets/Sprites/002.png"
              page: "Page2.qml"
            }
          }
          delegate: SimpleRow {
            text: name
            onSelected: navigationStack.push(Qt.resolvedUrl(page))
          }
        }

    Best,
    Günther

    #17265

    Edward

    That works in list form,

    I want my data displayed in grid view with the sprite as the main viewing component rather than the title?

    when I incorporate this into my current gridview code (above post) it doesn’t work,

     

    if I apply grid view to the simple row it removes the image and has loading issues,

    if I try to make the delegate item of my current view selectable it doesn’t work,

    I would like to maintain a grid of sprites, which open their respective pages via clicking?

     

    Thanks,

    Edward

     

     

     

     

    #17274

    Günther
    V-Play Team

    Hi Edward,

    it does not matter whether you user the mode-delegate approach with a ListView or a Grid.
    Note: If you are using a Grid, you can also use a simple Page { } instead of ListPage { } as base for your view.

    I simply used a ListPage with SimpleRow as this is the shortest possible example to show how to open different pages based on your model. The approach is the same when using a Grid:

    • Add the path to the page QML item you want to load to your model
    • Add the code to open the page of the model to your delegate
    • If you are not using SimpleRow, which can handle clicks automatically with onSelected, just add a MouseArea { } to your delegate, which you can use to capture clicks
    delegate: Item {
            Text { text: name; color: "black"; anchors.horizontalCenter: parent.horizontalCenter }
            Image {
                id: myIcon
                y: 20; anchors.horizontalCenter: parent.horizontalCenter
                source: icon
              }
             MouseArea {
                anchors.fill: parent
                onClicked: navigationStack.push(Qt.resolvedUrl(page))
              }
           }

    Please note that your page must exist within a NavigationStack, as otherwise it is not possible to push new pages.

     

    Best,
    Günther

    #17303

    Edward

    Really sorry I’m a bit of a novice!

    what page needs to be part of the stack? the page I’m on which has the grid, or the page I want to open?

    When I add the mouse area to my grid like you said above with the .push function, then add the page path to my element and run the app it all displays how I want it too but doesn’t respond to my click?

     

    what code would I implement to do this exactly?

    really sorry!!

     

     

     

    #17305

    Günther
    V-Play Team

    Hi Edward!

    For learning about V-Play, you can have a look at our examples and demos, as well as some tutorials.

    The NavigationStack allows to navigate back and forth between multiple pages. When putting a page inside the NavigationStack, this page will be the first visible page. Other pages can then be pushed on the NavigationStack, which then automatically supports going back to the previous page.

     

    This is how a fixed version could look like:

    import VPlayApps 1.0
    import QtQuick 2.0
    import QtQuick 2.7
    
    App {
      NavigationStack {
        id: navigationStack
    
        Page {
          title: "Grid"
          
          GridView {
            id: gridView
            anchors.rightMargin: -50
            anchors.leftMargin: 80
            anchors.topMargin: 15
            anchors.fill: parent
            contentHeight: 450
            cellWidth: 120
            cellHeight: 150
            
            model: ListModel {
              
              ListElement {
                name: "name1"
                type1: "section1"
                icon: "../assets/Sprites/001.png"
                page: "Page1.qml"
              }
              ListElement {
                name: "name2"
                type1: "section1"
                icon: "../assets/Sprites/002.png"
                page: "Page2.qml"
              }
              // ...
            }
            
            delegate: Item {
              // your item can not be clickable if it has zero width and height
              width: gridView.cellWidth
              height: gridView.cellHeight
              Text { text: name; color: "black"; anchors.centerIn: parent }
              Image {
                id: myIcon
                y: 20; anchors.centerIn: parent
                source: icon
              }
              
              MouseArea {
                anchors.fill: parent 
                onClicked: navigationStack.push(Qt.resolvedUrl(page))
              }
            }
          }
        }
      }
    }
    

     

    Best,
    Günther

    #17979

    Edward

    Many Thanks for all the help with this topic. it functions as intended –

    I thought I would reply instead of setting up a new thread as this is related –

     

    how would I set the icons to only display say 3 or 4 per row, and size them on the screen resolution?

     

    Thanks

     

    #18039

    Günther
    V-Play Team

    Hi Edward,

    there a different ways to create your layouts with QML. E.g. instead of a GridView, you can also have a look at the Grid type, offers a more static approach where you can set e.g. number of columns. As V-Play is based on Qt, it is generally a good idea to also have a look the available QML Components by Qt (for everything that is not covered in our online documentation).

    If you want to add items to the Grid based on a model, you can take advantage of the Repeater type. It dynamically creates instances of the specified items from your model.

    Best,
    Günther

    #18548

    Edward

    Using a Grid type would allow me to do this but how would I translate my delegate items to this without having to retype 300+ list elements from scratch as each delegate has it’s own icon, page and title.

     

    is there a way a could translate the GridView into the Grid type?

    Thanks

    #18561

    Günther
    V-Play Team

    To dynamically create Items based on a custom model and a delegate, you can have a look at the Repeater type.

    Best,
    Günther

Viewing 10 posts - 1 through 10 (of 10 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