如何修改QML中NavigationStack页面跳转的默认过渡动画效果

你当前使用的是Felgo框架的NavigationStack组件，默认自带页面滑入过渡动画，可通过以下两种方式实现无动画跳转效果：

方案1：全局禁用所有页面跳转动画 #

直接给NavigationStack组件设置pushTransition和popTransition属性为null即可，所有页面切换都会直接显示无过渡：

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

    NavigationStack {
        // 新增这两行禁用过渡动画
        pushTransition: null
        popTransition: null
        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)
          }
        }
    }
}

方案2：仅指定单次跳转无动画 #

如果不需要全局禁用，只想部分跳转无动画，可以在调用push方法时传入第三个参数指定过渡动画为null：

// 跳转时写法示例
onClicked: page.navigationStack.push(firstPage, {}, null)

注意：如果你使用的是Qt原生StackView而非Felgo的NavigationStack，对应需要将pushEnter、pushExit、popEnter、popExit四个过渡属性设置为空动画即可实现同等效果。

内容的提问来源于stack exchange，提问作者learningToCode