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){
                            ...
                 }
               }
         });

五、小结

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

最后编辑于：2021.04.25 10:37:12