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

1. 主入口文件

        import 'package:flutter/material.dart';
        import 'package:flutter_demo/BottomAppBarDemo.dart';
        
        void main(List<String> args) {
          runApp(new MyApp());
        }
        
        class MyApp extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            return MaterialApp(
              title: 'Flutter Demo',
              theme: ThemeData(primarySwatch: Colors.lightBlue),
              home: BottomAppBarDemo(),
            );
          }
        }

        这个文件我们首先定义了页面的骨架，其中包含标题，主题颜色，以及主界面home，接下来我们就需要编写BottomAppBarDemo.dart来实现主页面。

2. 子页面编写

        上篇文章中我们做的导航栏是每个子页面分别继承StatelessWidget写一个文件，且大部分代码相同。所以我们需要精简我们的代码，我们需要编写一个文件

eachView.dart来实现动态生成子页面。eachView需要继承StatefulWidget的可变控件，通过传递不同的参数实现不同的页面，代码如下：

        import 'package:flutter/material.dart';
        
        class EachView extends StatefulWidget {
          final String _title;
          EachView(this._title);
          @override
          _EachViewState createState() => _EachViewState();
        }
        
        class _EachViewState extends State<EachView> {
          @override
          Widget build(BuildContext context) {
            return Scaffold(
              appBar: AppBar(
                title: Text(widget._title),
              ),
              body: Center(
                child: Text(widget._title),
              ),
            );
          }
        }

        我们定义了一个变量_title用于表示子页面的标题，每次通过其他页面调用eachViewd的构造函数EachView(this._title)进行初始化，并创建子页面将传递的参数动态显示在子页面上。

        在开始写主页面开始之前我们需要了解一些控件，floatingActionButton，可交互浮动按键。它包括以下属性：

• onPressed ：点击相应事件，最常用的一个属性。

• tooltip：长按显示的提示文字。

• child ：放置子元素，一般放置Icon Widget。

        floatingActionButton: FloatingActionButton(    
            onPressed: (){        
              Navigator.of(context).push(MaterialPageRoute(builder:(BuildContext context){
                return EachView('New Page');
              }));
            },    
            tooltip: 'Increment',    
            child: Icon(
                Icons.add,
                color: Colors.white,
            ),
          ),

        上面的代码就是我们新建的floatingActionButton可交互浮动按键，点击它会生成一个我们前面介绍的子页面EachView传递'new page'参数过去。下面是完整的主页面代码：

        import 'package:flutter/material.dart';
        import 'page/eachView.dart';
        
        class BottomAppBarDemo extends StatefulWidget {
          BottomAppBarDemo({Key key}) : super(key: key);
        
          @override
          _BottomAppBarDemoState createState() => _BottomAppBarDemoState();
        }
        
        class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
          List<Widget> _eachView;
          int _index = 0;
        
          void initState() {
            super.initState();
            _eachView = List();
            _eachView..add(EachView('Home'))..add(EachView('Me'));
          }
        
          @override
          Widget build(BuildContext context) {
            return Scaffold(
              body: _eachView[_index],
              floatingActionButton: FloatingActionButton(
                onPressed: () {
                  Navigator.of(context)
                      .push(MaterialPageRoute(builder: (BuildContext context) {
                    return EachView('New Page');
                  }));
                },
                tooltip: 'Increment',
                child: Icon(
                  Icons.add,
                  color: Colors.white,
                ),
              ),
              floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
              bottomNavigationBar: BottomAppBar(
                color: Colors.lightBlue,
                shape: CircularNotchedRectangle(),
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    IconButton(
                        icon: Icon(Icons.home),
                        onPressed: () {
                          setState(() {
                            _index = 0;
                          });
                        },
                        color: Colors.white),
                    IconButton(
                        icon: Icon(Icons.airport_shuttle),
                        onPressed: () {
                          setState(() {
                            _index = 1;
                          });
                        },
                        color: Colors.white),
                  ],
                ),
              ),
            );
          }
        }

        运行程序初始化如下图：

        点击导航显示分别如下图

······