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

Question

我希望 BottomNavigationBar 保持不变，并将用户发送到不同的屏幕，具体取决于他们选择的索引以及在 BottomNavigationBar 上突出显示的索引。

我尝试这样做的方法是根据BottomNavigationBar() 的当前选定索引更改Scaffold 的主体值。我可以突出显示 BottomNavigationBar() 的选定索引，一旦它被选中，但正文没有路由到适当的小部件。

BottomNavBar 中 onTap: 引用的当前方法正确突出显示所选索引，但未路由到正确的小部件。

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

这是我的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,
      ),
    );
  }
}

这里是NavModel：

import 'package:flutter/material.dart';

import '../screens/Profile_Screen.dart';
import '../screens/Venture_Feed_Screen.dart';
import '../screens/Add_Media_Screen.dart';

import '../widgets/BottomNavBar.dart';

class NavModel extends StatefulWidget {
  static const routeName = '/nav-model';
  @override
  _NavModelState createState() => _NavModelState();
}

class _NavModelState extends State<NavModel> {
  int _currentIndex = 0;

  final tabs = [
    VentureFeedScreen(),
    ProfileScreen(),
    AddMediaScreen(),
  ];

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: tabs[_currentIndex],
        bottomNavigationBar: BottomNavBar(),
      ),
    );
  }
}

Answer 1

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

Answer 2

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

代码运行正常，正如我定义的那样：Scaffold 的 body: tabs[_currentIndex] 调用了正确的逻辑 - 在选项卡列表的 0 索引处显示项目。当发生这种情况时，BottomNavBar 的索引正在更新以反映正确的用户选择的索引和值，从而导致混淆为什么 BottomNavBar 选择的索引正在更新而 Scaffold 的正文保持不变。

这是正确的代码：

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 是否会持续导航到另一个屏幕（尚未构建该功能）。