【Flutter】路由与导航：基础路由与导航

在构建 Flutter 应用时，页面间的导航是不可避免的。当应用规模逐渐扩大时，我们常常需要在不同页面之间进行跳转，并且需要管理页面栈，处理页面之间的数据传递。Flutter 提供了一套强大且灵活的导航和路由管理机制，主要通过 Navigator 来管理页面的跳转与返回。本文将详细介绍如何使用 Navigator 实现基础的路由与导航，包括如何在不同页面之间跳转、返回以及如何传递参数。

Navigator 简介

Navigator 是 Flutter 提供的用于管理页面导航的核心组件。它的内部维护了一个 页面栈（stack） ，每当你导航到新页面时，新页面会被压入栈顶，返回时会从栈顶弹出页面。我们可以通过 push() 方法将页面添加到栈中，通过 pop() 方法从栈中移除页面。

常用方法

Navigator.push()：将一个新的页面压入栈顶，展示该页面。
Navigator.pop()：从栈顶移除页面，返回到上一页面。

示例

dart 复制代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(), // 应用的初始页面
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Page'),
          onPressed: () {
            // 使用 Navigator.push 跳转到第二个页面
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Back to First Page'),
          onPressed: () {
            // 使用 Navigator.pop 返回到第一个页面
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

代码解析

Navigator.push ：在 FirstPage 中，我们使用 Navigator.push 将 SecondPage 压入栈中并进行页面跳转。
Navigator.pop ：在 SecondPage 中，我们使用 Navigator.pop 返回到 FirstPage，即从页面栈顶移除当前页面。

页面栈的管理

Flutter 的导航系统基于栈的概念，因此每次导航都会将页面压入栈顶，而 Navigator.pop() 则会将当前页面从栈顶移除并返回到上一页面。理解这一点对于有效管理页面的跳转和返回非常重要。

示例：从第三个页面返回到第一个页面

dart 复制代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Page'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Third Page'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => ThirdPage()),
            );
          },
        ),
      ),
    );
  }
}

class ThirdPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Third Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Back to First Page'),
          onPressed: () {
            // 连续调用 Navigator.pop() 返回到第一个页面
            Navigator.popUntil(context, ModalRoute.withName('/'));
          },
        ),
      ),
    );
  }
}

代码解析

Navigator.popUntil() ：可以在页面栈中向后弹出页面，直到指定的路由为止。在这里，ModalRoute.withName('/') 返回到应用的根页面（FirstPage）。

命名路由

虽然通过 MaterialPageRoute 构建路由跳转非常灵活，但在大型应用中，页面多了以后可能会让路由管理变得繁琐。为此，Flutter 提供了 命名路由 来简化页面导航。

设置命名路由

在 MaterialApp 中，可以通过 routes 参数定义应用的命名路由。

dart 复制代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 定义命名路由
      routes: {
        '/': (context) => FirstPage(),
        '/second': (context) => SecondPage(),
        '/third': (context) => ThirdPage(),
      },
      initialRoute: '/', // 初始路由
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Page'),
          onPressed: () {
            // 使用命名路由跳转到第二个页面
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Third Page'),
          onPressed: () {
            Navigator.pushNamed(context, '/third');
          },
        ),
      ),
    );
  }
}

class ThirdPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Third Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Back to First Page'),
          onPressed: () {
            Navigator.popUntil(context, ModalRoute.withName('/'));
          },
        ),
      ),
    );
  }
}

代码解析

routes 参数 ：定义了页面与路由名称的映射。在本例中，/ 对应 FirstPage，/second 对应 SecondPage，/third 对应 ThirdPage。
Navigator.pushNamed() ：使用命名路由进行页面跳转，简化了手动构建 MaterialPageRoute 的步骤。

传递参数

在实际项目中，页面之间的跳转往往需要传递参数，比如从列表页面跳转到详情页面时，我们需要传递某个列表项的数据。在 Flutter 中，既可以在使用 Navigator.push 的时候传递参数，也可以在使用命名路由时传递参数。

使用 `Navigator.push` 传递参数

dart 复制代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Page'),
          onPressed: () {
            // 跳转到第二个页面并传递参数
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => SecondPage(message: 'Hello from First Page!'),
              ),
            );
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  final String message;
  SecondPage({required this.message});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child:

 Text(message), // 显示传递的参数
      ),
    );
  }
}

代码解析

message 参数传递 ：在 FirstPage 中，我们将 message 参数通过 MaterialPageRoute 传递给 SecondPage。在 SecondPage 中，通过构造函数接收参数，并在 UI 中展示。

使用命名路由传递参数

使用命名路由时，可以通过 Navigator.pushNamed 的 arguments 参数来传递数据。

dart 复制代码

Navigator.pushNamed(
  context,
  '/second',
  arguments: 'Hello from First Page!',
);

在目标页面中，通过 ModalRoute.of(context) 来接收参数：

dart 复制代码

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)!.settings.arguments as String;

    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Text(args), // 显示传递的参数
      ),
    );
  }
}

总结

通过本教程，你已掌握了 Flutter 中的基础路由与导航的使用。以下是本教程的重点：

页面跳转与返回 ：使用 Navigator.push() 和 Navigator.pop() 实现基本的页面跳转与返回。
命名路由 ：通过 routes 参数定义路由表，并使用 Navigator.pushNamed() 进行页面跳转。
页面栈管理 ：理解页面栈的概念，使用 Navigator.popUntil() 返回到指定页面。
参数传递 ：学会在页面之间传递参数，既可以通过 Navigator.push()，也可以通过 Navigator.pushNamed()。

掌握这些基本的导航技巧后，你将能够轻松地在 Flutter 应用中实现页面间的跳转和状态传递。

【Flutter】路由与导航：基础路由与导航

Navigator 简介

常用方法

示例

代码解析

页面栈的管理

示例：从第三个页面返回到第一个页面

代码解析

命名路由

设置命名路由

代码解析

传递参数

使用 Navigator.push 传递参数

代码解析

使用命名路由传递参数

总结

使用 `Navigator.push` 传递参数