Flutter中如何自定义可动态配置项数量的底部导航栏

该需求完全可以实现，核心逻辑是不要硬编码底部导航的items列表，通过状态变量控制列表长度，动态生成对应数量的导航项即可。

实现步骤 #

• 定义可响应的数量控制变量：如果用原生Flutter状态，就在StatefulWidget中定义navItemCount作为状态变量，后续修改该值并触发setState即可刷新导航栏；如果使用第三方状态管理，把该变量放到对应状态层即可。
• 提前准备导航项配置：把所有可能用到的导航项的图标、标题、对应页面提前存为配置列表，实际渲染时根据navItemCount从配置列表中截取对应长度的子集使用。
• 做索引边界校验：当导航项数量减少时，如果之前选中的索引超出了新列表的有效范围，必须重置选中索引到合法区间，否则会触发数组越界报错。
• 给BottomNavigationBar设置固定类型：当导航项数量超过3个时，必须配置type: BottomNavigationBarType.fixed，否则默认的shifting模式会导致非选中项文字隐藏、样式偏移。

完整可运行示例代码 #

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const DynamicBottomNavPage(),
    );
  }
}

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

  @override
  State<DynamicBottomNavPage> createState() => _DynamicBottomNavPageState();
}

class _DynamicBottomNavPageState extends State<DynamicBottomNavPage> {
  // 控制底部导航项数量的变量，修改该值即可调整展示的item数
  int navItemCount = 3;
  // 当前选中的导航索引
  int currentIndex = 0;

  // 全量导航项配置，长度需大于等于你可能设置的最大navItemCount
  final List<Map<String, dynamic>> allNavConfigs = [
    {"icon": Icons.home, "label": "首页", "page": const TabPage(title: "首页")},
    {"icon": Icons.explore, "label": "发现", "page": const TabPage(title: "发现")},
    {"icon": Icons.message, "label": "消息", "page": const TabPage(title: "消息")},
    {"icon": Icons.shopping_cart, "label": "购物车", "page": const TabPage(title: "购物车")},
    {"icon": Icons.person, "label": "我的", "page": const TabPage(title: "我的")},
  ];

  @override
  Widget build(BuildContext context) {
    // 按设置的数量截取要展示的导航配置
    final activeNavConfigs = allNavConfigs.take(navItemCount).toList();
    // 边界校验：选中索引超出范围时自动重置为最后一个tab
    if (currentIndex >= activeNavConfigs.length) {
      currentIndex = activeNavConfigs.length - 1;
    }

    return Scaffold(
      appBar: AppBar(title: const Text("动态底部导航")),
      body: activeNavConfigs[currentIndex]["page"] as Widget,
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentIndex,
        // 超过3个item必须设置fixed类型，避免样式异常
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
          setState(() {
            currentIndex = index;
          });
        },
        // 动态生成对应数量的BottomNavigationBarItem
        items: activeNavConfigs.map((config) {
          return BottomNavigationBarItem(
            icon: Icon(config["icon"] as IconData),
            label: config["label"] as String,
          );
        }).toList(),
      ),
      // 测试按钮：点击切换3个/5个导航项，实际业务可替换为接口返回、权限判断等触发逻辑
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            navItemCount = navItemCount == 3 ? 5 : 3;
          });
        },
        child: const Icon(Icons.swap_horiz),
      ),
    );
  }
}

// 通用tab页示例
class TabPage extends StatelessWidget {
  final String title;
  const TabPage({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    return Center(child: Text(title, style: const TextStyle(fontSize: 24)));
  }
}

额外说明 #

• 如果你不需要固定的导航项配置，也可以直接根据navItemCount循环生成对应数量的item，比如循环生成图标为Icons.looks_one、Icons.looks_two序列、label为"Tab1"、"Tab2"的导航项，逻辑和上述示例一致，只要传入items的列表长度和navItemCount相等即可。
• 如果使用NavigationBar（Flutter 3.0+推荐的新底部导航组件）实现，逻辑完全相同，也是动态控制destinations列表的长度即可。

内容的提问来源于stack exchange，提问作者beatfloraminederecho