Flutter-5 ( BottomNavigationBar )

import 'package:untitled/pages/tabbar.dart';

import 'package:flutter/material.dart';
import 'package:untitled/routes/router.dart';
import 'package:untitled/pages/tabbar.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // initialRoute: '/home',
      routes:routes,
      home: const BottomNavigationExample(),
    );
  }
}

routes

import 'package:flutter/material.dart';
import 'package:untitled/pages/home_page.dart';
import 'package:untitled/pages/about.dart';
import 'package:untitled/pages/details.dart';

final Map<String, WidgetBuilder> routes = {
  '/home': (context) => const HomePage(),
  '/about': (context) => const About(),
  '/details': (context) => Details(),
};

Tabbar.dart

import 'package:flutter/material.dart';
import 'package:untitled/routes/router.dart';
import 'package:untitled/pages/home_page.dart';
import 'package:untitled/pages/about.dart';
import 'package:untitled/pages/details.dart';

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

  @override
  State<BottomNavigationExample> createState() =>
      _BottomNavigationExampleState();
}

class _BottomNavigationExampleState extends State<BottomNavigationExample> {
  int _currentIndex = 0;
  final List<Widget> _pageList = [
    const HomePage(),
    const About(),
    Details()
  ];

  void _onItemTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pageList[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: '关于'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: '详情'),
        ],
        currentIndex: _currentIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

一、功能概述

这段 Flutter 代码实现了一个带有底部导航栏的应用程序。用户可以通过点击底部导航栏的不同图标在首页、关于页面和详情页面之间进行切换。

二、代码结构解析

1. 导入部分：

   • 引入了 Flutter 的核心库package:flutter/material.dart，这是 Flutter 应用开发的基础库，提供了各种常用的小部件和功能。
   • 还引入了自定义的路由文件package:untitled/routes/router.dart以及自定义的页面文件package:untitled/pages/home_page.dart、package:untitled/pages/about.dart和package:untitled/pages/details.dart。

2. 状态类定义：

   • BottomNavigationExample是一个有状态的小部件类，继承自StatefulWidget。它包含一个名为createState的方法，该方法返回一个_BottomNavigationExampleState对象，用于管理该小部件的状态。

3. 状态类实现：

   • _BottomNavigationExampleState类管理着BottomNavigationExample小部件的状态。
   • _currentIndex变量用于跟踪当前选中的底部导航栏项的索引。
   • _pageList是一个包含三个小部件的列表，分别对应首页、关于页面和详情页面。
   • _onItemTapped方法用于处理底部导航栏项的点击事件，当用户点击某个导航栏项时，它会更新_currentIndex变量，并触发小部件的重新构建。
   • build方法构建了小部件的用户界面。它使用Scaffold小部件创建了一个带有底部导航栏的页面布局。body属性显示当前选中的页面，通过_pageList[_currentIndex]来获取。底部导航栏使用BottomNavigationBar小部件创建，其中包含三个导航栏项，分别对应首页、关于页面和详情页面。currentIndex属性设置为当前选中的索引，onTap属性绑定了_onItemTapped方法，用于处理点击事件。