Home Articles

使用BottomNavigationBar不会突出显示活动标签(翻转然后退回)

Asked
Viewed 1901 times
0

我正在构建一个带有几个不同文件的颤振应用程序,因此我可以根据需要将它们拼凑在一起 . 其中一个单独的文件构建了一个BottomNavigationBar . 其他文件构建了BottomNavigationBar将链接到的单独页面 . 导航工作正常,但每次我更改屏幕时,BottomNavigationBar的颜色(应该突出显示当前处于活动状态的屏幕)都会回溯到第一个选项卡 . 我确定这样做的原因是,当我点击BottomNavigationBar时,它会适当地将我引导到下一个视图(实际上我看到旧视图上的新选项卡在转到下一个视图之前突出显示)然后一次在新页面,BottomNavigationBar再次被调用,我 Build 它从它的起点(第一个标签)开始,直到另行通知 . 以下是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 .

1 Answer

  • 2

    在您发布的示例代码中,每个页面都会获得一个新的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中的示例代码 .

Related