如何在Flutter中实现带自定义图标且跨页面持久化的底部导航栏？

核心实现思路：父组件嵌套导航栏 #

不要在每个页面单独添加BottomNavigationBar，而是创建一个根页面，将BottomNavigationBar作为根Scaffold的bottomNavigationBar属性，页面切换逻辑集中在根页面，子页面仅负责自身业务内容。这种方式能确保导航栏在所有页面持续可见，同时避免重复代码。

用IndexedStack保持页面状态（推荐） #

IndexedStack可以缓存所有子页面的状态，切换时不会重建页面，既保证流畅性又能保留页面原有状态（比如列表滚动位置、输入框内容）：

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

  @override
  State<RootPage> createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  int _currentIndex = 0;
  // 定义所有子页面
  final List<Widget> _pages = const [
    HomePage(),
    ExplorePage(),
    ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: _pages,
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) => setState(() => _currentIndex = index),
        // 自定义导航项配置
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home_outlined),
            activeIcon: Icon(Icons.home),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.explore_outlined),
            activeIcon: Icon(Icons.explore),
            label: '发现',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person_outlined),
            activeIcon: Icon(Icons.person),
            label: '我的',
          ),
        ],
      ),
    );
  }
}

自定义导航栏图标 #

1. 加载本地图片图标 #

如果用设计师提供的PNG/SVG资源，直接通过Image.asset区分选中/未选中状态：

BottomNavigationBarItem(
  icon: Image.asset(
    'assets/icons/home_unselected.png',
    width: 24,
    height: 24,
  ),
  activeIcon: Image.asset(
    'assets/icons/home_selected.png',
    width: 24,
    height: 24,
  ),
  label: '首页',
),

2. 使用自定义Icon Font #

如果用阿里图标库等生成的Icon Font，先通过flutter pub add flutter_iconfont引入包，配置后直接调用：

BottomNavigationBarItem(
  icon: Icon(IconFont.homeUnselected),
  activeIcon: Icon(IconFont.homeSelected),
  label: '首页',
),

3. 适配应用配色 #

通过导航栏自身属性调整样式，匹配应用设计：

BottomNavigationBar(
  selectedItemColor: Colors.blueAccent, // 选中状态颜色
  unselectedItemColor: Colors.grey.shade600, // 未选中状态颜色
  backgroundColor: Colors.white, // 导航栏背景色
  type: BottomNavigationBarType.fixed, // 固定图标大小，避免切换时缩放
  // 其他配置...
)

性能优化要点 #

• 优先用IndexedStack：避免页面切换时频繁重建Widget，减少性能消耗。
• 子页面状态保持：如果子页面是有状态组件，通过AutomaticKeepAliveClientMixin确保状态不丢失：

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true; // 开启状态保持

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用此方法
    return const Center(child: Text('首页'));
  }
}

• 减少不必要的setState：复杂场景下可使用ValueNotifier配合ValueListenableBuilder，替代StatefulWidget的setState逻辑。

可选第三方包 #

如果需要弧形导航栏、切换动画等进阶效果，可考虑以下轻量包：

• curved_navigation_bar：支持弧形导航栏和自定义切换动画
• persistent_bottom_nav_bar：提供多种预设导航栏样式，支持页面切换过渡动画

不过原生BottomNavigationBar已经能满足绝大多数基础需求，优先使用原生实现更轻量、兼容性更好。

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