flutter 底部导航栏添加以及删除（添加的时候报错解决）

原创已于 2023-03-24 09:20:40 修改 · 617 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android #ios

于 2023-03-23 17:55:00 首次发布

在Flutter开发中，尝试向BottomNavigationBar插入BottomNavigationBarItem时遇到了RangeError，错误提示表示索引超出范围。解决方案是直接赋值给bottomList，而不是使用insert方法。文章提供了完整的修复代码示例，包括初始化和动态修改BottomNavigationBar项的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我们要添加底部导航栏时候用insert会报错：

The following RangeError was thrown building BottomNavigationBar(dirty, state:

_BottomNavigationBarState#a56dd(tickers: tracking 3 tickers)):

RangeError (index): Invalid value: Not in range 0..2, inclusive: 3

解决办法就是：

   bottomList = [
            //这样子直接的赋值就可以
            BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
            BottomNavigationBarItem(icon: Icon(Icons.add), label: "添加的"),
            BottomNavigationBarItem(icon: Icon(Icons.home), label: "项目"),
            BottomNavigationBarItem(icon: Icon(Icons.home), label: "我的"),
          ];
代替
bottomList.insert(
              1, BottomNavigationBarItem(icon: Icon(Icons.add), label: "添加的"));

全部代码：

import 'dart:async';

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:getx_shishi/app_config.dart';
import 'package:getx_shishi/tabs/add_index.dart';
import 'package:getx_shishi/tabs/home_index.dart';
import 'package:getx_shishi/tabs/my_index.dart';
import 'package:getx_shishi/tabs/project_index.dart';

class TabsPage extends StatefulWidget {
  const TabsPage({super.key});

  @override
  State<TabsPage> createState() => _TabsPageState();
}

class _TabsPageState extends State<TabsPage> {
  // StreamController controller = StreamController();
  StreamController<Map> controller = StreamController.broadcast();

  List<BottomNavigationBarItem> bottomList = [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
    BottomNavigationBarItem(icon: Icon(Icons.home), label: "项目"),
    BottomNavigationBarItem(icon: Icon(Icons.home), label: "我的"),
  ];

  List pageList = [];

  // 当前下标
  int currentIndex = 0;
  int index = 0;
  @override
  void initState() {
    super.initState();
    getData();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    // controller.onCancel();
    controller.onCancel!();
  }

  @override
  Widget build(BuildContext context) {
    print("进来重新构建");
    print(bottomList.length);
    print("页面的长度----${pageList.length}");
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentIndex,
        type: BottomNavigationBarType.fixed,
        onTap: (value) {
          // setState(() {
          currentIndex = value;
          getData();
          // });
        },
        items: bottomList,
      ),
      body: IndexedStack(
        index: currentIndex,
        children: pageList.map<Widget>((e) => e["widget"]).toList(),
      ),
    );
  }

  getData() {
    if (index == 0) {
      pageList = [
        //初始化的时候
        {
          "have": false,
          "title": "首页",
          "widget": HomeIndexPage(
            streamController: controller, // 在这里写跟一开始定义初始化也是一样的(有一个变量控制)
          ),
        },
        {
          "have": false,
          "title": "项目",
          "widget": ProjectIndexPage(
            streamController: controller,
          ),
        },
        {
          "have": false,
          "title": "我的",
          "widget": MyIndexPage(
            streamController: controller,
          ),
        },
      ];
    }
    if (index == 0) {
      AppConfig.originalIndex = true;
      AppConfig.currentIndex = true;
      // getContent();
    }
    if (index == 5) {
      AppConfig.originalIndex = false;
    }
    if (index == 10) {
      AppConfig.originalIndex = true;
    }
    // if()
    getContent();
    index++;

    controller.add({"title": pageList[currentIndex]["title"]}); // 点击底部页面刷新
    setState(() {});
  }

  getContent() {
    if (index == 0 &&
        AppConfig.originalIndex == true &&
        AppConfig.currentIndex == true) {
      // 这是一开始进来的

      bottomList.insert(
          1,
          BottomNavigationBarItem(
              icon: Icon(Icons.add), label: "添加的")); // 但是一开始这样就没错   中途要改变就有错
      pageList.insert(
        1,
        {
          "have": true,
          "title": "添加",
          "widget": AddIndexPage(
            streamController: controller,
          ),
        },
      );
      setState(() {});
      controller.add({"title": pageList[currentIndex]["title"]});
      return;
    }

    if (index != 0 && AppConfig.originalIndex != AppConfig.currentIndex) {
      if (AppConfig.originalIndex == false) {
        List list = pageList
            .where((element) => element["have"])
            .toList(); //查看是否包含 添加的页面
        if (list.isNotEmpty) {
          bottomList.removeAt(1);
          pageList.removeAt(1);
          if (currentIndex >= 1) {
            currentIndex = currentIndex - 1;
          }
        }
        AppConfig.currentIndex = AppConfig.originalIndex;

        return;
      }

      if (AppConfig.originalIndex = true) {
        List list = pageList
            .where((element) => element["have"])
            .toList(); //查看是否包含 添加的页面
        if (list.isEmpty) {
        //  bottomList.insert(
          //    1, BottomNavigationBarItem(icon: Icon(Icons.add), label: "添加的"));              
       //这里不能这样子写  会报错的 报下标错误，我也不知道为什么
          // The following RangeError was thrown building BottomNavigationBar(dirty, 
         // state:
          // _BottomNavigationBarState#a56dd(tickers: tracking 3 tickers)):
          //  RangeError (index): Invalid value: Not in range 0..2, inclusive: 3
          bottomList = [
            //这样子直接的赋值就可以
            BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
            BottomNavigationBarItem(icon: Icon(Icons.add), label: "添加的"),
            BottomNavigationBarItem(icon: Icon(Icons.home), label: "项目"),
            BottomNavigationBarItem(icon: Icon(Icons.home), label: "我的"),
          ];
          pageList.insert(
            1,
            {
              "have": true,
              "title": "添加",
              "widget": AddIndexPage(
                streamController: controller,
              ),
            },
          );
         
          AppConfig.currentIndex = AppConfig.originalIndex;
          setState(() {
            if (currentIndex >= 1) {
              currentIndex = currentIndex + 1;
            }
          });

         
        }

        return;
      }
     
    }
  }
}