QML - 改变页面之间的过渡方式答案

【问题标题】：QML - change how transition between pages looksQML - 改变页面之间的过渡方式
【发布时间】：2021-11-17 10:55:37
【问题描述】：

我知道这可能是超级基础，但我是学习 QML 的新手，并且对页面之间的转换有疑问。在这个例子中，我有一个按钮，我想用它在我的 3 个页面之间切换。过渡有效，但页面总是从窗口的右侧移动到左侧。我怎样才能改变这个？我需要新页面立即作为一个整体出现。（例如，当从 firstPage 更改为 secondPage 时，对于用户来说，看起来只有 AppText 发生了变化，因为在两种情况下按钮都位于相同的位置）

代码示例：

App {
    id: app
    width: px(250); height: px(250)

    NavigationStack {
        Page {
            id: page
            navigationBarHidden: true
            AppText { text: "startpage" }
            SimpleButton{
                x: 220; y: 0
                onClicked: page.navigationStack.push(firstPage)
            }
        }
    }

    Component {
        id: firstPage
        Page {
          navigationBarHidden: true
          AppText { text: qsTr("1st page") }
          SimpleButton{
              x: 220; y: 0
              onClicked: page.navigationStack.push(secondPage)
          }

        }
    }

    Component {
        id: secondPage
        Page {
          navigationBarHidden: true
          AppText { text: qsTr("2nd page") }
          SimpleButton{
              x: 220; y: 0
              onClicked: page.navigationStack.push(page)
          }
        }
    }
}

任何帮助将不胜感激！

【问题讨论】：

标签： qml embedded push transition qqmlcomponent

【解决方案1】：

看起来您正在使用 Felgo，我认为它是 Qt 之上的一个额外库。例如，没有名为 NavigationStack 的内置 QML 组件。那来自费尔戈。您应该在问题中提及这一点以获得更好的帮助。

我自己从未使用过Felgo，但只是快速查看documentation，看来您需要根据需要定义一个新的transitionDelegate。这是他们给出的新页面淡入/淡出的示例。

   NavigationStack {
     // custom transition delegate
     transitionDelegate: StackViewDelegate {

       pushTransition: StackViewTransition {
         NumberAnimation {
           target: enterItem
           property: "opacity"
           from: 0
           to: 1
           duration: 1000
         }
       }

       popTransition: StackViewTransition {
         NumberAnimation {
           target: exitItem
           property: "opacity"
           from: 1
           to: 0
           duration: 1000
         }
       }
     }

     initialPage: pageComponent
   }

【讨论】：