Flutter bottomNavigationBar 底部导航栏

 Flutter 学习第一天

import 'package:flutter/material.dart';// 应用程序入口点
void main() {// 启动Flutter应用，MyApp是根组件runApp(const MyApp());
}// 应用根组件，继承无状态Widget
class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {// MaterialApp是Material风格应用的主组件return MaterialApp(title: 'Flutter 底部导航栏', // 应用名称theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue), // 从种子颜色生成配色方案useMaterial3: true, // 启用Material 3设计),home: const MainPage(), // 设置应用启动时显示的主页debugShowCheckedModeBanner: false, // 隐藏调试标志);}
}// 主页面组件，继承有状态Widget（因为需要管理底部导航栏的选中状态）
class MainPage extends StatefulWidget {const MainPage({super.key});@overrideState<MainPage> createState() => _MainPageState();
}// MainPage的状态类，管理页面状态和逻辑
class _MainPageState extends State<MainPage> {// 当前选中的底部导航栏索引（0表示首页，1表示发现，2表示我的）int _currentIndex = 0;// 页面列表，存储所有可能的页面组件final List<Widget> _pages = [const HomePage(),    // 索引0：首页const ExplorePage(), // 索引1：发现页const ProfilePage(), // 索引2：个人页面];@overrideWidget build(BuildContext context) {// Scaffold提供基本的Material Design布局结构return Scaffold(// 根据当前选中的索引显示对应的页面body: _pages[_currentIndex],// 底部导航栏组件bottomNavigationBar: BottomNavigationBar(currentIndex: _currentIndex, // 设置当前选中的索引onTap: (index) {// 当用户点击导航项时的回调函数setState(() {// 更新当前索引，触发界面重新构建_currentIndex = index;});},// 底部导航栏的项目列表items: const [BottomNavigationBarItem(icon: Icon(Icons.home), // 首页图标label: '首页',           // 首页标签),BottomNavigationBarItem(icon: Icon(Icons.explore), // 发现图标label: '发现',              // 发现标签),BottomNavigationBarItem(icon: Icon(Icons.person), // 个人资料图标label: '我的',             // 个人资料标签),],),);}
}// 首页组件
class HomePage extends StatelessWidget {const HomePage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(// 首页的导航栏appBar: AppBar(title: const Text('首页'), // 导航栏标题backgroundColor: Theme.of(context).colorScheme.inversePrimary, // 使用主题色),// 首页内容区域body: const Center(child: Column(mainAxisAlignment: MainAxisAlignment.center, // 垂直居中children: [Icon(Icons.home,size: 80,color: Colors.blue, // 首页图标颜色),SizedBox(height: 20), // 间距组件，创建20像素的垂直间距Text('首页',style: TextStyle(fontSize: 24), // 文本样式),],),),);}
}// 发现页组件
class ExplorePage extends StatelessWidget {const ExplorePage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('发现'),backgroundColor: Theme.of(context).colorScheme.inversePrimary,),body: const Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Icon(Icons.explore,size: 80,color: Colors.orange, // 发现页图标颜色),SizedBox(height: 20),Text('发现页面',style: TextStyle(fontSize: 24),),],),),);}
}// 个人页面组件
class ProfilePage extends StatelessWidget {const ProfilePage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('我的'),backgroundColor: Theme.of(context).colorScheme.inversePrimary,),body: const Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Icon(Icons.person,size: 80,color: Colors.green, // 个人页面图标颜色),SizedBox(height: 20),Text('我的页面',style: TextStyle(fontSize: 24),),],),),);}
}