概念

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

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

使用方法

1. MaterialPageRoute

此次开发中使用的例子如下： 

1
2
3
 Navigator.of(context).push(MaterialPageRoute(builder: (context) {
      return WebViewWidget(url: url); //要跳转到的页面，其中url为要传递的参数
    }));

2. PageRouteBuilder

此次开发中使用的例子： 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
Navigator.of(context).push(
      Transitions.slideIn(
        widget: MyPageAppSettingView(),
      ),
    );
    //Transitions的sideIn
  //static Route slideIn({
  //  Widget widget,
  //  Map<String, dynamic> params = const {},
  //}) =>
  //    PageTransition(
  //     child: widget,
  //      type: PageTransitionType.slideIn,
  //      childCurrent: params['childCurrent'],
  //      rSettings: params['settings'],
  //    );
  //其中PageTransition，继承PageRouteBuilder

路由表命名

在MaterialApp的routes下配置 

1
2
3
4
5
6
//定义规则就是前边定义路由名称，后边定义跳转页面
 routes: <String,WidgetBuilder> {
    '/': (context) => HomePage(),  
    '/login': (context) => LoginPage(),
    '/feedback': (context) => FeedBackPage(),
}
跳转时可用以下方法 
1
 Navigator.pushNamed(context, '/login');

传递参数

静态定义的传参
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
//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,
})

静态定义传参的接收 

1
2
3
4
5
MaterialApp(
   onGenerateRoute:(RouteSettings settings){
   settings.arguments
   ...
}

动态路由传参
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
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({key key,this.examId, this.type, this.total, this.minutes});

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

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

1
2
3
Navigator.pushNamed(context, '/knowledge',).then((value) async => {
            //刷新执行的代码
         });