时间戳

首页 > 解决方案 > 活动选项卡未使用 BottomNavigationBar 突出显示（打开然后关闭）

dart - 活动选项卡未使用 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 在每个活动页面上正确激活？

PS对不起，如果这是一个令人困惑的问题。很高兴根据要求制作一个正在发生的事情的 gif。

标签： dartflutter

解决方案

在您发布的示例代码中，每个页面都会获得一个新的 BottomNavigationBar。因此，当您导航到它时，它将始终从初始状态开始。为避免此问题，您应该对页面进行结构化，以便它们共享一个底部导航栏，而不是使用路由器。您还需要从每个页面中删除 Scaffold 和导航栏。

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( /* ... */),
    );
  }
}

有关如何构建底部导航栏的更多想法，请查看颤振画廊中的示例代码。

推荐阅读