BottomNavigationBar
的Flutter Gallery示例在scaffold
主体中使用FadeTransitions
的堆栈
。
我觉得如果我们可以通过使用导航器
来切换页面,它会更干净(也更容易动画化)。
有这方面的例子吗?
int index = 0;
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Stack(
children: <Widget>[
new Offstage(
offstage: index != 0,
child: new TickerMode(
enabled: index == 0,
child: new MaterialApp(home: new YourLeftPage()),
),
),
new Offstage(
offstage: index != 1,
child: new TickerMode(
enabled: index == 1,
child: new MaterialApp(home: new YourRightPage()),
),
),
],
),
bottomNavigationBar: new BottomNavigationBar(
currentIndex: index,
onTap: (int index) { setState((){ this.index = index; }); },
items: <BottomNavigationBarItem>[
new BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text("Left"),
),
new BottomNavigationBarItem(
icon: new Icon(Icons.search),
title: new Text("Right"),
),
],
),
);
}
您应该按堆栈
保存每一页,以保持它们的状态。后台
停止绘画,tickermode
停止动画。MaterialApp
包括Navigator
。