在我的应用程序中有多个页面/路由。每个实现页面的小部件在构建方法的根部都有一个脚手架(这在 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
.key: isCurrentRoute ? scaffoldKey : null
——但这仍然导致重复的密钥。
我尝试的另一种方法是将
Scaffold
从页面中提取出来(这样每个页面都是内容),然后,从页面内部我将向提供者写入所需的 Scaffold 以及上面的所有道具(但关键)然后将应用于该顶层Scaffold
.这两种方法都可能仍然有效,而我只是没有正确地做到这一点——如果是这样,请指出,我只是想让它起作用。