初学Flutter,实现底部导航切换

效果展示

flutter bottomNavBar

主要实现代码

入口文件：main.dart

import 'package:flutter/material.dart';
import 'package:flutter_demo/components/bottomNavBar.dart';
import 'package:flutter_demo/views/cart.dart';
import 'package:flutter_demo/views/cata.dart';
import 'package:flutter_demo/views/person.dart';
import 'package:flutter_demo/views/home.dart';main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(// title: 'UzumakiHan',theme: ThemeData(// Define the default brightness and colors.brightness: Brightness.light,primaryColor: Colors.lightBlue[800],),home: const MyHome());}
}class MyHome extends StatefulWidget {const MyHome({super.key});@override// ignore: library_private_types_in_public_api_MyHomeState createState() => _MyHomeState();
}class _MyHomeState extends State<MyHome> {List tabBodies = [const IndexHome(),const Cata(),const Cart(),const Person()];int currentIndex = 0;List<BottomNavigationBarItem> bottomTabs = [const BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),const BottomNavigationBarItem(icon: Icon(Icons.search), label: '分类'),const BottomNavigationBarItem(icon: Icon(Icons.shopping_cart), label: '购物车'),const BottomNavigationBarItem(icon: Icon(Icons.manage_accounts), label: '个人中心'),];List<String> pageTitle = ['首页', '分类', '购物车', '个人中心'];@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(pageTitle[currentIndex]),centerTitle: true,),body: tabBodies[currentIndex],bottomNavigationBar: BottomNavBar(bottomTabs: bottomTabs,currentIndex: currentIndex,changeCurrentIndex: (index) {setState(() {currentIndex = index;});},));}
}

底部导航组件 bottomNavBar.dart

// ignore_for_file: library_private_types_in_public_apiimport 'package:flutter/material.dart';
class BottomNavBar extends StatefulWidget {const BottomNavBar({super.key,required this.bottomTabs,required this.currentIndex,required this.changeCurrentIndex});final List<BottomNavigationBarItem> bottomTabs;final int currentIndex;final Function changeCurrentIndex;@override_BootomNavBarState createState() => _BootomNavBarState();
}class _BootomNavBarState extends State<BottomNavBar> {int currentIndex = 0;@overrideWidget build(BuildContext context) {return BottomNavigationBar(type: BottomNavigationBarType.fixed,currentIndex: widget.currentIndex,items: widget.bottomTabs,onTap: (index) {widget.changeCurrentIndex(index);});}
}

下面是四个导航对应的页面

首页：home.dart

// ignore_for_file: library_private_types_in_public_apiimport 'package:flutter/material.dart';class IndexHome extends StatefulWidget {const IndexHome({super.key});@override_IndexHomeState createState() => _IndexHomeState();
}class _IndexHomeState extends State<IndexHome> {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn const Center(child: Text('首页',style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),));}
}

分类：cata.dart

// ignore_for_file: library_private_types_in_public_apiimport 'package:flutter/material.dart';class Cata extends StatefulWidget {const Cata({super.key});@override_CataState createState() => _CataState();
}class _CataState extends State<Cata> {@overrideWidget build(BuildContext context) {return const Center(child: Text("分类",style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold)),);}
}

购物车：cart.dart

// ignore_for_file: library_private_types_in_public_apiimport 'package:flutter/material.dart';class Cart extends StatefulWidget {const Cart({super.key});@override_CartState createState() => _CartState();
}class _CartState extends State<Cart> {@overrideWidget build(BuildContext context) {return const Center(child: Text("购物车",style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold)),);}
}

个人中心：person.dart

// ignore_for_file: library_private_types_in_public_apiimport 'package:flutter/material.dart';class IndexHome extends StatefulWidget {const IndexHome({super.key});@override_IndexHomeState createState() => _IndexHomeState();
}class _IndexHomeState extends State<IndexHome> {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn const Center(child: Text('首页',style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),));}
}