Flutter - 路由

Flutter中，路由管理主要有两个类：Route和Navigator

• Route是一个抽象类，可以使用MaterialPageRoute，或者iOS的CupertinoPageRoute
• Navigator是管理所有的Route的Widget，通过一个Stack来进行管理的，不需要我们手动创建，直接使用就行。

基本push&pop

CupertinoButton(
            child: Text('push'),
            onPressed: (){
              Navigator.of(ctx).push(MaterialPageRoute(builder: (ctx){
                  return HJEventResponsePage();
              }));
            },
          ),

返回pop

CupertinoButton(
            child: Text('pop'),
            onPressed: (){
              /// 带参数
              Navigator.of(context).pop('from detail');
            },
          ),

获取pop回来的参数

Future result = Navigator.push(ctx, MaterialPageRoute(builder: (ctx){
      return HJEventResponsePage();
    }));
    result.then((value) {
      //print(value);
      setState(() {
       ///获取pop回的参数显示
        _message = value;
      });
    });

命名路由

命名路由是将名字和路由的映射关系，在一个地方进行统一的管理，这样我们可以通过Navigator.pushNamed() 方法来跳转到新的页面

MaterialApp(
       // home: HJRouteTestPage(),
      ///设置应用程序从哪一个路由开始启动，设置了该属性，就不需要再设置home属性了
      initialRoute: '/',
      routes: {
        HJRouteAboutPage.routeName: (ctx) => HJRouteAboutPage(),
        HJRouteTestPage.routeName:(ctx) => HJRouteTestPage()
      },
    );

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HJRouteAboutPage extends StatelessWidget {

  static const String routeName = '/hjabout';

  @override
  Widget build(BuildContext context) {
    /// 拿到命名路由传递的参数
    final _msg = ModalRoute.of(context).settings.arguments;


    return Scaffold(
      appBar: AppBar(
        title: Text('关于页'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(_msg),
            CupertinoButton(child: Text('返回'), onPressed: (){
              Navigator.pop(context);
            })
          ],
        ),
      ),
    );
  }
}

跳转

Navigator.pushNamed(ctx, HJRouteAboutPage.routeName,arguments: 'from route test');

/// 拿到命名路由传递的参数
final _msg = ModalRoute.of(context).settings.arguments;

路由钩子

///找不到路由时调用, 跳转的界面需要参数，命名路由不太方便
      onGenerateRoute: (settings){
        if (settings.name == HJRouteDetailPage.routeName){
          return MaterialPageRoute(builder: (ctx){
            return HJRouteDetailPage(settings.arguments);
          });
        }
        return null;
      },
      
 /// 未找到路由，跳转统一界面
      onUnknownRoute: (settings){
        return MaterialPageRoute(builder: (ctx){
          return HJRouteUnknownPage();
        });
      },

实际项目里大部分可能使用get库一套的状态管理，路由等，用起来也方便，可以了解了解，以及getx插件的使用。