一周掌握Flutter开发--4、导航与路由

文章目录

• • • [4. 导航与路由](#4. 导航与路由)
    • 核心功能
    • • [4.1 基础跳转：`Navigator.push` 和 `Navigator.pop`](#4.1 基础跳转：Navigator.push 和 Navigator.pop)
      • [4.2 命名路由：`routes` 和 `onGenerateRoute`](#4.2 命名路由：routes 和 onGenerateRoute)
      • [4.3 路由传参和返回结果](#4.3 路由传参和返回结果)
    • 推荐工具：`go_router`
    • • [4.4 `go_router` 的使用](#4.4 go_router 的使用)
    • 总结*

4. 导航与路由

导航与路由是 Flutter 应用中管理页面跳转的核心功能。Flutter 提供了多种方式来实现页面导航，从简单的跳转到复杂的路由管理，开发者可以根据需求选择合适的方式。

---

核心功能

4.1 基础跳转：Navigator.push 和 Navigator.pop

• Navigator.push：跳转到新页面。

  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondScreen()),
  );

• Navigator.pop：返回上一页。

  Navigator.pop(context);

• 示例：

  class HomeScreen extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(title: Text('Home')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => SecondScreen()),
              );
            },
            child: Text('Go to Second Screen'),
          ),
        ),
      );
    }
  }
  
  class SecondScreen extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(title: Text('Second Screen')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              Navigator.pop(context);
            },
            child: Text('Go Back'),
          ),
        ),
      );
    }
  }

---

4.2 命名路由：routes 和 onGenerateRoute

• 命名路由：通过预定义路由表来管理页面跳转，适合页面较多或需要集中管理的场景。

• routes：定义路由表。

  void main() {
    runApp(MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/second': (context) => SecondScreen(),
      },
    ));
  }

• onGenerateRoute：动态生成路由，适合需要根据参数动态加载页面的场景。

  void main() {
    runApp(MaterialApp(
      initialRoute: '/',
      onGenerateRoute: (settings) {
        if (settings.name == '/second') {
          return MaterialPageRoute(
            builder: (context) => SecondScreen(),
            settings: settings,
          );
        }
        return null;
      },
    ));
  }

• 跳转到命名路由：

  Navigator.pushNamed(context, '/second');

---

4.3 路由传参和返回结果

• 传递参数：

  Navigator.pushNamed(
    context,
    '/second',
    arguments: 'Hello from HomeScreen',
  );
  
  // 在目标页面接收参数
  class SecondScreen extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      final String message = ModalRoute.of(context)!.settings.arguments as String;
      return Scaffold(
        appBar: AppBar(title: Text('Second Screen')),
        body: Center(child: Text(message)),
      );
    }
  }

• 返回结果：

  // 跳转并等待结果
  final result = await Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondScreen()),
  );
  
  // 返回结果
  Navigator.pop(context, 'Hello from SecondScreen');

---

推荐工具：go_router

go_router 是一个功能强大的第三方路由库，支持深度链接、嵌套路由和更复杂的路由场景。

4.4 go_router 的使用

1. 添加依赖：

   dependencies:
     go_router: ^6.0.0

2. 定义路由：

   import 'package:go_router/go_router.dart';
   
   final GoRouter router = GoRouter(
     routes: [
       GoRoute(
         path: '/',
         builder: (context, state) => HomeScreen(),
       ),
       GoRoute(
         path: '/second',
         builder: (context, state) => SecondScreen(),
       ),
     ],
   );

3. 在 main.dart 中使用：

   void main() {
     runApp(MaterialApp.router(
       routerConfig: router,
     ));
   }

4. 跳转和传参：

   context.go('/second', extra: 'Hello from HomeScreen');

5. 深度链接：

   final GoRouter router = GoRouter(
     routes: [
       GoRoute(
         path: '/',
         builder: (context, state) => HomeScreen(),
       ),
       GoRoute(
         path: '/second/:id', // 动态参数
         builder: (context, state) {
           final String id = state.params['id']!;
           return SecondScreen(id: id);
         },
       ),
     ],
   );

---

总结*

• 基础跳转 ：使用 Navigator.push 和 Navigator.pop。
• 命名路由 ：使用 routes 和 onGenerateRoute 集中管理路由。
• 路由传参和返回结果 ：通过 arguments 和 await 实现。
• 推荐工具 ：go_router 支持深度链接和嵌套路由，适合复杂应用。

掌握这些导航与路由的核心功能后，你可以轻松管理 Flutter 应用的页面跳转和路由逻辑。

---

结束语

Flutter是一个由Google开发的开源UI工具包，它可以让您在不同平台上创建高质量、美观的应用程序，而无需编写大量平台特定的代码。我将学习和深入研究Flutter的方方面面。从基础知识到高级技巧，从UI设计到性能优化，欢饮关注一起讨论学习，共同进入Flutter的精彩世界！