【Flutter——路由导航】_flutter route

Flutter路由导航

一、路由管理

1.1 Route（路由）

在Flutter中，Route（路由）是一个抽象类，用于将一个页面包装成一个路由，并提供统一的管理。常见的路由类有MaterialPageRoute和CupertinoPageRoute，它们分别用于Android风格和iOS风格的页面切换效果。

要创建一个路由，可以继承PageRoute类并实现其中的抽象方法。一般情况下，我们使用MaterialPageRoute或CupertinoPageRoute来直接创建路由。

常用的路由属性和方法有：

• settings：路由的配置和信息。
• buildPage(BuildContext context, Animation animation, Animation secondaryAnimation)：构建路由对应的Widget。
• canTransitionTo(TransitionRoute nextRoute)：判断是否可以跳转到下一个路由。
• canTransitionFrom(TransitionRoute previousRoute)：判断是否可以从上一个路由返回。

1.2 MaterialPageRoute

MaterialPageRoute是用于实现Android风格的页面切换效果的路由类。它继承自PageRoute类，提供了一些Android特有的过渡效果。

常用的MaterialPageRoute构造函数参数如下：

• builder：用于构建路由对应的Widget。
• settings：用于配置和传递路由的信息。

MaterialPageRoute(
  builder: (context) => MyPage(),
  settings: RouteSettings(name: '/myRoute'),
)
1
2
3
4

在上述例子中，通过builder属性指定了路由对应的Widget，通过settings属性传递了路由的配置信息。

1.3 Navigator（导航器）

Navigator是一个管理所有路由的Widget，在Flutter中，我们可以使用MaterialApp、CupertinoApp、WidgetsApp等Widget来创建导航器。

导航器通过使用一个栈（Stack）来管理所有的路由，当我们在应用程序中进行页面跳转时，实际上是新建一个路由并将其推入栈中，从而实现页面切换。

常用的Navigator方法有：

• push(Route route)：将给定的路由推入导航器堆栈。
• pushNamed(String routeName, {Object arguments})：根据给定的路由名称跳转到对应的命名路由，并可以传递参数。
• pop([result])：将当前路由从导航器堆栈中弹出，并返回一个值给上一个路由。
• popUntil(RoutePredicate predicate)：弹出导航器堆栈中直到满足给定条件的路由。

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => MyPage()),
);
1
2
3
4

在上述例子中，通过调用Navigator.push方法将一个新的路由（MyPage）推入导航器的栈中。

1.4 路由传值

在Flutter中，通过路由传递数据可以使用两种方式：

1. 在构建路由时，通过构造函数参数传递数据。

class MyPage extends StatelessWidget {
  final String data;

  MyPage({required this.data});

  @override
  Widget build(BuildContext context) {
    return Text(data);
  }
}

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => MyPage(data: 'Hello')),
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在目标页面的构建方法中，可以通过widget对象获取传递的数据。

1. 使用路由的settings属性传递数据。

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String? data = ModalRoute.of(context)!.settings.arguments as String?;
    return Text(data ?? 'No data');
  }
}

Navigator.pushNamed(
  context,
  '/myRoute',
  arguments: 'Hello',
);
1
2
3
4
5
6
7
8
9
10
11
12
13

在目标页面中，可以通过ModalRoute.of(context).settings.arguments获取传递的参数。

1.5 命名路由

命名路由是一种在应用程序中统一管理页面跳转的方式。通过在MaterialApp中设置initialRoute和routes属性，我们可以定义多个路由的名称以及对应的页面。

例如：

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomePage(),
    '/details': (context) => DetailsPage(),
  },
)
1
2
3
4
5
6
7

在这个例子中，/和/details都是两个命名路由，分别对应了HomePage和DetailsPage两个页面。

在使用命名路由进行页面跳转时，可以使用Navigator.pushNamed方法。

Navigator.pushNamed(context, '/details');
1

1.6 命名路由参数传递

在命名路由的情况下，要传递参数可以使用arguments属性。

Navigator.pushNamed(context, '/details', arguments: {'id': 1});
1

在目标页面中，可以通过ModalRoute.of(context).settings.arguments来获取传递的参数。

dart复制代码class DetailsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Map<String, dynamic> arguments =
        ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>;
    int id = arguments['id'];
    return Text('ID: $id');
  }
}
1
2
3
4
5
6
7
8
9

1.7 适配

在不同的平台和设备上，路由可以有不同的表现。为了适配不同的平台和设备，我们可以使用Platform.isX属性来判断当前运行的平台。

例如，根据平台的不同，设置不同的路由效果。

PageRouteBuilder(
  pageBuilder: (context, animation, secondaryAnimation) => Platform.isIOS
      ? CupertinoPage()
      : MaterialPage(),
)
1
2
3
4
5

二、路由钩子

在Flutter中，可以通过路由钩子函数来对路由进行管理和拦截。常见的路由钩子函数有：

• onGenerateRoute：为未定义的命名路由生成对应的路由。
• onUnknownRoute：为无法匹配的路由生成默认的错误页面。
• onPopPage：当用户尝试通过返回按钮或手势退出路由时执行。

这些路由钩子函数可用于自定义路由跳转逻辑，例如动态生成路由、处理未知路由、拦截返回操作等。

三、onUnknownRoute详细介绍

onUnknownRoute是Navigator的一个回调函数，用于在导航器无法匹配到指定的命名路由时执行。该函数接受一个RouteSettings参数，其中包含了未知路由的名称。

可以通过设置onUnknownRoute来为无法匹配的路由生成默认的错误页面，示例代码如下：

MaterialApp(
  initialRoute: '/',
  onUnknownRoute: (settings) {
    return MaterialPageRoute(builder: (_) => ErrorPage());
  },
)
1
2
3
4
5
6

在上述代码中，如果访问的路由名称根本不存在，就会跳转到ErrorPage页面。

通过使用onUnknownRoute，我们可以为应用程序提供更好的错误处理机制，提高用户体验。

四、总结

1. 在Flutter中，使用路由（Route）来管理页面的跳转和切换效果，常见的路由类有MaterialPageRoute和CupertinoPageRoute。
2. 使用Navigator作为导航器来管理所有的路由，通过push、pushNamed和pop等方法实现页面之间的跳转。
3. 可以通过构造函数参数或settings属性，在路由之间传递数据。
4. 命名路由可以统一管理页面跳转，通过initialRoute和routes属性设置路由名称和对应的页面。
5. 在不同平台和设备上，可以根据Platform.isX属性设置不同的路由效果进行适配。
6. 路由钩子函数（onGenerateRoute、onUnknownRoute和onPopPage）可以自定义路由跳转逻辑，处理未知路由和拦截返回操作。
7. onUnknownRoute是一个回调函数，在导航器无法匹配到指定的命名路由时执行，可以用于生成默认的错误页面。