使用命名路由进行导航

在导航到新屏幕并返回 教程中， 您学习了如何通过创建新路由并将其推送到Navigator 来导航到新屏幕。

但是，如果您需要在应用程序的许多部分导航到同一个屏幕，这种方法会导致代码重复。 解决方案是定义一个_命名路由_，并使用命名路由进行导航。

要使用命名路由，请使用Navigator.pushNamed() 函数。 此示例复制了原始教程中的功能，演示了如何使用以下步骤使用命名路由：

1. 创建两个屏幕。
2. 定义路由。
3. 使用 Navigator.pushNamed() 导航到第二个屏幕。
4. 使用 Navigator.pop() 返回到第一个屏幕。

首先，创建两个屏幕。第一个屏幕包含一个按钮，该按钮导航到第二个屏幕。第二个屏幕包含一个按钮，该按钮导航回第一个屏幕。

import 'package:flutter/material.dart';

class FirstScreen extends StatelessWidget {
  const FirstScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 点击时导航到第二个屏幕。
          },
          child: const Text('Launch screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 点击时导航回第一个屏幕。
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

接下来，通过向MaterialApp 构造函数提供附加属性来定义路由：initialRoute 和 routes 本身。

initialRoute 属性定义应用程序应该从哪个路由开始。 routes 属性定义可用的命名路由以及导航到这些路由时要构建的小部件。

MaterialApp(
  title: 'Named Routes Demo',
  // 使用 "/" 命名路由启动应用程序。在这种情况下，应用程序从 FirstScreen 小部件开始。
  initialRoute: '/',
  routes: {
    // 导航到 "/" 路由时，构建 FirstScreen 小部件。
    '/': (context) => const FirstScreen(),
    // 导航到 "/second" 路由时，构建 SecondScreen 小部件。
    '/second': (context) => const SecondScreen(),
  },
)

有了小部件和路由，就可以使用Navigator.pushNamed() 方法触发导航。 这告诉 Flutter 构建在 routes 表中定义的小部件并启动屏幕。

在 FirstScreen 小部件的 build() 方法中，更新 onPressed() 回调：

// 在 `FirstScreen` 小部件内
onPressed: () {
  // 使用命名路由导航到第二个屏幕。
  Navigator.pushNamed(context, '/second');
}

要导航回第一个屏幕，请使用Navigator.pop() 函数。

// 在 SecondScreen 小部件内
onPressed: () {
  // 通过从堆栈中弹出当前路由来导航回第一个屏幕。
  Navigator.pop(context);
}

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'Named Routes Demo',
      // 使用 "/" 命名路由启动应用程序。在这种情况下，应用程序从 FirstScreen 小部件开始。
      initialRoute: '/',
      routes: {
        // 导航到 "/" 路由时，构建 FirstScreen 小部件。
        '/': (context) => const FirstScreen(),
        // 导航到 "/second" 路由时，构建 SecondScreen 小部件。
        '/second': (context) => const SecondScreen(),
      },
    ),
  );
}

class FirstScreen extends StatelessWidget {
  const FirstScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          // 在 `FirstScreen` 小部件内
          onPressed: () {
            // 使用命名路由导航到第二个屏幕。
            Navigator.pushNamed(context, '/second');
          },
          child: const Text('Launch screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          // 在 SecondScreen 小部件内
          onPressed: () {
            // 通过从堆栈中弹出当前路由来导航回第一个屏幕。
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

除非另有说明，否则本网站上的文档反映的是 Flutter 的最新稳定版本。页面最后更新于 2025-01-30。 查看源代码 或 报告问题。