『Flutter』命名路由

原创

杨不易呀

修改于 2024-01-23 07:56:22

1820

修改于 2024-01-23 07:56:22

文章被收录于专栏：Flutter18Flutter18

1.前言

在上一篇文章中，我们介绍了如何使用 Flutter 中的导航器进行路由跳转，但是在实际开发中，我们往往会使用命名路由的方式进行跳转，本文将介绍如何使用命名路由进行跳转。

2.命名路由

2.1.命名路由简介

在 Flutter 中，命名路由（Named Routes）是一种使用预定义名称来管理和访问路由的机制。这种方法使代码更易于理解和维护，特别是在具有多个页面的复杂应用程序中。

2.2.常用属性

routes: 在 MaterialApp 或 CupertinoApp 中定义的路由表。它是一个映射，将字符串（即路由的名称）映射到对应的构建器函数。
onGenerateRoute: 当通过 Navigator.pushNamed 访问的路由名称在路由表中不存在时，这个回调函数被调用。
initialRoute: 应用程序启动时使用的首个路由的名称。
onUnknownRoute: 当 onGenerateRoute 也无法生成路由时调用的回调。

2.3.示例

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      initialRoute: '/second',
      routes: {
        '/': (context) => FirstScreen(),
        '/second': (context) => SecondScreen(),
      },
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Screen')),
      body: Center(
        child: ElevatedButton(
          child: Text('Navigate to second screen'),
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Screen')),
      body: Center(
        child: ElevatedButton(
          child: Text('Go back'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

在这个示例中，MaterialApp 的 routes 属性定义了两个路由：'/' 和 '/second'。点击按钮时，会使用 Navigator.pushNamed 方法跳转到第二个页面。

之前导航器的路由跳转示例中，我们使用的是 Navigator.push 方法，它需要传入一个 Route 对象，而 Navigator.pushNamed 方法则不需要传入 Route 对象，只需要传入路由名称即可。

注意：在使用命名路由时，如果没有指定 initialRoute 属性，则默认使用 '/' 作为初始路由。

如上的代码我来分别解释一下：

initialRoute: '/second'，这里指定了初始路由为 '/second'，所以应用启动后会直接跳转到第二个页面。(默认显示哪个标识对应的页面)
routes: {...}，这里定义了两个路由，'/' 和 '/second'，它们分别对应 FirstScreen 和 SecondScreen。(前面的是一个独一无二的标识，通过这个标识就能找到对应的页面)

3.参考资料

https://docs.flutter.dev/cookbook/navigation/named-routes

End

🐤如果您对本文有任何疑问或想法，请在评论区留言，我将很乐意与您交流。
🐰您的每一条评论对我都至关重要，我会尽快给予回复。
🎈如果您觉得这篇文章对您有所启发或帮助，请不吝赞赏、收藏或分享。
🎁您的每一个动作都是对我创作的最大鼓励和支持。
👍谢谢您的阅读和陪伴！

我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2024腾讯·技术创作特训营第五期

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2024腾讯·技术创作特训营第五期

登录后参与评论

0 条评论

热度