当前位置：首页 > article >正文

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

article 2025/2/27 14:00:13

在这里插入图片描述

文章目录

- - 4. 导航与路由
  - 核心功能
  - - 4.1 基础跳转：`Navigator.push` 和 `Navigator.pop`
    - 4.2 命名路由：`routes` 和 `onGenerateRoute`
    - 4.3 路由传参和返回结果
  - 推荐工具：`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` 的使用

添加依赖：
```
dependencies:
  go_router: ^6.0.0
```

定义路由：

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(),
    ),
  ],
);

在 main.dart 中使用：

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

跳转和传参：

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

深度链接：

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);
      },
    ),
  ],
);