Flutter底部导航栏实现

发布时间: 2025-03-22 22:16

↑

# Flutter底部导航栏实现

## 底部导航栏简介

底部导航栏是移动应用中最常见的导航模式之一，它通常位于应用程序底部，包含多个标签页，用户可以通过点击不同的标签切换不同的内容页面。Flutter提供了`BottomNavigationBar`和`BottomNavigationBarItem`组件来实现这一功能。

## 基本实现

### 简单示例

```dart
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;
  
  static const List<Widget> _pages = [
    Center(child: Text('首页')),
    Center(child: Text('消息')),
    Center(child: Text('我的')),
  ];

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

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.message),
            label: '消息',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: '我的',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}
```

## 高级定制

### 自定义样式

```dart
BottomNavigationBar(
  items: const [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: '首页',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.message),
      label: '消息',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: '我的',
    ),
  ],
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
  // 自定义样式
  selectedItemColor: Colors.blue,
  unselectedItemColor: Colors.grey,
  selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold),
  unselectedLabelStyle: TextStyle(fontWeight: FontWeight.normal),
  showUnselectedLabels: true,
  type: BottomNavigationBarType.fixed,
  backgroundColor: Colors.white,
  elevation: 8,
)
```

### 带徽标的导航栏

```dart
BottomNavigationBar(
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: '首页',
    ),
    BottomNavigationBarItem(
      icon: Badge(
        label: Text('2'),
        child: Icon(Icons.message),
      ),
      label: '消息',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: '我的',
    ),
  ],
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
)
```

## 页面切换动画

### 使用PageView实现滑动切换

```dart
class AnimatedBottomNav extends StatefulWidget {
  @override
  _AnimatedBottomNavState createState() => _AnimatedBottomNavState();
}

class _AnimatedBottomNavState extends State<AnimatedBottomNav> {
  int _selectedIndex = 0;
  PageController _pageController = PageController();

static const List<Widget> _pages = [
    Center(child: Text('首页')),
    Center(child: Text('消息')),
    Center(child: Text('我的')),
  ];

void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
      // 带动画地切换页面
      _pageController.animateToPage(
        index,
        duration: Duration(milliseconds: 300),
        curve: Curves.easeInOut,
      );
    });
  }

void _onPageChanged(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _pageController,
        children: _pages,
        onPageChanged: _onPageChanged,
        physics: BouncingScrollPhysics(),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.message),
            label: '消息',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: '我的',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}
```

## 持久化页面状态

### 使用IndexedStack保持页面状态

```dart
class StatefulBottomNav extends StatefulWidget {
  @override
  _StatefulBottomNavState createState() => _StatefulBottomNavState();
}

class _StatefulBottomNavState extends State<StatefulBottomNav> {
  int _selectedIndex = 0;

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _selectedIndex,
        children: const [
          HomePage(),
          MessagePage(),
          ProfilePage(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.message),
            label: '消息',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: '我的',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
      ),
    );
  }
}
```

## 自定义底部导航栏

### 创建自定义导航栏

```dart
class CustomBottomNavigationBar extends StatelessWidget {
  final int selectedIndex;
  final Function(int) onTap;

const CustomBottomNavigationBar({
    super.key,
    required this.selectedIndex,
    required this.onTap,
  });

@override
  Widget build(BuildContext context) {
    return Container(
      height: 60,
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.3),
            spreadRadius: 1,
            blurRadius: 5,
            offset: Offset(0, -1),
          ),
        ],
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          _buildNavItem(0, Icons.home, '首页'),
          _buildNavItem(1, Icons.message, '消息'),
          _buildNavItem(2, Icons.person, '我的'),
        ],
      ),
    );
  }

Widget _buildNavItem(int index, IconData icon, String label) {
    final isSelected = selectedIndex == index;
    return GestureDetector(
      onTap: () => onTap(index),
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 16),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              icon,
              color: isSelected ? Colors.blue : Colors.grey,
              size: 24,
            ),
            SizedBox(height: 4),
            Text(
              label,
              style: TextStyle(
                color: isSelected ? Colors.blue : Colors.grey,
                fontSize: 12,
                fontWeight:
                    isSelected ? FontWeight.bold : FontWeight.normal,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
```

## 最佳实践

### 1. 页面状态管理

使用Provider管理页面状态：

```dart
class NavigationProvider extends ChangeNotifier {
  int _currentIndex = 0;
  int get currentIndex => _currentIndex;

void setIndex(int index) {
    _currentIndex = index;
    notifyListeners();
  }
}

// 在应用中使用
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => NavigationProvider(),
      child: MaterialApp(
        home: HomePage(),
      ),
    );
  }
}

// 在页面中使用
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<NavigationProvider>(
      builder: (context, provider, child) {
        return Scaffold(
          body: IndexedStack(
            index: provider.currentIndex,
            children: const [
              HomeTab(),
              MessageTab(),
              ProfileTab(),
            ],
          ),
          bottomNavigationBar: BottomNavigationBar(
            currentIndex: provider.currentIndex,
            onTap: (index) => provider.setIndex(index),
            items: const [
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: '首页',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.message),
                label: '消息',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.person),
                label: '我的',
              ),
            ],
          ),
        );
      },
    );
  }
}
```

### 2. 路由整合

将底部导航栏与命名路由结合：

```dart
class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<NavigationProvider>(
      builder: (context, provider, child) {
        return Scaffold(
          body: Navigator(
            onGenerateRoute: (settings) {
              Widget page;
              switch (provider.currentIndex) {
                case 0:
                  page = HomeTab();
                  break;
                case 1:
                  page = MessageTab();
                  break;
                case 2:
                  page = ProfileTab();
                  break;
                default:
                  page = HomeTab();
              }
              return MaterialPageRoute(
                builder: (_) => page,
                settings: settings,
              );
            },
          ),
          bottomNavigationBar: BottomNavigationBar(
            currentIndex: provider.currentIndex,
            onTap: (index) => provider.setIndex(index),
            items: const [
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: '首页',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.message),
                label: '消息',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.person),
                label: '我的',
              ),
            ],
          ),
        );
      },
    );
  }
}
```

### 3. 性能优化

- 使用`const`构造函数
- 合理使用`IndexedStack`
- 避免不必要的重建
- 使用`AutomaticKeepAliveClientMixin`保持页面状态

```dart
class HomeTab extends StatefulWidget {
  const HomeTab({super.key});

@override
  _HomeTabState createState() => _HomeTabState();
}

class _HomeTabState extends State<HomeTab>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

@override
  Widget build(BuildContext context) {
    super.build(context);
    return const Center(
      child: Text('首页'),
    );
  }
}
```

## 总结

本文详细介绍了Flutter中底部导航栏的实现方法，包括：

1. 基本的BottomNavigationBar实现
2. 自定义样式和动画效果
3. 页面状态管理和持久化
4. 自定义导航栏组件
5. 最佳实践和性能优化

建议：

- 根据应用需求选择合适的实现方式
- 注意页面状态管理和性能优化
- 保持代码的可维护性和可扩展性
- 遵循Material Design规范
- 做好用户体验设计

元素码农