如何在路由之间运行隐式动画?

问题描述 投票:0回答:0

在我的应用程序中有多个页面/路由。每个实现页面的小部件在构建方法的根部都有一个脚手架(这在 Flutter 中是习惯的)。
在某些路线上,我想隐藏或更改 UI 的某些部分 - 例如,

AppBar
中的前导图标是一个
AnimatedIcon
,它在“打开抽屉”汉堡包和后退箭头之间变化。 在某些路线上,我想为
NavigationBar
设置动画,在某些路线上没有 FAB,或者在
AppBar
中有不同的操作可用。

这些每个元素的转换大部分是通过

AnimatedSwitcher
s 实现的,因此例如在每个页面上都有一个
AnimatedSwitcher
用于
bottomNavigationBar
Scaffold
参数,但只有一些
child
的switcher 是
NavigationBar
,对于其他人来说它只是
null
,只要 Flutter 知道两个
AnimatedSwitcher
是相同的,就会产生动画。

现在的问题是——我该如何正确实施呢? Flutter 需要以某种方式意识到不同页面之间存在连续性,否则它不会运行过渡动画,而是只会在布局之间硬切。

我已经尝试(我认为这仍然是最有前途的方法)给每个脚手架相同的键,然后包装大部分东西,如

NavigationBar
AppBar
中的动作图标
AnimatedSwitcher 
s.

Router
|_ Route
  |_ Scaffold
    |_ key: myGlobalKey
    |_ appBar: AnimatedSwitcher
      |_ actions:
        |_ AnimatedSwitcher
          |_ Icons
    |_ bottomNavigationBar: AnimatedSwitcher
      |_ BottomNavigationBar
|_ Route
  |_ Scaffold
    |_ key: myGlobalKey
    |_ appBar: AnimatedSwitcher
      |_ actions:
        |_ AnimatedSwitcher
          |_ null
    |_ bottomNavigationBar: AnimatedSwitcher
      |_ null

这通常有效(动画流畅地继续/开始和停止),但如果场景中有 2 个脚手架,它就会崩溃,这可能发生在某些转换中(尽管我正在使用

go_router
s
NoTransitionPage
),尤其是在使用时
IndexedStack
NavigationBar
.
作为缓解措施,我尝试在 Riverpod 提供商上观看,观察 Navigators 当前路线,然后这样切换密钥
key: isCurrentRoute ? scaffoldKey : null
——但这仍然导致重复的密钥。

我尝试的另一种方法是将

Scaffold
从页面中提取出来(这样每个页面都是内容),然后,从页面内部我将向提供者写入所需的 Scaffold 以及上面的所有道具(但关键)然后将应用于该顶层
Scaffold
.
不幸的是,这也不成功,最后看起来好像我什么也没做:每个页面都没有任何过渡运行,因为 Flutter 将所有内容都视为新的/丢弃所有状态。

这两种方法都可能仍然有效,而我只是没有正确地做到这一点——如果是这样,请指出,我只是想让它起作用。

flutter dart material-design riverpod
© www.soinside.com 2019 - 2024. All rights reserved.