Question

我正在用几个不同的文件构建一个flutter应用程序，因此我可以根据需要将它们组合在一起。单独的文件之一构建了一个BottomNavigationBar。其他文件将构建BottomNavigationBar链接到的单独页面。导航工作正常，但是每次更改屏幕时，BottomNavigationBar的颜色（应该突出显示当前处于活动状态的屏幕）都会重新回到第一个选项卡。我确信这是因为，当我单击BottomNavigationBar时，它会适当地将我路由到下一个视图（实际上，在转到下一个视图之前，我在旧视图上看到突出显示的新选项卡），然后在在新页面上，再次调用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在每个活动页面上正确激活？

P.S。抱歉，这是一个令人困惑的问题。很高兴根据要求将所发生的事情记为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中的示例代码。

活动选项卡不会通过BottomNavigationBar突出显示（翻转然后退回）

1 个答案: