前端开发进阶篇——Flutter实战之导航

1. 入口文件编写

        我们先写一个主入口文件，包含了APP通用结构，最主要的是要引入自定义的BottomNavigationWidget组件。

        import 'package:flutter/material.dart';
        import 'bottomNavigationWidget.dart';
        
        void main(List<String> args) {
          runApp(new MyApp());
        }
        
        class MyApp extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            return MaterialApp(
              title: 'flutter bttom',
              theme: ThemeData.light(),
              home: BottomNavigationWidget(),
            );
          }
        }

2.bottomNavigationWidget.dart文件编写

            StatefulWidget具有可变状态(state)的窗口组件（widget）。使用这个要根据变化状态，调整State值。在lib目录下，新建一个bottomNavigationWidget.dart文件。

         @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.phone,
                  color:_bottomNavigationColor,
                ),
                title: Text(
                  'Phone',
                  style: TextStyle(color: _bottomNavigationColor),
                )
                ),
                BottomNavigationBarItem(icon: Icon(
                  Icons.email,
                  color:_bottomNavigationColor,
                ),
                title: Text(
                  'Email',
                  style: TextStyle(color: _bottomNavigationColor),
                )
                ),
              ],
              type: BottomNavigationBarType.fixed
              )
            );
          }

            现在只是一个静态的页面，下面的导航点击还没有效果。运行效果如下图：

3. 子页面编写

        子页面我们就采用只放入一个AppBar和一个Center，然后用Text Widget表明即可。先来写一个HomeScreen组件，新建一个page目录，然后在目录下面新建

HomePage.dart、page/PhonePage.dart、page/EmailPage.dart三个文件。

        import 'package:flutter/material.dart';
        
        class HomePage extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            return Scaffold(
              appBar:AppBar(
                title: Text('Home'),
              ),
              body: Center(
                child:Text('Home'),
              ),
            );
          }
        }

        我们要重新initState()方法，把刚才做好的页面进行初始化到一个Widget数组中。有了数组就可以根据数组的索引来切换不同的页面了。

        @override        
          void initState() {
            super.initState();
            pageList
              ..add(HomePage())
              ..add(EmailPage())
              ..add(PhonePage());
          }

        ..add()是Dart语言的..语法，返回调用者本身。

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

         onTap: (int index){
                setState(() {
                   _currentIndex = index;
                });
              },

        完整代码如下：

        import 'package:flutter/material.dart';
        import 'page/HomePage.dart';
        import 'page/PhonePage.dart';
        import 'page/EmailPage.dart';
        
        class BottomNavigationWidget extends StatefulWidget {
          @override
          _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
        }
        
        class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
          final _bottomNavigationColor = Colors.lightBlue;
          List<Widget> pageList = List();
          int _currentIndex = 0;
        
          @override
          void initState() {
            super.initState();
            pageList
              ..add(HomePage())
              ..add(EmailPage())
              ..add(PhonePage());
          }
        
          @override
          Widget build(BuildContext context) {
            return Scaffold(
              body: pageList[_currentIndex],
              bottomNavigationBar: BottomNavigationBar(items: [
                BottomNavigationBarItem(icon: Icon(
                  Icons.home,
                  color:_bottomNavigationColor,
                ),
                title: Text(
                  'Home',
                  style: TextStyle(color: _bottomNavigationColor),
                )
                ),
                BottomNavigationBarItem(icon: Icon(
                  Icons.phone,
                  color:_bottomNavigationColor,
                ),
                title: Text(
                  'Phone',
                  style: TextStyle(color: _bottomNavigationColor),
                )
                ),
                BottomNavigationBarItem(icon: Icon(
                  Icons.email,
                  color:_bottomNavigationColor,
                ),
                title: Text(
                  'Email',
                  style: TextStyle(color: _bottomNavigationColor),
                )
                ),
              ],
              currentIndex: _currentIndex,
              onTap: (int index){
                setState(() {
                   _currentIndex = index;
                });
              },
              type: BottomNavigationBarType.fixed
              )
            );
          }
        }

        运行结果如下：