Android-Flutter-BottomNavigationBar：该如何优雅实现底部导航栏？

在Flutter中，BottomNavigationBar是一个常用的组件，用于实现底部导航栏的功能。以下是一个简单的例子，展示如何优雅地实现一个带有三个标签的底部导航栏：

import 'package:flutter/material.dart';
 
class BottomNavigationBarExample extends StatefulWidget {
  @override
  _BottomNavigationBarExampleState createState() =>
      _BottomNavigationBarExampleState();
}
 
class _BottomNavigationBarExampleState extends State<BottomNavigationBarExample> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Icon(Icons.home, size: 50),
    Icon(Icons.email, size: 50),
    Icon(Icons.settings, size: 50),
  ];
 
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
          BottomNavigationBarItem(icon: Icon(Icons.email), title: Text('Email')),
          BottomNavigationBarItem(icon: Icon(Icons.settings), title: Text('Settings')),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}
 
void main() {
  runApp(MaterialApp(
    home: BottomNavigationBarExample(),
  ));
}

这段代码创建了一个带有三个标签的BottomNavigationBar，每个标签对应一个图标和文本。通过点击底部导航栏的不同项，可以切换当前显示的页面内容。_onItemTapped方法用于更新_selectedIndex的值，这会导致Scaffold的body更新，显示对应的页面内容。这种方式简洁明了，并且易于扩展和维护。