Flutter-路由

一、概念

在flutter中路由也是用来处理页面跳转、页面数据传递等操作，主要是通过路由（Route）和导航器（Navigator）来配合实现。主要包含两种实现方式：路由表和Route

二、Navigator

Navigator主要负责页面路由的堆栈管理和操作，例如添加跳转页面或者移除页面等。主要操作包含：

• push 自定义使用Route子类进行操作
• of 实例化Navigator
• pop 从路由堆栈中移除，弹出页面
• canPop 判断当前页面是否可进行pop操作，返回值为bool值
• maybePop 判断页面能否弹出，如弹出到首页仅剩一个页面，则不进行弹出操作
• popAndPushNamed 将当前页面pop，并指定指定跳转页面
• popUntil 从当前页面开始pop,直到指定页面
• pushAndRemoveUntil 移除所有页面，然后跳转至指定页面
• pushNamed 通过路由表命名跳转
• pushNamedAndRemoveUntil 将指定命名页面加入到路由中，并移除之前的所有路由堆栈
• replace 路由替换
• removeRoute 路由移除
• pushReplacement 把当前页面在路由堆栈中的位置替换为跳转的页面
• pushReplacementNamed 把当前页面在路由堆栈中的位置替换为命名的跳转页面

三、Route和路由表

Route在flutter中主要有两种使用方法：
1. MaterialPageRoute 灵活使用，不需要配置路由表，也可以传递参数。

  MaterialPageRoute({
    @required this.builder,
    RouteSettings settings,
    this.maintainState = true,
    bool fullscreenDialog = false,
  })

FlatButton(
     child: Text(
               '跳转示例',
                style: TextStyle(
                          color: Colors.white,
                          fontSize: 16.0,
                          fontWeight: FontWeight.bold),
                       ),
     onPressed: (){
                Navigator.of(context).push(MaterialPageRoute(builder: (_){
                     return SnailHomePage();
                      }));
             },
      )                          

2. PageRouteBuilder

  PageRouteBuilder({
    RouteSettings settings, //路由设置
    @required this.pageBuilder,    //目标页面
    this.transitionsBuilder = _defaultTransitionsBuilder, //过渡动画
    this.transitionDuration = const Duration(milliseconds: 300), //过渡时间
    this.opaque = true,
    this.barrierDismissible = false,
    this.barrierColor,
    this.barrierLabel,
    this.maintainState = true,
    bool fullscreenDialog = false,
  })

PageRouteBuilder 可以设置更丰富的跳转动画和效果
路由表

//定义规则就是前边定义路由名称，后边定义跳转页面
 routes: <String,WidgetBuilder> {
    '/': (context) => HomePage(),  
    '/login': (context) => LoginPage(),
    '/feedback': (context) => FeedBackPage(),
}

四、路由传参

静态定义的传参方法：
1 通过key、value传值

Navigator.pushNamed(context,"/examPage",
        arguments:<String,String>{
             "city": "XiAn",
             "exmaId": "1006",
})

2 通过object传值

class ExamMessage{
   ExamMessage({this.city,this.examId});
   final String city;
   final int examId;
}

Navigator.pushNamed(context,"/examPage",
        arguments:ExamMessage{
             "city": "XiAn",
             "exmaId": 1006,
})

3 接收传值

MaterialApp(
   onGenerateRoute:(RouteSettings settings){
   settings.arguments
   ...
}

动态路由传参方法实现：

Navigator.of(context).push(MaterialPageRoute(builder: (_)=>ExaminationPaper(
            examId: examContinueId,
            type: 2)));


//接收页接收参数
class ExaminationPaper extends StatefulWidget {
  final int examId;
  final int type;
  final int total;
  final int minutes;

  ExaminationPaper({this.examId, this.type, this.total, this.minutes});

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

四、使用示例

登陆成功，销毁登录页之前的路由堆栈

Navigator.of(context).pushNamedAndRemoveUntil('/',(route)=>false);

当前页面跳转后信息改变，返回刷新

Navigator.pushNamed(context, '/knowledge',).then((value) async => {
                        if (mounted){
                            ...
                 }
               }
         });

五、小结

目前所使用到的路由情况总结如上，后续有新的使用会继续更新总结。