Flutter 底部导航栏

Flutter 提供了一个内置的部件 BottomNavigationBar 用于创建底部导航栏。这个部件通常在一个 Scaffold 部件中使用，它允许您在应用程序的主屏幕底部显示几个屏幕并在屏幕之间切换。

如何使用 BottomNavigationBar

要使用 BottomNavigationBar，您需要遵循以下步骤：

1. 创建一个底部导航栏，指定每个项目的图标和标签。
2. 实现在底部导航栏中选择一个项目时要发生的操作。
3. 将底部导航栏添加到 Scaffold 中。

示例

下面是一个简单的示例，演示了如何使用 BottomNavigationBar：

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

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  static const List<Widget> _widgetOptions = [
    Text('Index 0: Home'),
    Text('Index 1: Business'),
    Text('Index 2: School'),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Bottom Navigation Bar'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

此示例创建了一个带有三个屏幕的底部导航栏。每个屏幕都具有不同的标签和图标，并在选择时显示相应屏幕的内容。

细节

以下是底部导航栏的一些要点：

• BottomNavigationBar 必须放置在一个 Scaffold 内。
• items 属性是导航栏项目的列表，每个项目都用 BottomNavigationBarItem 部件表示。每个项目包括一个图标和一个标签。
• currentIndex 属性是当前所选项目的索引。
• onTap 属性定义了当用户选择一个项目时要执行的回调函数。
• selectedItemColor 属性可以为所选项目的标签和图标指定颜色。

结论

Flutter 底部导航栏是一个非常有用的部件，适用于许多不同的应用程序和用例。使用 BottomNavigationBar，可以轻松地创建美观和易于导航的应用程序。