[Vi]

I’m learning QML and Felgo. When reading this http://felgo.com/doc/apps-supporting-multiple-screens-and-screen-densities/:

import Felgo 3.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 7 years, 10 months ago by  mrviit@gmail.com. Reason: format
• This topic was modified 7 years, 10 months ago by  mrviit@gmail.com.
• This topic was modified 7 years, 10 months ago by  mrviit@gmail.com.

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

[Vi]

Yes,  I see. Thank you very much!

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

• This reply was modified 7 years, 10 months ago by  mrviit@gmail.com.