BottomNavigationBar // 额外页面的问题

Question

我使用 BottomNavigationBar + BottomNavigationBarItem 小部件在一个脚手架内切换页面。我的问题：

我还使用抽屉来提供导航选项。我能够使用与抽屉底部导航栏相同的页面列表。那行得通。但是：我现在想使用抽屉提供比底栏中更多的页面，并且一旦我想设置这些页面的索引，BottomNavigationBar 就会抛出错误：

'package:flutter/src/material/bottom_navigation_bar.dart': 失败 断言：第 192 行 pos 15: '0 <= currentIndex &&当前索引 < items.length': 不正确。

似乎发生的情况是，BottomNavigationBar 阻止我使用比连接到 Bottom Bar 的页面更多的页面。有办法解决这个问题吗？我不想在底部栏中出现超过 4 个符号，但我想要 5 页；如果可能的话，所有这些都在同一个脚手架中。谢谢！

Answer 1

为此，您需要逻辑地管理变量。这是一个完整的例子。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      onGenerateRoute: (settings) {
        switch (settings.name) {
          case HomePage.route:
            return MaterialPageRoute(
                builder: (context) => Scaffold(
                      body: Container(
                        color: Colors.amber,
                        child: const Text("home"),
                      ),
                    ),
                settings: const RouteSettings(name: HomePage.route));
        }
      },
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  static const String route = "/home";

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _pageIndex = 0;
  int _drawerIndex = 0;
  List<int> screenStack = [0];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("page $_pageIndex"),
      ),
      body: SafeArea(
        child: WillPopScope(
          onWillPop: () async {
            if (screenStack.length > 1) {
              setState(() {
                screenStack.removeLast();
                _pageIndex = screenStack[screenStack.length - 1];
              });
              return false;
            }
            return true;
          },
          child: IndexedStack(
            index: (_drawerIndex < _pageIndex) ? _pageIndex : _drawerIndex,
            children: <Widget>[
              Container(
                color: Colors.amber,
                child: Center(
                  child: Column(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      ElevatedButton(
                        onPressed: () {
                          Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => const Scaffold(
                                        body: Center(
                                          child: Text("DetailsPage"),
                                        ),
                                      )));
                        },
                        child: const Text("navigate"),
                      ),
                      const Text('Home'),
                    ],
                  ),
                ),
              ),
              Container(
                color: Colors.green,
                child: const Center(child: Text('Business')),
              ),
              Container(
                color: Colors.amber,
                child: const Center(child: Text('Technology')),
              ),
              Container(
                color: Colors.blueAccent,
                child: const Center(child: Text('Education')),
              ),
              Container(
                color: Colors.deepOrange,
                child: const Center(child: Text('Others')),
              ),
            ],
          ),
        ),
      ),
      drawer: Drawer(
        child: Padding(
          padding: const EdgeInsets.all(18.0),
          child: Column(
            children: [
              ListTile(
                onTap: () {
                  Navigator.of(context).pop();
                  setState(
                    () {
                      _pageIndex = 0;
                      _drawerIndex = _pageIndex;
                      if (_pageIndex == 0) {
                        screenStack = [0];
                      } else if (!screenStack.contains(_pageIndex)) {
                        screenStack.add(_pageIndex);
                      }
                    },
                  );
                },
                title: const Text("Home"),
              ),
              ListTile(
                onTap: () {
                  Navigator.of(context).pop();
                  setState(
                    () {
                      _pageIndex = 1;
                      _drawerIndex = _pageIndex;
                      if (_pageIndex == 0) {
                        screenStack = [0];
                      } else if (!screenStack.contains(_pageIndex)) {
                        screenStack.add(_pageIndex);
                      }
                    },
                  );
                },
                title: const Text("Business"),
              ),
              ListTile(
                onTap: () {
                  Navigator.of(context).pop();
                  setState(
                    () {
                      _pageIndex = 2;
                      _drawerIndex = _pageIndex;
                      if (_pageIndex == 0) {
                        screenStack = [0];
                      } else if (!screenStack.contains(_pageIndex)) {
                        screenStack.add(_pageIndex);
                      }
                    },
                  );
                },
                title: const Text("Technology"),
              ),
              ListTile(
                onTap: () {
                  Navigator.of(context).pop();
                  setState(
                    () {
                      _pageIndex = 3;
                      _drawerIndex = _pageIndex;
                      if (_pageIndex == 0) {
                        screenStack = [0];
                      } else if (!screenStack.contains(_pageIndex)) {
                        screenStack.add(_pageIndex);
                      }
                    },
                  );
                },
                title: const Text("Education"),
              ),
              ListTile(
                onTap: () {
                  Navigator.of(context).pop();
                  setState(
                    () {
                      _drawerIndex = 4;
                    },
                  );
                },
                title: const Text("Others"),
              )
            ],
          ),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.computer),
            label: 'Technology',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.book),
            label: 'Education',
          ),
        ],
        currentIndex: _pageIndex,
        onTap: (int index) {
          setState(
            () {
              _pageIndex = index;
              _drawerIndex = _pageIndex;
              if (_pageIndex == 0) {
                screenStack = [0];
              } else if (!screenStack.contains(_pageIndex)) {
                screenStack.add(_pageIndex);
              }
            },
          );
        },
      ),
    );
  }
}

// ignore: must_be_immutable
class DetailRoute extends StatelessWidget {
  late TextEditingController? textEditingController;
  int? index;

  DetailRoute({Key? key, this.textEditingController, this.index})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Answer 2

尝试这个方法——

class BottomNavBar extends StatefulWidget {
  const BottomNavBar({Key? key}) : super(key: key);

  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  int pageIndex = 0;
  List<Widget> pageList = <Widget>[Home(), Profile(), Setting()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: pageList[pageIndex],
        bottomNavigationBar: BottomNavigationBar(
            fixedColor: Colors.redAccent[400],
            currentIndex: pageIndex,
            onTap: (value) {
              setState(() {
                pageIndex = value;
              });
            },
            // type: BottomNavigationBarType.fixed,
            items: [
              BottomNavigationBarItem(
                  activeIcon: Icon(
                    Icons.home,
                    color: AppColors.black,
                  ),
                  icon: Icon(
                    Icons.home,
                    color: AppColors.grey,
                  ),
                  label: ""),
              BottomNavigationBarItem(
                  activeIcon: Icon(
                    Icons.person,
                    color: AppColors.black,
                  ),
                  icon: Icon(
                    Icons.person,
                    color: AppColors.grey,
                  ),
                  label: ""),
              BottomNavigationBarItem(
                  activeIcon: Icon(
                    Icons.settings,
                    color: AppColors.black,
                  ),
                  icon: Icon(
                    Icons.settings,
                    color: AppColors.grey,
                  ),
                  label: ""),
            ]));
  }
}