Flutter中点击BottomNavigationBar图标实现页面导航方案求助

你已经完成了BottomNavigationBar的基础配置，只需要结合页面列表和内容切换逻辑就能实现点击跳转，具体操作如下：

1. 定义页面列表 #

在你的State类中，把已创建的四个页面存入列表：

final List<Widget> _pages = [
  HomeScreen(), // 替换为你实际的首页组件
  TodoScreen(), // 替换为你实际的TODO页面组件
  TimeTableScreen(), // 替换为你实际的时间表页面组件
  AboutScreen(), // 替换为你实际的关于页面组件
];

2. 绑定Body内容切换 #

在Scaffold的body属性中，根据selectedIndex显示对应页面：

body: _pages[selectedIndex],

3. 完整示例代码 #

整合后的完整StatefulWidget代码如下：

import 'package:flutter/material.dart';
import 'package:flutter_ionicons/flutter_ionicons.dart';
// 导入你自己的页面组件文件
import 'home_screen.dart';
import 'todo_screen.dart';
import 'time_table_screen.dart';
import 'about_screen.dart';

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

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int selectedIndex = 0;
  final List<Widget> _pages = [
    const HomeScreen(),
    const TodoScreen(),
    const TimeTableScreen(),
    const AboutScreen(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        showSelectedLabels: false,
        showUnselectedLabels: false,
        onTap: (index) {
          setState(() {
            selectedIndex = index;
          });
        },
        currentIndex: selectedIndex,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Ionicons.home_outline),
            label: "Home",
          ),
          BottomNavigationBarItem(
            icon: Icon(Ionicons.list_outline),
            label: "TODO",
          ),
          BottomNavigationBarItem(
            icon: Icon(Ionicons.time_outline),
            label: "TIME TABLE",
          ),
          BottomNavigationBarItem(
            icon: Icon(Ionicons.person_outline),
            label: "ABOUT",
          )
        ],
      ),
    );
  }
}

注意事项 #

• 确保自定义页面的文件路径导入正确
• 如果使用其他图标库，替换对应的导入包和图标组件即可

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