• Home
• Felgo
• StackViewDelegate

StackViewDelegate

A delegate used by NavigationStack for loading transitions. More...

• List of all members, including inherited members

Properties

• enterItem : Item
• exitItem : Item
• popEnter : Transition
• popExit : Transition
• pushEnter : Transition
• pushExit : Transition

Detailed Description

This type defines the page transitions for NavigationStack. Use it with the NavigationStack::transitionDelegate property.

Use the properties pushEnter and pushExit to define the transitions for pushing pages.

Use the properties popEnter and popExit to define the transitions for popping pages.

During transition, you can use the properties enterItem and exitItem. They contain the currently entering and exiting AppPage items.

Example of a custom StackViewDelegate:

 import Felgo
 import QtQuick
 import QtQuick.Controls

 App {

   // NavigationStack
   NavigationStack {
     initialPage: pageComponent

     // custom transition delegate
     transitionDelegate: StackViewDelegate {
       id: delegate

       property int duration: 300

       pushEnter: Transition {
         NumberAnimation {
           property: "opacity"
           from: 0
           to: 1
           duration: delegate.duration
         }
       }

       pushExit: Transition {
         NumberAnimation {
           property: "xOffset"
           from: 0
           to: -delegate.exitItem.width
           duration: delegate.duration
         }
       }

       popEnter: Transition {
         NumberAnimation {
           property: "xOffset"
           from: -delegate.exitItem.width
           to: 0
           duration: delegate.duration
         }
       }

       popExit: Transition {
         NumberAnimation {
           property: "opacity"
           from: 1
           to: 0
           duration: delegate.duration
         }
       }
     }
   }

   // Component for pages
   Component {
     id: pageComponent
     AppPage {
       id: page
       title: "Page 1"

       Rectangle {
         anchors.centerIn: parent
         color: Qt.rgba(Math.random(255), Math.random(255), Math.random(255))
         width: parent.width / 2
         height: parent.height / 2
       }

       AppButton {
         anchors.horizontalCenter: parent.horizontalCenter
         text: "Push"
         onClicked: {
           var properties = { title: "Page " + (page.navigationStack.depth + 1) }
           page.navigationStack.push(pageComponent, properties)
         }
       }
     } // Page
   } // Component
 }

Property Documentation