提问者:小点点

如何使用BottomNavigationBar和Navigator?


BottomNavigationBar的Flutter Gallery示例在scaffold主体中使用FadeTransitions堆栈

我觉得如果我们可以通过使用导航器来切换页面,它会更干净(也更容易动画化)。

有这方面的例子吗?


共1个答案

匿名用户

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