[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 Felgo 3.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
            }
        }
    }
}

 

[GüntherFelgo 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

[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

 

 

 

 

[GüntherFelgo 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

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

 

 

 

[GüntherFelgo Team]

Hi Edward!

For learning about Felgo, 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 Felgo 3.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

[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

 

[GüntherFelgo 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 Felgo 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

[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

[GüntherFelgo 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