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

Flutter最简单的路由管理方式Navigator

article 2025/2/24 13:47:38

在这里插入图片描述

文章目录

- - 1. 基本路由
  - - 示例：
  - 2. 命名路由
  - - 步骤：
    - 示例：
  - 3. 传递参数
  - - 示例：
  - 4. 返回结果
  - - 示例：
  - 5. 动态路由生成
  - - 示例：
  - 总结

在Flutter应用开发中，路由管理是核心部分之一。对于简单的应用，推荐使用Flutter自带的Navigator和命名路由（Named Routes），这是最直接且易于维护的方式。

1. 基本路由

Flutter提供了Navigator类来管理路由栈，通过push和pop方法实现页面跳转和返回。

示例：

// 跳转到新页面
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen()),
);

// 返回上一页
Navigator.pop(context);

2. 命名路由

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

步骤：

定义路由表：在MaterialApp中设置routes参数。
跳转页面：使用Navigator.pushNamed方法。

示例：

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

// 跳转到命名路由
Navigator.pushNamed(context, '/second');

3. 传递参数

命名路由支持通过arguments参数传递数据。

示例：

// 跳转时传递参数
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)),
    );
  }
}

4. 返回结果

使用Navigator.push或Navigator.pushNamed时，可以通过await等待返回结果。

示例：

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

// 返回结果
Navigator.pop(context, 'Hello from SecondScreen');

5. 动态路由生成

对于需要动态生成路由的场景，可以使用onGenerateRoute。

示例：

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