写在前面
引入 Flutter 包
应用程序的入口
创建 MyApp 组件
创建 HomePage 组件
实现状态类
状态变量
页面列表
点击事件处理
- 构建用户界面
Scaffold 布局
顶部应用栏
显示页面
底部导航栏
- 完整代码
写在最后
写在前面
在这篇博客中，我们将深入分析一个 Flutter 应用的完整代码，该应用实现了一个底部导航栏，允许用户在不同页面之间切换。我们将逐行讲解代码，帮助大家理解 Flutter 的结构、状态管理以及组件之间的交互。
引入 Flutter 包
import 'package:flutter/material.dart';
这一行代码导入了 Flutter 的核心 Material Design 库。这个库为我们提供了各种丰富的 UI 组件，允许我们构建出具有良好用户体验的应用界面。应用程序的入口
void main() {
runApp(MyApp());
}
main() 函数是 Dart 应用程序的入口。在这里，我们调用 runApp() 方法来启动 Flutter 应用，并传入 MyApp 组件作为根组件。runApp() 方法会将传入的 Widget 加载到屏幕上。创建 MyApp 组件
class MyApp extends StatelessWidget { ///无状态的视图（非响应式）
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Bottom Navigation',
theme: ThemeData(primarySwatch: Colors.blue,AI 代码解读),
home: HomePage(),
);
}
}
MyApp 继承自 StatelessWidget，表明这是一个无状态的视图组件，它不会随着时间的推移而改变。
在 build 方法中，我们构建了一个 MaterialApp，这是 Flutter 应用的核心组件，提供了应用的主题、路由等设置。
title 属性定义了应用的标题，通常用于显示在任务切换器中。
theme 属性设置了应用的主题，这里我们使用蓝色调（primarySwatch 为 Colors.blue）。
home 属性指定了应用的主页，这里我们将其设置为 HomePage 组件。- 创建 HomePage 组件
class HomePage extends StatefulWidget {
///有状态的视图（响应式）
@override
_HomePageState createState() => _HomePageState();
}
HomePage 组件继承自 StatefulWidget，表明它是一个有状态的组件。与无状态组件不同，有状态组件可以根据用户的交互而改变其显示内容。
createState 方法返回一个 _HomePageState 对象，该对象将保存 HomePage 的状态。 实现状态类
class _HomePageState extends State {
int _selectedIndex = 0; // 当前选中的底部导航项// 页面列表
List _pages = [
Center(child: Text('Home Page')),
Center(child: Text('Search Page')),
Center(child: Text('Profile Page')),
];void _onItemTapped(int index) {
setState(() {
_selectedIndex = index; // 更新选中的索引
});
}
状态变量
_HomePageState 类负责管理 HomePage 的状态。我们定义了一个整型变量 _selectedIndex，初始值为 0，用于追踪当前选中的底部导航项。
页面列表
_pages 列表包含了三个页面，分别是：
Home Page
Search Page
Profile Page
每个页面都是一个 Center 小部件，里面包含一个 Text 小部件，表示当前页面的名称。
点击事件处理
_onItemTapped 方法用于处理底部导航项的点击事件。当用户点击某个导航项时，这个方法会被调用，并通过 setState 方法更新 _selectedIndex，触发界面重建，从而显示新选中的页面。
- 构建用户界面
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Bottom Navigation'),
),
body: _pages[_selectedIndex], // 显示当前选中的页面
bottomNavigationBar: BottomNavigationBar(
items: const [BottomNavigationBarItem( icon: Icon(Icons.home), label: 'Home', ), BottomNavigationBarItem( icon: Icon(Icons.search), label: 'Search', ), BottomNavigationBarItem( icon: Icon(Icons.person), label: 'Profile', ),AI 代码解读
currentIndex: _selectedIndex, // 当前选中的索引
selectedItemColor: Colors.blue,
onTap: _onItemTapped, // 点击事件
),
);
}
Scaffold 布局
build 方法返回一个 Scaffold 小部件，它提供了应用的基本视觉结构，包括 appBar、body 和 bottomNavigationBar。
顶部应用栏
appBar 属性设置了应用的顶部导航栏，显示了应用的标题。
显示页面
body 属性通过 _pages[_selectedIndex] 动态显示当前选中的页面。根据 _selectedIndex 的值，应用会渲染不同的页面内容。
底部导航栏
bottomNavigationBar 属性定义了底部导航栏的结构。它包含三个导航项：
Home：图标为家（Icons.home）。
Search：图标为搜索（Icons.search）。
Profile：图标为个人资料（Icons.person）。
currentIndex 属性设置当前选中的索引，selectedItemColor 属性定义了选中项的颜色。
onTap 属性将点击事件绑定到 _onItemTapped 方法，使得点击导航项时可以更新状态和切换页面。
- 完整代码
下面是整段代码的完整展示，方便您对照：
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
///无状态的视图（非响应式）
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Bottom Navigation',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
///有状态的视图（响应式）
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State {
int _selectedIndex = 0; // 当前选中的底部导航项
// 页面列表
List _pages = [
Center(child: Text('Home Page')),
Center(child: Text('Search Page')),
Center(child: Text('Profile Page')),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index; // 更新选中的索引
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Bottom Navigation'),
),
body: _pages[_selectedIndex], // 显示当前选中的页面
bottomNavigationBar: BottomNavigationBar(
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
currentIndex: _selectedIndex, // 当前选中的索引
selectedItemColor: Colors.blue,
onTap: _onItemTapped, // 点击事件
),
);
}
}
写在最后
通过这段代码，我们构建了一个基本的 Flutter 应用，包含了底部导航栏，可以在不同页面之间进行切换。该示例展示了 Flutter 的状态管理机制、组件结构以及如何使用 Material Design 组件构建用户界面。
希望本文能够帮助您更好地理解 Flutter 开发！如果您有任何问题或建议，欢迎与我交流。
