Flutter底部导航BottomNavigationBar

**Flutter 底部导航 BottomNavigationBar**

在 Flutter 中，`BottomNavigationBar` 是一个常用的 UI 组件，它可以用来实现应用程序的底部导航栏。这种设计模式非常适合那些需要快速切换页面或功能的应用。

### 基本使用首先，我们需要了解 `BottomNavigationBar` 的基本结构和属性。下面是一个简单的例子：

dartimport 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
 @override Widget build(BuildContext context) {
 return MaterialApp(
 home: Scaffold(
 bottomNavigationBar: BottomNavigationBar(
 items: [
 BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
 BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
 BottomNavigationBarItem(icon: Icon(Icons.info), label: 'Info'),
 ],
 currentIndex:0,
 onTap: (index) {
 print('点击了第 $index 个按钮');
 },
 ),
 ),
 );
 }
}

在这个例子中，我们创建了一个 `MaterialApp`，并将其设置为主页面。然后，我们使用 `Scaffold` 来包裹整个应用程序，并添加一个 `BottomNavigationBar`。

### 属性解释下面是 `BottomNavigationBar` 的一些重要属性：

* **items**: 这是一个列表，包含了所有的导航项。每个导航项都是一个 `BottomNavigationBarItem` 对象。
* **currentIndex**: 这个属性用来表示当前选中的导航项的索引。
* **onTap**: 当用户点击某个导航项时，这个回调函数会被调用。

### 自定义导航项我们可以通过创建一个 `BottomNavigationBarItem` 对象来自定义每个导航项。下面是一个例子：

dartBottomNavigationBarItem(
 icon: Icon(Icons.home),
 label: 'Home',
 backgroundColor: Colors.blue,
 activeColor: Colors.white,
)

在这个例子中，我们创建了一个 `BottomNavigationBarItem` 对象，并设置了其图标、文本和背景颜色。

### 使用 TabBarView当我们需要显示多个页面时，可以使用 `TabBarView` 来实现。下面是一个例子：

dartimport 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
 @override Widget build(BuildContext context) {
 return MaterialApp(
 home: Scaffold(
 bottomNavigationBar: BottomNavigationBar(
 items: [
 BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
 BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
 BottomNavigationBarItem(icon: Icon(Icons.info), label: 'Info'),
 ],
 currentIndex:0,
 onTap: (index) {
 print('点击了第 $index 个按钮');
 },
 ),
 body: TabBarView(
 children: [
 Center(child: Text('这是 Home 页面')),
 Center(child: Text('这是 Settings 页面')),
 Center(child: Text('这是 Info 页面')),
 ],
 ),
 ),
 );
 }
}

在这个例子中，我们使用 `TabBarView` 来显示三个页面。每个页面都是一个 `Center` 对象，包含了一个文本。

### 总结在本文中，我们学习了如何使用 Flutter 底部导航 `BottomNavigationBar` 组件来实现应用程序的底部导航栏。我们了解了其基本结构和属性，并通过例子展示了如何自定义导航项和使用 `TabBarView` 来显示多个页面。