Flutter中BottomNavigationBar+IndexedStack实现底部导航栏

Flutter底部导航栏切换页面的实现，

主要步骤如下：

1. 引入相关包和页面文件。

2. 定义TabPage StatefulWidget和其状态管理类_TabPageState。

3. 在_TabPageState中定义当前选中的底部导航栏索引变量currentIndex。

4. 在build方法中构建页面UI，使用Scaffold作为根组件。

5. 使用SafeArea确保内容不会超出屏幕安全区域。

6. 使用IndexedStack保持页面状态，避免页面重建。

7. 定义底部导航栏，并设置主题去除水波纹和点击高亮效果。

8. 设置底部导航栏的选中标签和未选中标签样式。

9. 定义底部导航栏项目列表。

tab_page.dart

 

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart'; // 引入屏幕适配库
import 'package:wan_android_flutter/pages/home/home_page.dart'; // 引入首页页面
import 'package:wan_android_flutter/pages/hot_key/hot_key_page.dart'; // 引入热点页面
import 'package:wan_android_flutter/pages/knowledge/knowledge_page.dart'; // 引入体系页面
import 'package:wan_android_flutter/pages/personal/personal_page.dart'; // 引入个人中心页面

// 定义TabPage StatefulWidget，用于底部导航栏切换页面
class TabPage extends StatefulWidget {
  const TabPage({super.key});

  @override
  State createState() {
    return _TabPageState();
  }
}

// _TabPageState类，用于管理TabPage的状态
class _TabPageState extends State<TabPage> {
  int currentIndex = 0; // 当前选中的底部导航栏索引

  @override
  Widget build(BuildContext context) {
    // 构建页面UI
    return Scaffold(
      body: SafeArea(
        // SafeArea确保内容不会超出屏幕安全区域
        child: IndexedStack(
          // IndexedStack用于保持页面状态，避免页面重建
          index: currentIndex,
          children: [
            HomePage(), // 首页
            HotKeyPage(), // 热点
            KnowledgePage(), // 体系
            PersonalPage(), // 我的
          ],
        ),
      ),
      bottomNavigationBar: Theme(
          // 修改底部导航栏主题
          data: Theme.of(context).copyWith(
              splashColor: Colors.transparent, // 去除水波纹效果
              highlightColor: Colors.transparent), // 去除点击高亮效果
          child: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            // 固定底部导航栏
            selectedLabelStyle: TextStyle(fontSize: 14.sp, color: Colors.black),
            // 选中标签样式
            unselectedLabelStyle:
                TextStyle(fontSize: 12.sp, color: Colors.blueGrey),
            // 未选中标签样式
            currentIndex: currentIndex,
            // 当前选中的索引
            items: _barItemList(),
            // 底部导航栏项目列表
            onTap: (index) {
              // 点击切换页面
              currentIndex = index;
              setState(() {}); // 更新页面
            },
          )),
    );
  }

  // 构建底部导航栏项目列表
  List<BottomNavigationBarItem> _barItemList() {
    List<BottomNavigationBarItem> items = []; // 初始化项目列表
    // 添加首页项目
    items.add(BottomNavigationBarItem(
        label: "置顶",
        activeIcon: Image.asset("assets/images/icon_home_selected.png",
            width: 32.r, height: 32.r), // 选中状态的图标
        icon: Image.asset("assets/images/icon_home_grey.png",
            width: 32.r, height: 32.r))); // 未选中状态的图标
    // 添加热点项目
    items.add(BottomNavigationBarItem(
        label: "热点",
        activeIcon: Image.asset("assets/images/icon_hot_key_selected.png",
            width: 32.r, height: 32.r),
        icon: Image.asset("assets/images/icon_hot_key_grey.png",
            width: 32.r, height: 32.r)));
    // 添加体系项目
    items.add(BottomNavigationBarItem(
        label: "体系",
        activeIcon: Image.asset("assets/images/icon_knowledge_selected.png",
            width: 32.r, height: 32.r),
        icon: Image.asset("assets/images/icon_knowledge_grey.png",
            width: 32.r, height: 32.r)));
    // 添加我的项目
    items.add(BottomNavigationBarItem(
        label: "我的",
        activeIcon: Image.asset("assets/images/icon_personal_selected.png",
            width: 32.r, height: 32.r),
        icon: Image.asset("assets/images/icon_personal_grey.png",
            width: 32.r, height: 32.r)));
    return items; // 返回项目列表
  }
}

hot_key_page.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HotKeyPage extends StatefulWidget {
  @override
  State createState() {
    return _HotKeyPageState();
  }
}

class _HotKeyPageState extends State<HotKeyPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Text("hotKey"),
        ),
      ),
    );
  }
}