Forums

OverviewFelgo 2 Support (Qt 5) › ListPage Selecting item

Tagged: , ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #19601

    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.

    #19602

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

     

    #19604

    Liam

    yes thank you very much for explaining this

     

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