dart - 事件选项卡未使用 BottomNavigationBar 保持突出显示(打开然后关闭)

Question

我正在构建一个包含多个不同文件的 flutter 应用程序，因此我可以根据需要将它们拼凑在一起。其中一个单独的文件构建了一个 BottomNavigationBar。其他文件构建了 BottomNavigationBar 将链接到的单独页面。导航工作正常，但每次我更改屏幕时，BottomNavigationBar 的颜色(应该突出显示当前事件的屏幕)都会快速回到第一个选项卡。我确定这是因为当我单击 BottomNavigationBar 时，它会适本地将我路由到下一个 View (事实上，在转到下一个 View 之前，我看到旧 View 上突出显示了新选项卡)然后一次新页面，BottomNavigationBar 再次被调用，我确定它从它的起始点(第一个选项卡)开始，直到另行通知。下面是 BottomNavigationBar 文件的代码:

import 'package:flutter/material.dart';
import 'profile.dart';
import 'search.dart';
import 'favorites.dart';
import 'featured.dart';

class NavBar extends StatefulWidget {
  @override
  NavBarState createState() => NavBarState();
}

 class NavBarState extends State<NavBar>{

 int currentTab = 0;

  FeaturedScreen one;
  SearchScreen two;
  FavoritesScreen three;
  ProfileScreen four;
  List<Widget> pages;
  Widget currentPage;

  @override
  void initState() {
    one = FeaturedScreen();
    two = SearchScreen();
    three = FavoritesScreen();
    four = ProfileScreen();

    pages = [one, two, three, four];

    super.initState();
  } 

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar( 
      type: BottomNavigationBarType.fixed,
      currentIndex: currentTab,
      fixedColor: new Color(0xffffffff).withOpacity(0.5), 
      onTap: (int index) {
        setState((){
          currentTab = index;
          currentPage = pages[index];
        });
        Navigator.push(
          context, 
          new MaterialPageRoute(builder: (context) => currentPage)
        );
      },
      items: <BottomNavigationBarItem>[ 
        BottomNavigationBarItem(
          icon: currentTab==0?Icon( 
            Icons.apps,
            color: Color(0xff70E0EF),
            size: 35.0,
           ):Icon(
            Icons.apps,
            color: Colors.black,
            size: 35.0,
          ),
          title: Text(
            'Collections',
            style: new TextStyle(
              color: Colors.white,
              fontSize: 0.0,
              height: 0.0,
            ),
          ), 
        ),
        BottomNavigationBarItem(
          icon: currentTab==1?Icon(
            Icons.search,
            color: Color(0xff70E0EF),
            size: 35.0,
          ):Icon(
            Icons.search,
            color: Colors.black,
            size: 35.0,
          ),
          title: Text(
            'Search',
            style: new TextStyle(
              color: Colors.white,
              fontSize: 0.0,
              height: 0.0,
            ),
          ),
        ),
        BottomNavigationBarItem(
          icon: currentTab==2?Icon(
            Icons.favorite,
            color: Color(0xff70E0EF),
            size: 35.0,
          ):Icon(
            Icons.favorite,
            color: Colors.black,
            size: 35.0,
          ),
          title: Text(
            'Favorites',
            style: new TextStyle(
              color: Colors.white,
              fontSize: 0.0,
              height: 0.0,
            ),
          ),
        ),
        BottomNavigationBarItem(
          icon: currentTab==3?Icon(
            Icons.person,
            color: Color(0xff70E0EF),
            size: 35.0,
          ):Icon(
            Icons.person,
            color: Colors.black,
            size: 35.0,
          ), 
          title: Text(
            'Profile',
            style: new TextStyle(
              color: Colors.white,
              fontSize: 0.0,
              height: 0.0,
            ),
          ),           
        ),
      ],
    );
  }
}

这四个项目中的每一个都会加载一个页面，目前看起来或多或少是这样的:

import 'package:flutter/material.dart';
import 'navbar.dart';

class FeaturedScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Featured(),
      bottomNavigationBar: NavBar(),
    );
  }
}

class Featured extends StatefulWidget {
  @override
  FeaturedState createState() => FeaturedState();
}

class FeaturedState extends State<Featured>{

  @override
  Widget build(BuildContext context) {
    return Scaffold( 
      body: new Stack(
        fit: StackFit.passthrough,
        children: [
          new Container(
            decoration: new BoxDecoration(
              image: new DecorationImage(
                image: new AssetImage('assets/FeaturedBG.png'),
                fit: BoxFit.cover
              ),
            ),
          ),
        ],
      ),
    );
  }
}

我怎样才能让 BottomNavigationBar 在每个事件页面正确激活？

附言抱歉，如果这是一个令人困惑的问题。很高兴根据要求制作正在发生的事情的 gif。

Answer 1

在您发布的示例代码中，每个页面都有一个新的 BottomNavigationBar。所以当你导航到它时，它总是从初始状态开始。为了避免这个问题，您应该构建您的页面，以便它们共享一个底部导航栏，而不是使用路由器。您还需要从每个页面中删除脚手架和导航栏。

class MyScreens extends StatefulWidget {
  @override
  MyScreensState createState() => new MyScreensState();
}

class MyScreensState extends State<MyScreens> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: _pages[currentTab], // <- change the widget here
      navBar: new BottomNavigationBar( /* ... */),
    );
  }
}

有关如何构造底部导航栏的更多想法，请查看 flutter gallery 中的示例代码.