如何在Navigator中使用BottomNavigationBar？ [英] How to use BottomNavigationBar with Navigator?

问题描述

BottomNavigationBar 的Flutter Gallery示例使用 FadeTransitions Stack 脚手架中的$ c>。

The Flutter Gallery example of BottomNavigationBar uses a Stack of FadeTransitions in the body of the Scaffold.

我觉得它会更干净（更容易制作动画）如果我们可以使用 Navigator 来切换页面。

I feel it would be cleaner (and easier to animate) if we could switch pages by using a Navigator.

有没有这样的例子？

推荐答案

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"),
        ),
      ],
    ),
  );
}

您应将每个页面保留在 Stack 保持其状态。
后台停止绘画， TickerMode 停止动画。
MaterialApp 包括 Navigator 。

You should keep each page by Stack to keep their state. Offstage stops painting, TickerMode stops animation. MaterialApp includes Navigator.

这篇关于如何在Navigator中使用BottomNavigationBar？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！