Flutter底部导航栏插件bottom的使用

由于提供的内容和示例代码与 Flutter 底部导航栏无关，我将根据 Flutter 底部导航栏的常见用法来编写一个符合要求的示例。以下是关于如何在 Flutter 中使用底部导航栏的完整示例：

Flutter底部导航栏插件bottom的使用

简介

在 Flutter 中，底部导航栏通常用于在应用的不同页面之间进行切换。BottomNavigationBar 是一个非常常用的组件，可以用来实现这一功能。

示例代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Bottom Navigation Bar'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      '首页',
      style: optionStyle,
    ),
    Text(
      '搜索',
      style: optionStyle,
    ),
    Text(
      '设置',
      style: optionStyle,
    ),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: '搜索',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: '设置',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

解释

1. 导入包:

   import 'package:flutter/material.dart';
   

   导入 flutter 的核心包。

2. 主应用类:

   void main() => runApp(MyApp());
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: MyHomePage(title: 'Flutter Bottom Navigation Bar'),
       );
     }
   }
   

   定义了主应用类 MyApp，并设置了应用的基本配置。

3. 主页类:

   class MyHomePage extends StatefulWidget {
     MyHomePage({Key key, this.title}) : super(key: key);
   
     final String title;
   
     @override
     _MyHomePageState createState() => _MyHomePageState();
   }
   

   定义了主页类 MyHomePage，并在其中定义了一个状态类 _MyHomePageState。

4. 状态类:

   class _MyHomePageState extends State<MyHomePage> {
     int _selectedIndex = 0;
     static const TextStyle optionStyle =
         TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
     static const List<Widget> _widgetOptions = <Widget>[
       Text(
         '首页',
         style: optionStyle,
       ),
       Text(
         '搜索',
         style: optionStyle,
       ),
       Text(
         '设置',
         style: optionStyle,
       ),
     ];
   
     void _onItemTapped(int index) {
       setState(() {
         _selectedIndex = index;
       });
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text(widget.title),
         ),
         body: Center(
           child: _widgetOptions.elementAt(_selectedIndex),
         ),
         bottomNavigationBar: BottomNavigationBar(
           items: const <BottomNavigationBarItem>[
             BottomNavigationBarItem(
               icon: Icon(Icons.home),
               label: '首页',
             ),
             BottomNavigationBarItem(
               icon: Icon(Icons.search),
               label: '搜索',
             ),
             BottomNavigationBarItem(
               icon: Icon(Icons.settings),
               label: '设置',
             ),
           ],
           currentIndex: _selectedIndex,
           selectedItemColor: Colors.amber[800],
           onTap: _onItemTapped,
         ),
       );
     }
   }