Flutter（一）：用BottomNavigationBar实现常规的底部导航

常规底部导航

现在随便打开一个APP 上面都会在屏幕最下方有一排的按钮，点击不同的按钮可以进入不同的界面。就是说在界面的底部会有一排的按钮导航。

效果图如下：

接下来开始撸代码了：

1. 首先创建flutter框架 在lib目录下创建Bottom_navigation_widget.dart文件，文件代码如下：

import 'package:flutter/material.dart';
class BottomNavigationWidget extends StatefulWidget {
  _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}
class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  final _BottomNavigationColor = Colors.blue;
  @override
  Widget build(BuildContext context) {
     return Scaffold(
       bottomNavigationBar: BottomNavigationBar(
         items: [
           BottomNavigationBarItem(
             icon:Icon(
               Icons.home,
               color:_BottomNavigationColor,
             ),
             title:Text(
               'Home',
               style:TextStyle(color:_BottomNavigationColor)
             )
           ),
           BottomNavigationBarItem(
             icon:Icon(
               Icons.email,
               color:_BottomNavigationColor,
             ),
             title:Text(
               'Email',
               style:TextStyle(color:_BottomNavigationColor)
             )
           ),
           BottomNavigationBarItem(
             icon:Icon(
               Icons.pages,
               color:_BottomNavigationColor,
             ),
             title:Text(
               'Pages',
               style:TextStyle(color:_BottomNavigationColor)
             )
           ),
           BottomNavigationBarItem(
             icon:Icon(
               Icons.airplay,
               color:_BottomNavigationColor,
             ),
             title:Text(
               'AirPlay',
               style:TextStyle(color:_BottomNavigationColor)
             )
           ),
         ],
         type:BottomNavigationBarType.fixed
       ),
     );
  }
}
复制代码

2. 在lib\main.dart文件添加相关代码

import 'package:flutter/material.dart';
import 'Bottom_navigation_widget.dart';  //在lib目录下面创建Bottom_navigation_widget.dart文件，并引用
void main()=>runApp(new MyApp());
class MyApp extends StatelessWidget {
  final Widget child;
  MyApp({Key key, this.child}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '底部导航',
      theme: ThemeData(primarySwatch: Colors.yellow,),
      home: BottomNavigationWidget(),
    );
  }
}
复制代码

3.在lib目录下创建pages,并在Bottom_navigation_widget.dart文件中引用

import 'pages/home_screen.dart';
import 'pages/email_screen.dart';
import 'pages/pages_screen.dart';
import 'pages/airplay_screen.dart';
复制代码

4. 我们要重新initState()方法，把刚才做好的页面进行初始化到一个Widget数组中。有了数组就可以根据数组的索引来切换不同的页面了。这是现在几乎所有的APP采用的方式。 代码如下：

  List<Widget> list = List();
  @override
  void initState(){
    list
      ..add(HomeScreen())
      ..add(EmailScreen())
      ..add(PagesScreen())
      ..add(AirplayScreen());
    super.initState();
  }
复制代码

BottomNavigationBar组件里提供了一个相应事件onTap，这个事件自带一个索引值index，通过索引值我们就可以和我们list里的索引值相对应了。

       onTap:(int index){
           setState((){
             _currentIndex= index;
           });
         },
复制代码

以上就是底部导航的相关代码了，希望对您有所帮助，稍后会陆续更新flutter常用组件。 github：github.com/yuckyb/flut…