Flutter：根据BottomNavigationBar 的选定索引，坚持BottomNavigationBar 并路由用户到正确的屏幕

如何解决Flutter：根据BottomNavigationBar 的选定索引，坚持BottomNavigationBar 并路由用户到正确的屏幕

我希望BottomNavigationBar 保持不变，并且根据用户选择的索引和BottomNavigationBar 上突出显示的索引将用户发送到不同的屏幕。

我尝试这样做的方法是根据 Parent 的当前选定索引更改 Child 的正文值。选择 Scaffold 后，我可以突出显示它的选定索引，但正文未路由到适当的小部件。

BottomNavigationBar() 中为 BottomNavigationBar() 引用的当前方法正确突出显示所选索引，但没有路由到正确的小部件。

我的 onTap: 中有一个未使用的方法 (BottomNavBar)。将其作为 _switchScreen 的值插入 BottomNavBar 适当地路由到正确的屏幕，但随后我必须在每个视图上重建 onTap: 并且在 BottomNavBar() 后面无法访问在 BottomNavBar（导航模型）中引用。

这是我的BottomNavBar：

NavModel

这是BottomNavBar()：

import 'package:Flutter/material.dart';

import '../screens/Add_Media_Screen.dart';
import '../screens/Profile_Screen.dart';
import '../screens/Venture_Feed_Screen.dart';
   
class BottomNavBar extends StatefulWidget {
  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  int _selectedindex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedindex = index;
    });
  }

  void _switchScreen(index) {
    switch (index) {
      case 0:
        Navigator.pushNamed(context,VentureFeedScreen.routeName);
        break;
      case 1:
        Navigator.pushNamed(context,ProfileScreen.routeName);
        break;
      case 2:
        Navigator.pushNamed(context,AddMediaScreen.routeName);
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(
        primaryColor: Color(0xff84d1da),accentColor: Color(0xff62c2a2),),child: BottomNavigationBar(
        selectedItemColor: Color(0xff84d1da),unselectedItemColor: Colors.grey,type: BottomNavigationBarType.fixed,items: const <BottomNavigationBarItem>[
          //Index 0
          BottomNavigationBarItem(
            icon: Icon(
              Icons.explore,label: 'discover',//Index 1
          BottomNavigationBarItem(
            icon: Icon(
              Icons.account_circle,// color: Color(0xff84d1da),label: 'Profile',// backgroundColor: Color(0xff84d1da),//Index 2
          BottomNavigationBarItem(
            icon: Icon(
              Icons.add_circle_outline,label: 'Add Media',],currentIndex: _selectedindex,onTap: _onItemTapped,);
  }
}

解决方法

我认为您要完成的是 PageView 类的行为，对吗？使 PageView 成为脚手架的主体，并将 tabs 作为子项传递给 PageView。

,

在这种情况下，将其拆分为两个不同的类是行不通的。在 NavModel() 的 body: 属性的 Scaffold 类中，我试图根据 tabs 更新 _currentIndex 列表的值，该 BottomNavBar()静态索引值为 0。我认为通过调用 onTap: 类并将 _onItemTapped 值设置为根据 body: 方法更新它会更新 _onItemTapped 值根据 BottomNavBar 类中的 body: tabs[_currentIndex] 方法中定义的内容。这是不正确的。

代码按照我的定义正确运行：Scaffold 的 Scaffold 正在调用正确的逻辑 - 在选项卡列表的 0 索引处显示该项目。在发生这种情况时，BottomNavBar 的索引正在更新以反映正确的用户选择的索引和值，从而导致混淆为什么 BottomNavBar 选择的索引正在更新而 class BottomNavBar extends StatefulWidget { static const routeName = '/navigator-model'; @override _BottomNavBarState createState() => _BottomNavBarState(); } class _BottomNavBarState extends State<BottomNavBar> { int _selectedIndex = 0; void _onItemTapped(int index) { setState(() { _selectedIndex = index; }); } final List<Widget> tabs = [ VentureFeedScreen(),ProfileScreen(),AddMediaScreen(),]; @override Widget build(BuildContext context) { return Scaffold( body: tabs.elementAt(_selectedIndex),bottomNavigationBar: BottomNavigationBar( selectedItemColor: Color(0xff84d1da),unselectedItemColor: Colors.grey,type: BottomNavigationBarType.fixed,items: const <BottomNavigationBarItem>[ //Index 0 BottomNavigationBarItem( icon: Icon( Icons.explore,),label: 'Discover',//Index 1 BottomNavigationBarItem( icon: Icon( Icons.account_circle,// color: Color(0xff84d1da),label: 'Profile',// backgroundColor: Color(0xff84d1da),//Index 2 BottomNavigationBarItem( icon: Icon( Icons.add_circle_outline,label: 'Add Media',],currentIndex: _selectedIndex,onTap: _onItemTapped,); } } 的主体保持不变。

正确的代码如下：

BottomNavBar

但是，我还没有看到 SUM() 是否在导航到另一个屏幕时仍然存在（尚未构建该功能）。