Forums

OverviewV-Play 2 Support (Qt 5) › Help me understand some line of codes

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

    Vi

    I’m learning QML and V-Play. When reading this http://v-play.net/doc/apps-supporting-multiple-screens-and-screen-densities/:

    import VPlayApps 1.0
    import QtQuick 2.0
    
    App {
      // we can easily change default sizes with the theme class
      onInitTheme: {
        Theme.listItem.spacing = 20 // 20 dp spacing top and bottom for list items (density independent)
      }
    
      Navigation {
        // first navigation item, available through tabs or navigation drawer
        NavigationItem {
          title: "Main Page"
          icon: IconType.home
    
          NavigationStack {
            splitView: false // page shall fill the screen on all devices
    
            Page {
              title: "Main Page"
              Image {
                source: "../assets/vplay-logo.png"
                anchors.centerIn: parent
                width: dp(160) // set fixed image width with dp feature
                fillMode: Image.PreserveAspectFit // keep aspect ratio
              }
            }
          }
        }
    
        // second navigation item (list page)
        NavigationItem {
          title: "List Page"
          icon: IconType.list
    
          NavigationStack {
            splitView: tablet // on tablets, we split the view in a main and detail-page (this is the default setting)
    
            // list page automatically uses density independent list items, this page is shown in the main view on tablets
            ListPage {
              title: "List Page"
              model: [{ text: "Item #1" },
                { text: "Item #2" },
                { text: "Item #3" },
                { text: "Item #4" },
                { text: "Item #5" }]
              onItemSelected: navigationStack.popAllExceptFirstAndPush(detailPageComponent, { title: "Detail of #" + (index + 1) })
            }
          }
        }
      }
    
      // page that will be displayed in the detail view when a list item is clicked
      Component {
        id: detailPageComponent
        Page {
          AppText {
            text: title
            font.pixelSize: sp(20) // use sp for text (density independent)
            anchors.centerIn: parent
          }
        }
      }
    }

    I don’t understand why popAllExceptFirstAndPush’s argument: options (is any JS object used as properties for the created object, if source is an url or a Component)
    How can we know that we must use { title: “Detail of #” + (index + 1) } or { titlexyz_or_any_name_here: “Detail of #” + (index + 1) }.
    I changed the title to others name but the code worked wrong.

    The same question for next code (how can I know that we must use the name “title” here?):

    Component {
        id: detailPageComponent
        Page {
          AppText {
            text: title
            font.pixelSize: sp(20) // use sp for text (density independent)
            anchors.centerIn: parent
          }
        }
      }

    Thanks!

    • This topic was modified 2 years, 1 month ago. Reason: format
    • This topic was modified 2 years, 1 month ago.
    • This topic was modified 2 years, 1 month ago.
    #13601

    Günther
    V-Play Team

    Hi Vi!

    The QML Component type allows to define Items that you want to dynamically create and use at some later point during execution of your application.
    In this example, the detail-page is defined as a component. The popAllExceptFirstAndPush function then allows to specify additional values for initializing the page when it is created.

    In the example, the Page::title property is chosen dynamically whenever the detail-page is opened. All properties that the Page type offers are possible to set this way. If you extend the Page with custom properties they are also available.

    Best,
    Günther

    #13602

    Vi

    Yes,  I see. Thank you very much!

    And this Page type is a different from QML Page type.

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