1、Flutter Navigator(页面导航) & bottomNavigationBar(底部导航)

回顾Flutter自研项目中的两个知识点：Navigator跟bottomNavigationBar。
首先，Navigator理解为页面导航，主要运用push跟pop两个方法。push将元素添加到堆栈的顶部，pop从同一堆栈中删除顶部元素。

push方法具体使用方式，（push就不介绍了）如下：

pushNamed：

这种路由需要一开始现在创建App的时候定义

newMaterialApp(
        ....
        routes: {
            "nameRoute":(BuildContext context)=>newSecondPage(),
        },
);

然后就可以在程序中使用Navigator.pushNamed来跳转
Navigator.pushNamed(context, "nameRoute");
这种路由的缺点是不能传递参数。

pushReplacement 和 pushReplacementNamed：

二者都是用来替代当前栈中栈顶元素. 只是接口的调用方式不同。

pushAndRemoveUntil 和 pushNamedAndRemoveUntil：

typedef RoutePredicate = bool Function(Route<dynamic> route);
//第一个参数context是上下文的context，
//第二个参数newRouteName是新的路由所命名的路径
//第三个参数predicate，返回值是bool类型，按照我的理解，就是用来判断Until所结
//束的时机，如果为false的话，就会一直继续执行Remove的操作，直到为true的时候，停止Remove操作，然后才执行push操作。
  static Future<T> pushNamedAndRemoveUntil<T extends Object>(BuildContext context, String newRouteName, RoutePredicate predicate) {
    return Navigator.of(context).pushNamedAndRemoveUntil<T>(newRouteName, predicate);
  }

如果想在弹出新路由之前，删除路由栈中的所有路由，那可以使用下面的这种写法，(Route route) => false，这样能保证把之前所有的路由都进行删除，然后才push新的路由。
Navigator.of(context).pushNamedAndRemoveUntil('/LoginScreen', (Route<dynamic> route) => false);
如果想在弹出新路由之前，删除路由栈中的部分路由。利用ModalRoute.withName(name)，来执行判断，可以看下面的源码，当所传的name跟堆栈中的路由所定义的时候，会返回true值，不匹配的话，则返回false。

Navigator.of(context).pushNamedAndRemoveUntil('/screen4',ModalRoute.withName('/screen1'));
 
 //ModalRoute.withName的源码
   static RoutePredicate withName(String name) {
    return (Route<dynamic> route) {
      return !route.willHandlePopInternally
          && route is ModalRoute
          && route.settings.name == name;
    };
  }

bool pop(BuildContext context, [ result ]):
将栈顶路由出栈，result为页面关闭时返回给上一个页面的数据。

popUntil()

popUntil()方法的过程其实跟上面差不多，就是是少了push一个新页面的操作，只是单纯的进行移除路由操作。

popUntil(RoutePredicate predicate);
Navigator.of(context).popUntil(ModalRoute.withName("/XXX"));

bottomNavigationBar(底部导航)

底部导航一般在首页生命使用，简要描述一下使用流程：
入口：状态可变的组件：HomePage build方法中创建脚手架Scaffold，设置Scaffold的bottomNavigationBar。
bottomNavigationBar的组成：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _bulidBody(),//底部tab按键对应page
      bottomNavigationBar: _buildButtomNavBar(),//创建底部导航
    );
  }
Widget _buildButtomNavBar(){
    BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(...),
          BottomNavigationBarItem(...),
          BottomNavigationBarItem(...),
          BottomNavigationBarItem(...),
        ],
        onTap: _onSelectTab,
    )
}

onTap按键切换时调用该方法，API使用方式(int index){......}，_onSelectTab中调用setState方法来刷新当前UI。

最后编辑于：2019.05.05 17:15:47