[Liam]

Okay so I’m sure it is a dumb question but there doesn’t seem to be many snippets out there for v-play coding projects, that’s usually how i find my answer.

I’m creating a list and i want the person using the app to be able to select one of the list components and then it will return them to the main page, and set a variable. I’m having trouble with working out how to tell what list component i am clicking and what value is set there for example towns.

[AlexFelgo Team]

Hi Liam,

there are countless ways of communicating between QML items. Pages on a NavigationStack are loaded lazy at runtime, thus we need a more “indirect” way of sending data between them. Here is a small example that uses a signal that both can access:

import Felgo 3.0
import QtQuick 2.0

App {
  id: app
  
  // Global signal that all pages can access
  // You could also use some management item here that, all pages communicate with
  signal entryClicked(var i, var str)
  
  NavigationStack {
    Page {
      id: mainPage
      title: "Main Page"
      
      // Button to open the ListPage and display the selected entry later
      AppButton {
        id: someButton
        anchors.centerIn: parent
        text: "Open List Page"
        onClicked: {
          mainPage.navigationStack.push(listPageComponent)
        }
      }
      
      // Listen to the global signal if an entry was clicked on another page
      Connections {
        target: app
        onEntryClicked: {
          // We set the button text with the data from the ListPage
          someButton.text = "Entry clicked at index " + i + " with string " + str
        }
      }
      
    } // Page
  } // NavigationStack
  
  Component {
    id: listPageComponent
    ListPage {
      id: listPage
      model: ["Entry1","Entry2","Entry3"]
      delegate: SimpleRow {
        text: modelData
        // If an item in the list is clicked, we call the global signal with the data we have
        onSelected: {
          app.entryClicked(index, modelData)
          listPage.navigationStack.pop()
        }
      }
    }
  }
} // App

In general, the easiest way is to communicate through a common parent of both. The App item is the topmost parent, so everyone can access it, which makes it the easiest choice. Direct children of the App are also accessible from anywhere in the app, so you could also make some kind of management item, like this:

App {
  Item {
    id: dataManager
    property int selectedEntryIndex
    property string selectedEntryText
    function someFunction() {
      // ...
    }
  }
}

Then you can use dataManager.selectedEntryIndex from anywhere in your app. It would be more readable to create an own QML file for it of course, else the main QML file becomes super bloated.

I hope you get the idea, does this help you?

Cheers,
Alex

 

[Liam]

yes thank you very much for explaining this