有没有办法将BottomAppBar从Flutter中的动画中排除

Question

我试图将其封装在Hero小部件中，因为这应该可以实现我想要的。这适用于BottomNavigationBar，但不适用于BotomAppBar，这会导致以下错误：Scaffold.geometryOf() called with a context that does not contain a Scaffold.我试图使用Builder为其提供上下文，但也不起作用。以下是一个展示行为的示例应用程序：

void main() {
runApp(
MaterialApp(
home: PageOne(),
),
);
}
Widget _bottomNavigationBar() {
return BottomNavigationBar(items: [
BottomNavigationBarItem(icon: Icon(Icons.menu), title: Text('menu')),
BottomNavigationBarItem(icon: Icon(Icons.arrow_back), title: Text('back')),
]);
}
Widget _bottomAppBar() {
return BottomAppBar(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(icon: Icon(Icons.menu), onPressed: null),
IconButton(icon: Icon(Icons.arrow_back), onPressed: null),
],
),
);
}
class PageOne extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: Hero(
tag: 'bottomNavigationBar',
child: _bottomAppBar(),
),
body: Center(
child: IconButton(
iconSize: 200,
icon: Icon(Icons.looks_two),
onPressed: () => Navigator.push(
context,
MaterialPageRoute(builder: (context) => PageTwo()),
),
),
),
);
}
}
class PageTwo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: Hero(
tag: 'bottomNavigationBar',
child: _bottomAppBar(),
),
body: Center(
child: IconButton(
iconSize: 200,
icon: Icon(Icons.looks_one),
onPressed: () => Navigator.pop(context),
),
),
);
}
}

Answer 1

问题似乎是导航堆栈中使用的动画。因此，在页面加载过程中去掉动画将停止此动画。在您的示例中，我将PageRouteBuilder添加到PageOne类中，以消除导航堆栈动画。使用下面的代码替换示例中的PageOne类。

class PageOne extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: _bottomAppBar(),
body: Center(
child: IconButton(
iconSize: 200,
icon: Icon(Icons.looks_two),
onPressed: () => Navigator.push(
context,
PageRouteBuilder(
pageBuilder: (context, anim1, anim2) => PageTwo(),
transitionsBuilder: (context, anim1, anim2, child) =>
Container(child: child),
),
),
),
),
);
}
}

这里有控制导航动画的其他方法(哦，我去掉了Hero((小部件(

Answer 2

我已经通过在BottomAppBar中用Hero小部件包装Row来解决这个问题。这仍然允许页面转换，并且不会按预期设置BottomAppBar的动画。

BottomAppBar(
child: Hero(
tag: 'bottomAppBar',
child: Material(
child: Row(
...
),
),
),
);

但是，当使用CircularNotchedRangular时，这会导致动画滞后。